vue-cli项目踩坑

发布于 2019-12-02  约 12 分钟

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

}
阅读 387发布于 2019-12-02

推荐阅读
目录