vue全家桶项目搭建（vue-cli 2.9.6+vue-router+vuex+axios）

1、安装vue-cli + vue-router + vuex + axios

　　一、安装vue-cli

　　　　

　　二、建立项目

　　　　

　　三、安装vuex和axios

　　　　

2、搭建项目目录结构，以下所示：

　　

 

　　一、assets目录用于存放静态文件，如图片等等。

　　二、components目录用于存放一些封装的公用的组件。

　　三、config目录用于存放配置项信息。

　　四、page目录用于存放页面组件。

　　五、router目录用于存放路由信息。

　　六、service目录用于存放请求后台接口的操做。api.js用于封装统一请求接口。

　　七、store目录用于存放vuex的相关信息。

3、配置vuex

　　在/src/store/index.js中，写入以下内容

　　　　

 

　　在main.js中引入store：

　　　

4、项目结构就此搭建完成，控制台中输入npm run dev可查看到以下页面：