记一次前端菜鸟使用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啦，就可以看到我们的目的了。 小白记录，欢迎大家多多指教。