使用 Vue 开发单页应用全攻略
网上面有很多关于如何使用 Vue 开发单页应用的教程，从 Vue-cli 的使用到 Vue router 的配，也是非常的详细。但是却没有对各个需要的知识点做扩展，再加上技术的更新换代也是几何倍的，所以现在决定写一系列关于如何从头开发 Vue 单页应用的攻略，希望对各大热爱学习的朋友有所帮助，同时如果写的有什么不对的地方希望指正。谢谢。
一、知识储备
EcmaScript 6
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标 准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6 相对于它以前的版本可谓是突飞猛进，新增了块作用域、箭头函数、Class、Promise、Module 以及 N 多的新特征和语法。而且不需要担心不同浏览器对 ES6 的兼容性问题，你可以放心的使用 Babel 或 TypeScript 来处理各种问题。
学习 ES6 语法中比较常用的部分推荐看如下文章：
学习 ES6 的全部特征推荐阮一峰开源的书籍
Sass
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
Sass 能够使你像开发真正的计算机语言般开发你的 CSS。什么，你想将常用的 CSS 封装成一个函数，或者继承上一个 CSS 的样式？没问题，使用 Sass 就可以解决了。当然，同样优秀的还有 Less 和 Stylus，这里不做讨论。
Sass 官网：
二、开始使用脚手架
使用 Webpack 搭建过项目的人肯定知道，光是 webpack.config.js 和 package.json 的配置就非常的复杂了，更别提其他的各种文件了。感谢 Vue-cli 使这一切变得非常的简单，接下来介绍一下如何使用 Vue-cli 搭建开发环境。
- 全局安装 vue-cli
cnpm install -g vue-cli- 初始化 Vue 项目
vue init webpack my-project- 进入 my-project
cd my-project- 安装 node_modules
npm install- 运行项目
npm run dev第五步之后等待几秒钟，就会自动打开 localhost:8080，你会看到一个 Vue 项目搭建成功的页面。因为墙内使用 NPM 会很慢，推荐使用阿里的镜像，只需要安装：
npm install -g cnpm --registry=http://registry.npm.taobao.org然后使用 cnpm 来代替 npm 即可。
二、配置文件介绍
通常使用脚手架工具搭建之后会你会发现开发环境有近 100M 的大小，不用担心，通常都是因为每次执行 cnpm install 时产生的 node_module 文件，而生产环境中不需要考虑。
这里介绍几个常用的文件，其他的配置文件有兴趣的话可以阅读相关的介绍文章。
webpack.base.config.js
build 目录下的 webpack.base.conf.js 是用来配置主要的 Webpack 编译入口、输出路径、命名规则等等。同时在目录下还有 webpack.dev.conf.js（开发环境配置） 和 webpack.prod.conf.js（生产环境配置）。
dev-server.js
build 目录下的 dev-server.js 配置了开发中间件 webpack-dev-middleware 和热载中间件 webpack-hot-middleware，同时挂载代理服务器，配置静态资源等等。你能够修改 var uri = 'http://localhost:' + port 代码来设置默认的访问路径（默认为：localhost:8080）。
config/index.js
config 文件夹下面核心的问题，在本文件你可以配置项目的 build 的目录和文件名。同时，也可以配置开发环境的 proxy，用反向代理解决跨域问题。
- 生产环境的配置
env: require('./prod.env'),
// 生成入口文件 index.php 的打包路径
index: path.resolve(__dirname, '../dist/index.php'),
// 生成的文件夹名称（dist)
assetsRoot: path.resolve(__dirname, '../dist'),
// 静态资源文件名称（static）
assetsSubDirectory: 'static',
// index.php 文件引用资源的相对路径
assetsPublicPath: '/',- proxy 的配置
// 使用 interface 来配置 API，就相当于 http://your.server.com/interface
proxyTable: {
'/interface': {
// 目标服务器地址
target: 'http://your.server.com',
changeOrigin: true,
secure: false
}
}
更加具体的配置请参考：
三、如何安装一个 NPM Package
我想要安装 CSS Package
- 第一步，找到自己想要的插件（比如 normalize.css）
- 在命令行中敲下：
cnpm install normalize.css --save-dev - 在 main.js 中引用：
import 'normalize.css'
我想要安装 JS Package
- 第一步，找到自己想要的插件（比如 normalize.css）
- 在命令行中敲下：
cnpm install normalize.css --save-dev - 使用 axios 来引用 axios 插件
import axios from 'axios' - 根据需要在全局绑定 Vue.prototype.$http = axios;
这样你就可以在 Vue 组件中使用 this.$http.get 或者 this.$http.post 来请求数据了，当然还有 put、jsonp、delete 等方式和配置，这里不具体写了。如果想要了解更多 axios 的配置和使用技巧，请参考：
四、Babel 和 Postcss
Babel
Babel 是一个 JavaScript 编译器。
使用 Babel 能够让我们大胆的使用 ECMAScript 的新一代标准，比如最流行的 ES6 或者最新的 ES8 以及 ES9，而不用去担心一系列的兼容性问题，交给 Babel 去处理就对了。
打开 package.json，在 devDependencies 下可以找到 babel-core 和其他几个 babel package。同时在项目根目录下有一个叫做 .babelrc 的文件，这个文件就是 Babel 的配置文件，打开之后可以看到使用了 stage-2 的标准，不过接下来我们要安装 babel-preset-es2015 Package 来支持 ES6 的语法。
- 安装 babel-preset-es2015：
cnpm install babel-preset-es2015 --save-dev - 修改 .babelrc 文件：
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
["es2015", "stage-2"]
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "es2015", "stage-2"],
"plugins": ["istanbul"]
}
}
}- 开始使用 ES6 的语法进行编程吧！
当然，还有比如 polyfill 等等的 Package 需要手动安装才能支持，推荐阅读官方文档：
PostCSS
PostCSS 是一个通过 JS 插件编译 CSS 的工具
PostCSS 可以看成是一个平台，在这个平台上面包含了很多专门处理 CSS 的插件，比如规范 CSS，使用新一代的 CSS Next 等等。其实 Vue-cli 项目里面内置了 PostCSS，同时安装了 autoprefixer，它会在 build 阶段自动生成给 CSS 元素加上前缀。想要了解更多的 PostCSS可以阅读：
五、路由配置
直接给个官方文档的传送门：
路由配置中的问题：
Vue路由History mode模式中页面无法渲染的原因及解决
六、结束语
现在可能没有什么技术能够像前端这样丰富多彩，各种框架、工具、插件层出不穷，新手很容易在这样一个复杂的圈子里面迷失。同时，很多人使用一个框架，就很想要分出一个高低。其实，只要是适合自己项目的框架就是值得尝试的。技术不断变化，最重要的还是其中的基础知识，也许当你各种工具、框架玩的非常的厉害时，却忽视了其中的核心知识。所以，要始终记得技术是为人类服务的，同时基础知识始终要掌握牢靠。