這里是針對于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>