Vue开发技巧
vue.config.js
设置@符号
1 |
|
设置代理
将任何未知的请求代理到指定服务器
1 | module.exports = { |
将不同路径代理到不同服务器中
1 | module.exports = { |
关闭代码检查
1 | module.exports = { |
vue配置文件模板
1 |
|
vuex
vuex原理图
vuex的原理图，在组件调用store的dispatch方法后，执行了actions中的方法（action中可以调用Ajax请求），在actions中commit调用mutations后，在mutation和actions中都可以修改store中的方法
当在actions中不需要进行什么操作（直接将接收的值传入mutations中的时候）可以在组件中不需要调用actions，直接在组件中直接commit调用mutations，可以直接越过actions
vuex的基本使用
创建store
在src下面创建一个文件夹
store，创建一个文件index.js，写入以下内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//在vue中使用vuex
Vue.use(Vuex)
export default new Vuex.Store({
//用于响应组件中的动作
actions: {},
//用于操作数据（state）
mutations: {},
//用于存储数据
state: {},
//用于将state中的数据进行加工，比如state中sum+1
getters: {},
//用于存放vuex的各个模块，进行模块化管理时使用
modules: {}
})在src下面的
main.js中引入上面创建的store文件1
2
3
4
5
6
7//在main.js文件中引入store
import store from './store'
new Vue({
........
//在vue实例中引入store
store,
}).$mount('#app')
vuex的基本使用
创建vuex和在main.js中引入（上面创建store中有具体步骤）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {
jia(context, value) {
context.commit('JIA', value)
}
},
mutations: {
JIA(state, value) {
state.sum += value
}
},
state: {
sum: 0,
},
getters: {
bigSum(state){
return state.sum + 10
}
},
modules: {}
})在组件中操作store。使用
this.$store.dispatch(actions中的方法或mutations中的方法，传入的值)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<template>
<div>
<div @click="storeJia">操作store</div>
<!-- 获取state中的数据 -->
<div style="font-size: 20px;">{{$store.state.sum}}</div>
<!-- 获取getters中的数据 -->
<div style="font-size: 20px;">{{$store.getters.bigSum}}</div>
</div>
</template>
<script>
export default {
methods: {
storeJia() {
this.$store.dispatch('jia', 2)
}
},
}
</script>在组件中访问
store / getters- 在
template中使用插值语法{{}}访问：- 访问store：
{{$store.state.state中的变量}} - 访问getters：
{{$store.getters.getters中的变量}}
- 访问store：
- 在
vuex的进阶使用—mapState
在vue组件中使用store中的数据时，总是要使用$store.state.state中的变量访问变量，所以vuex提供了mapState结合vue提供的computen计算属性一起使用能够快捷的访问state中的属性
创建vuex和在main.js中引入（上面创建store中有具体步骤）。这里只使用state中的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {},
mutations: {},
state: {
sum: 0,
username: '张三'
},
getters: {},
modules: {}
})在组件中使用
mapState：在计算属性computed中使用- 使用对象的方式一个一个引入 / 使用数组的方式直接引入
- 使用方式一：
...mapState({sum:'state中的变量',username:'state中的变量'}) - 使用方式而：
...mapState([state中的变量1 , state中的变量2 , ......])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<template>
<div>
<div style="font-size: 20px;">{{ username1 }}</div>
<div style="font-size: 20px;">{{ sum1 }}</div>
<div style="font-size: 20px;">{{ username }}</div>
<div style="font-size: 20px;">{{ sum }}</div>
</div>
</template>
<script>
// 引入vuex中的mapState
import {mapState} from 'vuex'
export default {
computed: {
//使用对象接收store中的数据，可以重新赋变量名，可以和store中的数据一致
...mapState({sum1: 'sum', username1: 'username'}),
//使用数组接收store中的数据，变量名为store中的变量名
...mapState(['sum', 'username']),
},
}
</script>
vuex的进阶使用—mapGetters
在vue组件中使用getters中的数据时，总是要使用$store.getters.getters中的变量访问变量，所以vuex提供了mapGerrers结合vue提供的computen计算属性一起使用能够快捷的访问getters中的属性
创建vuex和在main.js中引入（上面创建store中有具体步骤）。这里只使用getters中的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {},
mutations: {},
state: {
sum: 0,
username: '张三'
},
getters: {
bigSum(state) {
return state.sum + 10
},
newUsername(state){
return state.username+"是好人"
}
},
modules: {}
})在组件中使用
mapGetters：在计算属性computed中使用- 使用对象的方式一个一个引入 / 使用数组的方式直接引入
- 使用方式一：
...mapGetters({sum:'getters中的变量',username:'getters中的变量'}) - 使用方式而：
...mapGetters([getters中的变量1 , getters中的变量2 , ......])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<template>
<div>
<div style="font-size: 20px;">{{ bigSum1 }}</div>
<div style="font-size: 20px;">{{ newUsername1 }}</div>
<div style="font-size: 20px;">{{ bigSum }}</div>
<div style="font-size: 20px;">{{ newUsername }}</div>
</div>
</template>
<script>
//从vuex中引入mapGetters
import {mapGetters} from 'vuex'
export default {
computed: {
...mapGetters({bigSum1: 'bigSum', newUsername1: 'newUsername'}),
...mapGetters(['bigSum', 'newUsername']),
},
}
</script>
vuex的进阶使用—mapActions
在vue组件中使用actions中的方法时，总是要使用this.$store.dispatch('actions中的方法', 需要传入的值)访问actions中的方法，所以vuex提供了mapActions结合vue提供的methods一起使用能够快捷的访问actions中的方法
创建vuex和在main.js中引入（上面创建store中有具体步骤）。这里只使用actions中的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {
jia(context, value) {
context.commit('JIA', value)
},
jian(context, value) {
context.commit('JIAN', value)
}
},
mutations: {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
}
},
state: {
sum: 0,
},
getters: {},
modules: {}
})在组件中使用
mapActions：在methods中使用- 使用对象的方式一个一个引入 / 使用数组的方式直接引入
- 使用方式一：
...mapActions({jia1:'actios中的方法',jian1:'actions中的方法'}) - 使用方式而：
...mapActions([actions中的方法1 , actions中的方法2 , ......])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<template>
<div>
<div style="font-size: 20px" @click="jia(1)">jia</div>
<div style="font-size: 20px" @click="jian(1)">jian</div>
<div style="font-size: 20px" @click="jia1(1)">jia1</div>
<div style="font-size: 20px" @click="jian1(1)">jian1</div>
<div style="font-size: 20px;">{{ sum }}</div>
</div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
export default {
computed: {
...mapState(['sum']),
},
methods: {
...mapActions({jia1: 'jia', jian1: 'jian'}),
...mapActions(['jia', 'jian']),
},
}
</script>
vuex的进阶使用—mapMutations
在vue组件中使用actions中的方法时，总是要使用this.$store.dispatch('mutations中的方法', 需要传入的值)访问mutations中的方法，所以vuex提供了mapMutations结合vue提供的methods一起使用能够快捷的访问mutations中的方法
创建vuex和在main.js中引入（上面创建store中有具体步骤）。这里只使用mutations中的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {},
mutations: {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
}
},
state: {
sum: 0,
},
getters: {},
modules: {}
})在组件中使用
mapMutations：在methods中使用- 使用对象的方式一个一个引入 / 使用数组的方式直接引入
- 使用方式一：
...mapMutations({JIA1:'mutations中的方法',JIAN1:'mutations中的方法'}) - 使用方式而：
...mapMutations([mutations中的方法1 , mutations中的方法2 , ......])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<template>
<div>
<div style="font-size: 20px" @click="JIA1(1)">JIA1</div>
<div style="font-size: 20px" @click="JIAN1(1)">JIAN1</div>
<div style="font-size: 20px" @click="JIA(1)">JIA</div>
<div style="font-size: 20px" @click="JIAN(1)">JIAN</div>
<div style="font-size: 20px;">{{ sum }}</div>
</div>
</template>
<script>
import {mapState ,mapMutations} from 'vuex'
export default {
computed: {
...mapState(['sum']),
},
methods: {
...mapMutations({JIA1: 'JIA', JIAN1: 'JIAN'}),
...mapMutations(['JIA', 'JIAN']),
},
}
</script>
vuex模块化+命名空间
模块化可以将多个store整合到一个store中，需要在每个store中需要将namespaced: true
创建store
创建子模块 person，里面用于放入一些用户的基本信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27export default {
namespaced: true,
//用于响应组件中的动作
actions: {
append(context, value) {
context.commit("APPEND", value)
}
},
//用于操作数据（state）
mutations: {
APPEND(state, value) {
state.username += value
}
},
//用于存储数据
state: {
username: "张三"
},
//用于将state中的数据进行加工，比如state中sum+1
getters: {
newUsername(state){
return state.username+"是个好人"
}
},
//用于存放vuex的各个模块，进行模块化管理时使用
modules: {}
}创建sum，里面用于放一些运算操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27export default {
namespaced: true,
//用于响应组件中的动作
actions: {
sum(context, value) {
context.commit('SUM', value)
}
},
//用于操作数据（state）
mutations: {
SUM(state, value) {
state.sumValue += value
}
},
//用于存储数据
state: {
sumValue: 20
},
//用于将state中的数据进行加工，比如state中sum+1
getters: {
bigSumValue(state) {
return state.sumValue + 20
}
},
//用于存放vuex的各个模块，进行模块化管理时使用
modules: {}
}创建index，用于整合所有模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import Vue from 'vue'
import Vuex from 'vuex'
//引入一个一个的store
import sum from './sum'
import person from './person'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
sum: sum,
person: person
}
})
在vue中使用模块化中的store数据
1 | <template> |
vuex持久化
博客2：https://juejin.cn/post/6918684399659646989
vue-router
vue-router参数详解
router-link标签参数详解
一级路由
1 | import Vue from 'vue' |
多级路由
1 | import Vue from 'vue' |
路由query参数—router-link
1 | <template> |
命名路由
利用路由的name的值访问路由
定义一个路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{path: '/image4', name: 'Image4', component: () => import('@/views/index')},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router利用路由的
path和name属性访问组件1
2
3
4
5
6
7
8
9
10<template>
<div>
<!-- 使用name属性访问 -->
<router-link :to="{name:'Image4'}">测试</router-link><br/>
<!-- 使用path属性访问 -->
<router-link :to="{path:'image4'}">测试</router-link><br/>
<!-- 直接写路径，可以默认为path的值 -->
<router-link to="/image4">测试</router-link><br/>
</div>
</template>
css解决文本溢出
1 | *{ |
格式化配置文件
命名为
.editorconfig文件
1 | # 告诉EditorConfig插件，这是根文件，不用继续往上查找 |
CSS重置样式表和基础样式
reset.css
1 | /* http://meyerweb.com/eric/tools/css/reset/ |
normalize.css
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
相关推荐
评论