vue-cli項目踩坑

時間 2019-12-20

標籤 vue cli 項目简体版

原文原文鏈接

vue-cli項目內mock數據

安裝http-server.配合項目跑起來。
src路徑建立mock文件夾，裏面配置須要的json數據。
根路徑建立vue.config.js設置代理狀況。
進入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路由配置以及使用

安裝vue-youter
src根路徑建立router.js
引入組建，使用vueRouter
main.js引入router

router.jsvue

# 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.jsvue-router

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

vuex基礎用例

安裝vuex。
在src路徑建立store.js
自定義state數據，添加mutations操做函數，編寫觸發actions函數
main.js引入vuex
最後引入的名字必須是store
頁面中引入mapActions，將定義好的方法引入進來；

store.jsvue-cli

# 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.jsjson

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.vueapp

<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多業務模塊狀態管理

首先在store文件下建立index.js和modules文件夾，裏面能夠寫入咱們業務所須要的各模塊的組建，好比（a.js,b.js）
自定義state數據，添加mutations操做函數，編寫觸發actions函數，導出咱們所定義的內容。此時記得導出添加namespaced:true；
在index.js中導入咱們建立的(a,b)js文件。這裏咱們使用modules導出咱們建立的組件內容
頁面中引用引入mapActions。經過methods將方法導入.
經過用戶操做行爲觸發action
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.jside

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.jsspa

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 傳參數

只需在事件函數中傳參
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

}