vue+webpack解析vue页面，一切从最简单开始

这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档
vue2.0 http://vuefe.cn/guide/
vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html

对于webpack我就不做太多的解释了，网上有太多，大家自己去看。
其实webpack很简单，但是对于刚开始的新手，从gethub上下一个项目，一大堆的配置，着实有些头大。
我也是从一个坑一个坑被坑着走过来的，差点被sass坑个半死，到现在我都没有解析成功，只做到了解析less。
要是用webpack，所以cli我是全局安装的。

首先我就介绍一下webpack编译vue必备的一些插件，官方的配置太多了，其实都没有必要，然后下面我贴一下我自己的一个配置

 {
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "entry.js",
"dependencies": {},
"devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.0",
    "css-loader": "^0.23.1",
    "eslint": "^2.10.2",
    "eslint-loader": "^1.3.0",
    "html-loader": "^0.4.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

简单解释一下：devDependencies 里面才是所需要的东西babel开头和eslint，是用来处理es6语法的。
style-loader 是处理html或者vue后缀的页面内部的css的。
css-loader 是处理引入的css的。
如果用的是webStrom，webpack-dev-server是不需要的，因为webStrom内置了服务如果是其他编辑器，可能要自己配置webpack-dev-server启动一个服务因为我用的是webStrom，所以这一块也就没法说了，因为也没试过。

然后贴一下我的node_modules目录

++|  autoprefixer-loader
++|  babel
++|  babel-core
++|  babel-loader
++|  babel-plugin-transform-runtime
++|  babel-preset-es2015
++|  babel-runtime
--|  css-loader
++|  eslint
++|  eslint-loader
--|  file-loader
--|  html-loader
--|  style-loader
--|  url-loader
--|  vue
--|  vue-hot-reload-api
--|  vue-html-loader
++|  vue-loader
--|  vue-style-loader
++|  webpack
--|  webpack-dev-server

+ 标示不安装一定会报错的， - 标示针对各种特定文件格式的

然后说一下webpack.config，webpack会自动调用这个文件。
我的配置也很简单。

感觉配置越多，程序若是报错，就越是无法下手，所以我才从最简单的开始，没有用LESS，SASS,STYLESS，jade等一系列的预编译，仅仅就从最基本的开始。
如果程序报错，你可以看一下最开始第一行，一般都是因为某一个插件没有install，你只要把它install下来应该就可以。

 ERROR in ./entry.js
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "D:\\node\\01vue\\vue"
at D:\node\01vue\vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:17
at Array.map (native)
at Function.normalisePlugins (D:\node\01vue\vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:196:20)
at OptionManager.mergeOptions (D:\node\01vue\vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:317:36)
at OptionManager.init (D:\node\01vue\vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:506:10)
at File.initOptions (D:\node\01vue\vue\node_modules\babel-core\lib\transformation\file\index.js:243:89)
at new File (D:\node\01vue\vue\node_modules\babel-core\lib\transformation\file\index.js:159:72)
at Pipeline.transform (D:\node\01vue\vue\node_modules\babel-core\lib\transformation\pipeline.js:49:16)
at transpile (D:\node\01vue\vue\node_modules\babel-loader\index.js:14:22)
at Object.module.exports (D:\node\01vue\vue\node_modules\babel-loader\index.js:88:12)
@ multi main

类似这样，entry入口文件报错，这是一个缺少transform-runtime的错误，很简单，我就从错误里复制了transform-runtime，然后npm install transform-runtime --save-dev然后回车，万事OK了。

然后开工，来一个最简单的目录

vue     --|  entry.js  //入口文件/打包后输出bundle.js 
        --|  app.vue
        --|  src  --|  a.vue
                  --|  b.vue

app.vue

因为vue直接在页面引了，这样一个是可以全局，一个是不用打包，个人有个人的看法，大家按照自己喜欢的方式来就好了。

entry.js

src/a.vue

src/b.vue