从零搭建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     // 项目首页组件