写在前面：在基本不懂后台，不会打包工具的前提下，完成了一个基于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吧。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。