从零搭建vue工程（vue-router，webpack）
原文地址 http://www.qinshenxue.com/article/20160806114423.html
原文不断修错，补充等，这里更新会滞后一些，建议直接查看原文。欢迎指正错误。
vue 官方提供了快捷构建项目的脚手架工具（vue-cli），只需几个命令就能轻松初始化一个 vue 的 webpack 项目。虽然能够快速开发，但是如果想自己改些配置会有些困难，担心一点改动项目就跑不起来了，也不知道每个参数的作用是啥，正所谓“自己动手丰衣足食”，拿来主义从来都是先甜后苦，因此还是觉得该自己一步一步配置出来一个。自己动手意味着你要去了解每个模块的作用以及模块之间如何组合，如何配置，过程可能痛苦，但是在后期碰到一些问题的时候，你会发现花费的时间比想象中的少了。
初始化
新建项目目录 vue-practice，npm init初始化package.json
从目标分析，以下模块肯定少不了。
. vue，用的 vue 版本是1.0.26
. vue-router，vue 路由插件
. vue-loader，vue 组件（*.vue文件）webpack 模块加载器
. webpack，模块加载器兼打包工具
. webpack-dev-server，轻量的 node.js express 服务器，用于开发调试用
将上面模块加到 package.json 中，查看某个模块的版本号执行npm view 模块名 version。
"devDependencies": {
"vue": "^1.0.26",
"vue-loader": "^8.5.3",
"vue-router": "^0.7.13",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}新建目录及文件，结果如下：
vue-pratice
|-- package.json
|-- index.html // 启动页面
|-- webpack.config.js // webpack配置文件
|-- src
|-- components // vue组件目录
|-- views // vue页面
|-- main.js // 入口文件
|-- router.js // vue-router配置
|-- app.vue // 项目首页组件配置webpack
webpack 默认读取 webpack.config.js，文件名不能随便改，其中 entry 是必须配置的。
module.exports = {
entry: './src/main.js'
}配置 webpack-dev-server，在 package.json 添加以下启动参数即可。
"scripts": {
"dev": "webpack-dev-server --inline --hot"
}这里可以测试 server 能否正常启动，执行npm install，然后npm run dev、访问 http://localhost:8080/，能访问（可以在index.html添加内容来确认是否启动成功），就说明上面的配置ok。
Vue
上面完成了开发环境的配置，离小目标还甚远，主角都还未登场，下面通过一个例子来说明如何利用vue及其插件。
在 src/views 目录下新建一个 about.vue，相当于新建一个“页面”，后面访问 /about 的就是此页面的内容；
<div>
这是{{page}}页面
div>
template>
<script>
module.exports = {
data: function () {
return {
page: 'about'
}
}
}
script>vue-router 调用 router.map({}) 来配置路由信息（2.x已经不再使用这种方式），将 map 调用单独提取到 router.js，形成一个路由配置文件，方便配置，外部直接调用require('./router')(router)即可。map的参数查阅[email protected]官方文档。
module.exports = function (router) {
router.map({
'/about': {
name: 'about',
component: require('./views/about.vue')
}
})
}router-view 相当于传统布局下 iframe，路由的页面在 iframe 里加载。vue当然不是这般工作，我们所说的页面其实也是一个 vue 组件，router-view 就是每个页面组件的容器。router-view 官方解释为“用于渲染匹配的组件，它基于 Vue 的动态组件系统，所以它继承了一个正常动态组件的很多特性。”
<div>
<a v-link="{ path: '/about' }">Abouta>
<router-view>router-view>
div>
template>vue 插件需要调用 vue.use，app.vue 也需要挂在到 html 节点中，路由要加载配置并启动，这些工作都在 entry 对应的 js（main.js）中来完成。
var Vue = require('vue');
var VueRouter = require('vue-router');
var App = require('./app.vue');
Vue.use(VueRouter);
var router = new VueRouter();
require('./router')(router);
router.start(App, '#app');首页只需引入打包后的 js 文件即可，这也是和传统页面区别最大的地方，div#app 是整个网站的挂载点。script 的路径要和 webpack.config.js的 output 配置一致。
<body>
<div id="app">div>
<script src="dist/build.js">script>
body>上面添加了 vue 文件，那么如果将 vue 文件解析成普通的代码，这个就需要在 webpack.config.js中配置 vue-loader。
var path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/, loader: 'vue'
}
]
}
}到这里，似乎小目标实现的差不多了，心里甚是激动，满心期待着执行npm run dev，结果最坏的打算还是发生了。
其实我们在安装vue-loader的时候就会发现其报了很多警告，主要是 vue-loader 依赖一些模块，这些也是必须要安装的，需要把这些模块补上并安装（npm install）。
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2"增加 babel-loader，相应要配置 js 文件的 babel-loader，这就是为什么 package.json 中有这个配置，后面的参数是为了将 es6 转化为 es5，毕竟现在大部分浏览器还不支持 es6 语法。
babel-loader的配置如下：
{
test: /\.js$/,
loader: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false',
exclude: /node_modules/
}这时候再执行npm run dev就不会报错了，然后在浏览器中可以看到如下效果（按上面的步骤再增加 home.vue 并配置路由信息）
增加 css 样式
vue 文件一般是由
{
"vue-style-loader":"^1.0.0",
"css-loader":"^0.25.0"
}安装了这两个 loader 之后，再启动发现就不报错了，而且在中添加的样式也生效了。
如果想引用 CSS 文件怎么弄，虽然现在已经可以在 vue 文件中添加样式，但是引入外部 CSS 文件的方式更通用。
开发组件
每个 vue 文件就是一个组件，views 下面的 vue 文件只是我们把它叫做“页面”，它其实是由其他的 vue 组件组合而成。举一个例子来说明如何封装组件。
menu.vue（将系统的菜单封装为一个组件）
<template>
<div class="menu">
<a v-link="{ path: '/home' }">Homea>
<a v-link="{ path: '/about' }">Abouta>
div>
template>在其他vue文件中使用公共组件的方法如下：
后续
走到这里，一个 vue 的 webpack 工程已近搭建的好了，可以进行实际开发了，封装组件，增加 view，配置 router。后面要做的事还很多，比如打包发布、性能优化、vuex 等等，这些后续会在此项目基础上不断丰富，一步一步探索出最佳实践方案。