vue+vuex實現 counter計數器
框架搭建好過后輸入npm run dev的時候不會直接打開瀏覽器，在config文件夾找到index.js文件夾 把autoOpenBrowser: false改為autoOpenBrowser: true，從新在命令行輸入npm run dev，這是就會自動打開瀏覽器。 如圖修改
現在做個簡單的demo示例：counter(計數器)
一、文件夾與文件的創建
- 1、首先要在components文件夾下面創建counter的一個文件夾
- 2、然后在counter文件夾里創建文件app.vue，然后就可以開始寫代碼了
代碼如圖：
上面代碼就是這個簡單的vue應用，左邊是main.js里面注冊組件的代碼，右邊是我們寫的計數器的代碼，點擊加（“+”）或者減（“-”）的時候瀏覽器上面的點擊次數會變化，就是代碼里面data里的count這個變量或發生變化
網頁顯示如圖：
二、狀態管理Vuex（狀態機）
我們現在在上面這個demo里面引入vuex看看效果
- 1、在命令行使用npm下載vuex依賴,輸入下面命令
npm install vuex --save
如圖：
這就是成功了的，現在看package.json文件里面就會多一段代碼："vuex": "^3.0.1"
-
2、在components文件夾創建一個store文件夾，並在store文件夾下面創建一個store.js文件，現在先不管store.js文件，先在main.js里注冊組件（全局注冊）
如圖：
-
3、在components/store/store.js文件里引入Vue、Vuex和counter里面的store.js文件
如圖：
-
4、在counter文件夾里面的app.vue文件里面引入vuex的方法mapState和mapMutations輔助函數
-
5、在counter文件夾里面創建store.js文件，然后看看加入vuex后的代碼的變化
如圖：
現在可以對比一下加了vuex和沒有加vuex的代碼區別