本文例項講述了Vue-CLI與Vuex使用方法。分享給大家供大家參考，具體如下：

1、通過Vue-CLI建立專案

Vue-CLI是Vue用於建立Vue專案的腳手架工具，它可以快速幫你建立一個Vue專案的檔案目錄，使Vue開發更加便捷、標準化。

1、全域性安裝腳手架：npm install --global vue-cli，安裝成功後可以通過vue -V檢視版本號

2、初始化專案資料夾：vue init webpack 專案名，之後會出現命令列互動，根據提示設定專案名稱、描述以及是否安裝一些依賴包。

3、安裝依賴包：在vue專案中會用到很多第三方依賴，如果是新專案或者添加了新的依賴，執行之前就需要安裝依賴：npm install，有時在啟動專案時會報錯Error: Cannot find module 'XXX'，這就是由於專案缺少依賴導致。如果npm install後仍報錯，建議把依賴的資料夾node_modules刪除，再重新安裝依賴試一試。

4、啟動專案：npm run dev，自動會在瀏覽器8080埠彈出專案頁面。vue預設埠8080，如果需要修改，在config/index.js檔案內修改port的值

5、專案打包：npm run build，在專案開發結束後打包生產dist資料夾，只需要把該檔案放到伺服器即可

構建專案之後生成初始資料夾：

1. build資料夾：存放構建專案所需的檔案
2. config資料夾：專案的設定檔案
   1. index.js：設定路徑、跨域代理、伺服器、埠號等
3. node_modules資料夾：安裝依賴的檔案
4. src資料夾
   1. assets資料夾：存放頁面相關的靜態檔案例如CSS
   2. components資料夾：存放頁面使用的公共元件
   3. router/index.js：設定訪問路徑所對應的頁面
   4. views資料夾：存放vue頁面檔案
   5. app.vue：頁面主入口元件
   6. main.js：頁面主js入口
5. static資料夾：存放靜態資源如圖片等
6. index.html：主頁面
7. package.json：專案所使用的依賴列表

2、Vuex核心概念

Vuex是一個專門為vue.js應用開發的狀態管理模式，當我們構建一個大中型SPA時，vuex可以幫助我們更好的再組建外部統一管理狀態。當多個vue元件需要同時使用一些引數時，如果通過引數傳遞會很麻煩，而且多個元件同時操縱資料會導致開發混亂，這就需要對它們進行統一管理。

1、state：vuex中的資料來源，所有元件對資料的操作都是對它，類似於vue元件中的data，在例項化vuex後可通過state訪問其中的資料：

console.log(store.state.count)

2、getters：由stsate中派生出的資料，在state資料的基礎上做修改。

3、mutations：vuex中state的資料不可以直接進行修改，這樣會造成混亂。修改state的唯一方法是提交mutation函式。

const store = new Vuex.Store({
 state: {
  count: 0
 },mutations: {
  increment (state) {
   state.count++
  }
 }
})

通過提交increment來使state中的count++

store.commit('increment')

4、action：可以自定義物件來提交mutation，與mutation不同的是它可以非同步執行。action通過分發的方式觸發：

actions: {
  incrementAction (context) {
   context.commit('increment')
  }
 }
store.dispatch('incrementAction') //通過分發來呼叫action

5、module：當管理的狀態過多時，vue的store物件就會變得臃腫，這時可以將其分割為幾個module，每個module可以有自己的state、mutation等。

綜上，vuex的資料流圖如下：當vue components觸發事件時，引起分發action，action提交到mutation，mutation改變state的值，導致重新渲染vue component元件。

3、使用vuex

1、引入vuex檔案或在專案的mian.js中引入並使用

 <script src="../js/vuex.js"></script>

2、例項化Vuex

  const store=new Vuex.Store({
   state:{
    count:10
   },mutations:{
    increment(state){    //只有通過mutation中的方法才可修改store中的值
     state.count++;
    }
   }
  });

3、在app中註冊store

 let vue=new Vue({
   el:'#app',data:{
   },store:store
 })

4、在註冊後的vue的元件couter中可以使用store，通過computed屬性訪問$store.state中的資料：

   components:{
    counter:{
     template:`<div>計數{{count}}</div>`,computed:{
      count(){
       return this.$store.state.count;
      }
     }
    }
   },

5、元件的add方法通過commit改變store中的值：

<div id="app">
  <counter></counter>
  <button @click="add">點選加一</button>
</div>

   methods:{
    add(){
     this.$store.commit('increment')
    }
   }

也可以通過commit進行引數傳遞：this.$store.commit('increment',num)

6、通過getters得到處理後的資料：

  const store=new Vuex.Store({
   state:{
    count:10
   },getters:{     //在getters中對state中的count處理之後輸出為square，供外部呼叫
    square(state){
     return state.count*state.count;
    }
   },mutations:{
    increment(state){
     state.count++;
    }
   }
  });

通過計算屬性square呼叫$store.getters.square

   computed:{
    square(){
     return this.$store.getters.square;
    }
   }

希望本文所述對大家vue.js程式設計有所幫助。