Vue-cli3.0+Vuex使用详细

最近自己在用vue-cli3.0做项目，第一次接触的时候就希望有一个详细的搭建项目的文章可以学习一下，现在自己整理一下项目搭建使用的详细步骤过程分享给大家。希望对使用到的小伙伴有所帮助，我们来一起学习，有不足之处欢迎指出纠正。

安装

安装node环境

首先我们需要的是安装node环境可以去node.js官网下载（nodejs.org/zh-cn/）长期支持版（LTS）。安装过之后可以命令行里输入node -v检查一下是否安装成功

安装vue-cli3.0

npm i @vue/cli -g

项目搭建

1、创建新项目，运行：

vue create vuedemo

vuedemo为创建项目存放的文件夹名，可根据项目自行命名。系统将提示您选择预设。您可以选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功能”以选择所需的功能。这里选择 ： Manually select features  （手动选择功能配置）

2、选择需要的选项

此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试。(上下移动空格选中)  最后确认（Y）

2.1、选择css预处理语言，这里我选择Less

2.2、选择ESLint的代码规范，这里选择使用 Standard 代码规范

2.3、选择何时进行代码检测，这里我选择 Lint on save 在保存时进行代码检测

2.4、选择单元测试解决方案，这里我选择 Jest

2.5、选择 Babel, PostCSS, ESLint, 等配置文件的存放位置，这里我选择单独保存在各自的配置文件中

2.6、是否将此保存为将来项目的预设（如果选择保存下次项目创建时要用这次的配置的话可以直接选择使用），这里我选择不保存

2.7、配置完成后等待脚手架完成初始化生成目录文件

2.8、此时就可以根据提示启动项目了（目录结构如下）

2.9、vue.config.js配置文件（cli.vuejs.org/zh/config/）

我们可以在项目的根目录下与（package.json同级）新建一个vue.config.js文件，它是一个可选的配置文件，可以修改添加配置（比如开发中用的接口代理proxy，端口号等）

到此我们的vue-cli3.0的项目搭建的详细步骤就结束了，下面我们来介绍vuex的使用。

Vuex

在上面的vue-cli3.0项目创建中我们已经选择了vuex的选项，我们可以在项目中看到一个store.js的文件，就是我们在项目中进行全局状态管理的地方。vuex的核心概念：state、getters、mutations、actions，我们来一个一个讲解使用。

state  初始化状态设置要全局访问的state对象

这里设置过以后我们可以用this.$store.state.showTab或this.$store.state.demoNumber在任何一个组件里面获取showTab和demoNumber定义的值了

getters   来实时监听state值的变化(最新状态)

actions  这个actions也是个对象变量，最大的作用就是里面的action方法 可以包含任意异步操作