vue-cli脚手架工具开发总结

写在前面：在基本不懂后台，不会打包工具的前提下，完成了一个基于vue-cli的spa音乐播放器后，决定做一些总结(纯入门)，以下总结是针对刚学习vue和使用cli工具的。

项目地址

一、安装配置

1.1 首先保证安装了node

1.2 然后全局安装vue-cli，建立项目

npm install -g vue-cli // 全局安装
// 使用vue init创建基于webpack模板的项目
vue init webpack vue-demo // vue-demo为项目名
cd vue-demo // 安装成功后进入项目
npm install// 安装项目的依赖 

1.3 安装成功以后，使用npm run dev运行项目就能看到官网的例子了

下面简单看下项目结构：

-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

看到这么多当时的确很懵逼，这里只是简单介绍下，很多我们开发过程中都是忽略不会改动的，当然你也可以试着把每一个都搞明白，初期完全可以跳过，遇到重要的再单独学习。

二、router路由使用

vue-router在项目生成的时候已经安装，配置路由主要在router的index.js中配置。
在compons中新增几个组件作为例子；
引用对应的组件，引用vue和vue-router模块；
然后使用配置路由的参数和对应的路径；

在App.vue中加入对应的路由地址
<router-link to="路由地址"></router>
组件会渲染在<router-view></router-view>中,更多详细配置及传递参数等,请查看router官方文档

我们可以发现在index.js文件路径有一个@符号，这是项目预先配置的路径别名，表示根目录下的src目录,打开build文件夹下的webpack.base.conf.js可以看到

三、vuex状态管理的使用

npm install vuex --save //初始默认是没安装的

个人总结vuex通俗就是全局的状态管理，可以看做是一种全局对象，当然不仅仅是这样。
看下官方文档的解释：

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

还是先看个简单的例子：

在src目录下建立store文件夹，新建index.js。

在main.js中引用并注册store,这样store就可以在全局中使用了

我们在App.vue和tab1.vue中同时监听store的变化，点击图中的button我们可以看到state中count的变化。

友情提示

上图查看vuex状态是vue devtools开发工具，可以实时查看vue项目的各种组件、数据、方法、状态等
vuex会在浏览器刷新后重置
更多详细内容移步vuex官方文档

再添加一个axios，这样一个最简单的vue+vue-router+vuex的全家桶就实现了2333

四、开发过程中常见的配置和包的引用

4.1 eslint

如上图所示我们打开控制台进场看到有这样类似的警告,却不影响项目运行。其实这是eslint实现的代码规范检查，看截图主要提示的一些代码之间的空格，符号的规范使用。不想使用可以在webpack.base.conf.js将eslint-loader的部分注释，好像现在的vue-cli启动以后在8081端口会有个不使用的eslint的版本

4.2 模板引擎,css预处理器

html:pug(原来叫jade)
css: sass(scss)/less/stylus (我用的scss)

npm install pug pug-loader pug-filters  --save-dev  // 安装pug 及其依赖
npm install sass sass-loader node-sass --save-dev //安装scss及其依赖

然后编写一个实例的组件,template中用lang="pug",style中用lang="scss"，然后App.vue中注册并引用组件就能看到效果了(现在版本的vue-cli中vue-loader会自动对组件中每个模块使用对应的loader)

结语：大概总结了一下前期开发中遇到的小问题。在实际开发中会加入各种各样新的模块，慢慢学习,后续再总结，最后求个star吧。