vue-cli项目踩坑

vue-cli项目内mock数据

1. 安装http-server.配合项目跑起来。
2. src路径创建mock文件夹，里面配置需要的json数据。
3. 根路径创建vue.config.js设置代理情况。
4. 进入mock。启动http-server .

# yarn global add  http-server
# touch vue.config.js
# mkdir src/mock
# touch src/mock/list.json
# cd mock
# http-server .

module.exports ={
    devServer:{
        proxy:{
            '/list':{
                target:'http://localhost:8081',
                pathRewrite:{
                   '/list': 'list.json'
                }
            }
        }
    }
}

vue-router路由配置以及使用

1. 安装vue-youter
2. src根路径创建router.js
3. 引入组建，使用vueRouter
4. main.js引入router

router.js

# yarn add vue-router
# touch src/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import pageA from 'a.vue'
import pageB from 'b.vue'
Vue.user(VueRouter);
const routers=[{
    path:'/',
    component: pageA
},
{
    path:'/b',
    component: pageB
}]
let router=new VueRouter({routers})
export default router;

main.js

import Vue from 'vue'
import App from './App.vue'
import './directive/n'
import router from './router'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

vuex相关配置以及使用

由于我们在日常开发过程经常会遇到组建间通讯，当然。vue.js中父子通信，通常父组建通过props传值，子组建通过自定义事件¥emit来触发等，包括父孙通讯使用provide / inject，但多业务模块并且不同模块间数据并不相干，通过拆vuex拆成多个module方便代码维护；并且也会使各功能模块高内聚低耦合

• vuex基础用例

1. 安装vuex。
2. 在src路径创建store.js
3. 自定义state数据，添加mutations操作函数，编写触发actions函数
4. main.js引入vuex
5. 最后引入的名字必须是store
6. 页面中引入mapActions，将定义好的方法引入进来；

store.js

# yarn add vuex
# touch src/store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    count:1
}
const mutations={
    increment(state) {
        state.count++
    },
    decrement(state) {
        state.count--
    }
}
const actions={
   increment: ({
        commit
    }) => {
        commit('increment')
    },
    decrement: ({
        commit
    }) => {
        commit('decrement')
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions
})

main.js

import Vue from 'vue'
import App from './App.vue'
import './directive/n'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

a.vue

<template>
  <div class="page">
    <div> vuex {{$store.state.count}}</div>
    <button @click="increment">增加</button>
    <button @click="decrement">删减</button>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  methods:{
   ...mapActions([
      'increment',
      'decrement'
    ])
  }
}
</script>

• vuex多业务模块状态管理

1. 首先在store文件下创建index.js和modules文件夹，里面可以写入我们业务所需要的各模块的组建，比如（a.js,b.js）
2. 自定义state数据，添加mutations操作函数，编写触发actions函数，导出我们所定义的内容。此时记得导出添加namespaced:true；
3. 在index.js中导入我们创建的(a,b)js文件。这里我们使用modules导出我们创建的组件内容
4. 页面中引用引入mapActions。通过methods将方法导入.
5. 通过用户操作行为触发action
6. action触发之后，mutations去操作改变变数据。最后state更新改变后的数据，vue组建的内容更新；

# mkdir src/store 
# mkdir src/store/modules
# touch  src/store/modules/a.js
# touch  src/store/modules/b.js
# touch  src/store/index.js

a.js

const state = {
    count: 1
}
const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }
}
const actions = {
    add: ({
        commit
    }) => {
        commit('add')
    },
    reduce: ({
        commit
    }) => {
        commit('reduce')
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

b.js

]const state = {
    money: 1
}
const mutations = {
    add(state) {
        state.money++
    },
    reduce(state) {
        state.money--
    }
}
const actions = {
    add: ({
        commit
    }) => {
        commit('add')
    },
    reduce: ({
        commit
    }) => {
        commit('reduce')
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import money from './modules/b'
import count from './modules/a'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        money,
        count
    }
})

vue页面中使用

<template>
  <div class="page">
    <div> vuex {{$store.state.count.count}}</div>
    <button @click="add">增加</button>
    <button @click="reduce">减少</button>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions('count', [
      'add',
      'reduce'
    ])
  }
}
</script>

• vuex中mutations 传参数

1. 只需在事件函数中传参
2. mutations去做操作即可

vue页面

<template>
  <div class="page">
    <div> vuex {{$store.state.count.count}}</div>
    <button @click="add(3)">增加</button>
    <button @click="reduce">减少</button>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions('count', [
      'add',
      'reduce'
    ])
  }
}
</script>

a.js

const state = {
    count: 10
}
const mutations = {
    add(state, param) {
        state.count += param
    },
    reduce(state) {
        state.count--
    }
}
const actions = {
    add: ({
        commit
    }, param) => {
        commit('add', param)
    },
    reduce: ({
        commit
    }) => {
        commit('reduce')
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions

}