記一次前端菜鳥使用vuecli與vuex與vue-router

我參考了https://blog.csdn.net/qq_35430000/article/details/79291287這位大神的操作，中間修改了一些東西，我們的最終目的是下面這樣

點選修改為A餐館就修改為A餐館那樣子，componentB元件同樣如此， 首先就是筆記本上要安裝好node命令，vuecli官網https://cli.vuejs.org/zh/guide/，開啟這個網址首先略過一遍講的大概是什麼，第一次沒看懂寫的什麼玩意也沒關係。 直接從建立一個專案開始，我用的工具是webstorm，找個地方新建一個空白資料夾，在webstorm中開啟檔案下面打卡webstorm下面的terminal，或者在筆記本中滑鼠定位到剛才新建立的資料夾，按住shift鍵的同時滑鼠右鍵開啟控制檯，win10是powershell視窗，輸入vue create 專案名稱，接著到了這一步我是直接enter

或者你也可以使用vue ui來直接操作，這樣對於新手來說只是變得更加容易理解vuecli在幹些什麼事情，後面稍微理解了之後還是最好使用控制檯來操作哦，這樣對工作更加有益哈哈哈。 後面等他執行好了之後直接npm run serve,執行好了之後預設直接開啟localhost：8080網址，就可以看到你的小成果啦

好了這樣是不是有一丟丟小成就感啦嘻嘻。下面開始自己一頓操作

按照上圖建立好資料夾，下面開始直接上程式碼啦， App.vue檔案如下圖：

接著是router下面的index.js檔案

再者是store下面的index.js檔案

接著是getters.js

再者是actions.js這個檔案的意義在於：action類似於mutation，不同在於 一、action提交的是mutation，而不是直接變更狀態。二、action可以包含任意非同步操作。

接下來是mutations.js檔案

下面就是componentA.vue和componentB.vue檔案啦

下面要現在terminal中輸入npm install vue-router --save安裝路由，如果控制檯報錯了按照提示安裝相應的外掛，最後就是npm run serve啦，就可以看到我們的目的了。 小白記錄，歡迎大家多多指教。