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

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

项目地址

1、安装配置

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                     // 项目基本信息

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

2、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能够看到

3、vuex状态管理的使用

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

我的总结vuex通俗就是全局的状态管理，能够看作是一种全局对象，固然不单单是这样。
看下官方文档的解释：

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

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

二、你不能直接改变 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、开发过程当中常见的配置和包的引用

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吧。