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会自动调用这个文件。
我的配置也很简单。

<script> 
   var Webpack = require("webpack"); 
   module.exports = {
    entry: ["./entry.js"],
    output: {
        filename: "bundle.js"
    }, 
   module: { 
       loaders: [
            //解析VUE文件，vue最主要的就是用到了这个vue-loader，这才是解析vue文件的关键 
           //但是因为vue文件里面又包含有css和js，所以才用到了后面的几个loader 
           {test: /\.vue$/,loader: "vue"}, 
           //解析JS文件 
           {test: /\.js$/,loader: 'babel'},
            //解析css
            {test: /\.css$/,loader: "style!css"},
            //解析html
            { test: /\.(html|tpl)$/, loader: 'html-loader' }
        ] 
   }, 
   //使用es5语法
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime'] //这个必须install babel-plugin-transform-runtime
    },
    resolve: {
        // require时省略的扩展名，如：require('module') 不需要module.js 
       extensions: ['', '.js','.css', '.vue']
    }
};
</script>

感觉配置越多，程序若是报错，就越是无法下手，所以我才从最简单的开始，没有用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

<body>
    <div id="app">
    <child-a></child-a>
    <my-component></my-component>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="bundle.js"></script>
</body>

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

entry.js

<script>
    //简单的调用组件 
   Vue.component('child-a', require("./src/a.vue")); 
   //在父组件中嵌套组件
    var Parent = Vue.extend({
        template: '<div style="border: 1px solid #ccc;width:200px; background:#fff">Parent<child-b></child-b>父模版内部</div>',
        components: {
        // 调用子组件
        'child-b': require("./src/b.vue") 
   }
});
// 注册父组件
Vue.component('my-component', Parent);
new Vue({
    el: '#app'
});
</script>

src/a.vue

<template>
<div>
    <h1>姓名：{{name}}</h1>
    <h2>{{age}}</h2>
    <hr /> 
   </div></template><style>
h1{
    background-color: #eee;
    color: black;
    transform: translate(10%, 10%);
}</style>
<script type="text/javascript">
module.exports = {
    data:  function() {
        return { name:'雨歇微凉',age:2000};
    }
};
</script>

src/b.vue

<template>
<div>
    {{text}}
</div>
</template>
<style>
div{
    color: #999;
}
</style>
<script type="text/javascript">
module.exports = {
    data:  function() {
        return { text:'这是一个子组件'};
    }
};
</script>