这里是针对于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>