vue-loader
1.)首先創建項目目錄
--vue-loader文件夾
|-index.html 入口文件
|-main.js 入口文件
|-App.vue Vue文件
|-package.json 工程文件
|-webpack.config.js webpack 配置文件
2.)基於webpack模塊化開發ES6
關於項目前准備工作
①、建一個文件夾，文件夾就是你的項目名稱，然后把必須的問價加在其中
|-index.html
|-main.js
|-App.vue
|-package.json(生成方法，在問價夾中打開命令行工具，輸入命令：npm init --yes)
|-webpack.config.js
②、在index.html中，在body中添加一個標簽(組件)，例如：<App></App>(官方建議大寫開頭)。
③、配置webpack,
module.exports={
entry:'./main.js', //規定入口(官方推薦名字：main.js)
output：{
path:__dirname, //得到當前的目錄，是把當前路徑變為絕對路徑
filename:'bundle.js' //出口文件(官方推薦名字：bundle.js)
}
}
·在index.html中引入bundle.js
·webpack需要下載的模塊 webpack 、webpack-dev-server
·修改package.json的scripts的參數為
"script":{
"dev":"webpack-dev-server --inline --hot" //這個就是我們保存完修改的代碼后，瀏覽器自動刷新熱加載，如果端口被占用，可以在后面加 --port 8801(端口號自己定義)
}
④、.vue文件由三部分組成
<template></tenplate> //放html代碼
<script></scritp> //放js代碼
<style></style> //放css代碼
想要把這些代碼轉譯成正常的html、css、js代碼，需要配置下載一系列模塊(--save-dev可以默認配置你的配置文件)
配置這些文件需要在webpack.config.js中添加一個
module：{
loaders：{
{test:/|.vue$/,loader:'vue'} //以.vue結尾的文件用vue-loader來轉譯
}
}
vue-loader 、vue-style-loader 、vue-html-loader 、vue-hot-reload-api 、css-loader(這些是用來編譯css，html，js代碼的)
babel-core 、babel-loader 、babel-plugin-transform-runtime 、babel-preset-es2015 、babel-runtime (這些是必備的配置)
⑤、編輯入口文件main.js文件，import App from './App.vue'，默認進去打開App.vue
一、項目結構圖
二、具體代碼
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <app></app> <!-- 組件名稱 --> 9 <script src="build.js"></script> 10 </body> 11 </html>
main.js
1 import Vue from 'vue' 2 import App from './App.vue' 3 4 new Vue({ 5 el:'body', 6 components:{ 7 app:App 8 } 9 });
package.json
1 { 2 "name": "vue-loader-demo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "main.js", 6 "scripts": { 7 "dev": "webpack-dev-server --inline --hot --port 8082" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "babel-core": "^6.17.0", 14 "babel-loader": "^6.2.5", 15 "babel-plugin-transform-runtime": "^6.15.0", 16 "babel-preset-es2015": "^6.16.0", 17 "babel-runtime": "^6.11.6", 18 "css-loader": "^0.25.0", 19 "vue-hot-reload-api": "^1.3.2", 20 "vue-html-loader": "^1.2.3", 21 "vue-loader": "^8.5.4", 22 "vue-style-loader": "^1.0.0", 23 "webpack":"^1.13.3", 24 "webpack-dev-server":"^1.16.2" 25 }, 26 "dependencies": { 27 "vue": "^1.0.28" 28 } 29 }
App.vue
<template> <h1>welcome Vue</h1> <h2 @click="change">{{msg}}</h2> <my-menu></my-menu> </template> <script> import News from './components/News.vue' //新組建的鏈接位置 export default{ data(){ return { msg:'welcome to sunsanfeng home' } }, methods:{ change(){ this.msg='是你改變了我' } }, components:{ 'my-menu':News //又定義了一個新的 組件 } } </script> <style> body{ background: #ccc } </style>
webpack-config.js
1 module.exports={ 2 entry:'./main.js', 3 4 output:{ 5 path:__dirname, 6 filename:'build.js' 7 }, 8 9 module:{ 10 loaders:[ 11 {test:/\.vue$/, loader:'vue'}, //規定以.vue結尾的文件，用vue-loader來解析 12 {test:/\.js$/, loader:'babel', exclude:/node_modules/} //以.js結尾的文件用vue-hot-reload-api解析，除了node_nodules文件夾里的文件 13 ] 14 }, 15 babel:{ 16 presets:['es2015'], 17 plugins:['transform-runtime'] 18 } 19 };
以上代碼中的注釋在項目中會報錯，粘走時不要刪掉注釋，對於node_nodules里面的配置，我們直接npm install一下就可以了
demo下載地址： http://pan.baidu.com/s/1qYfm0VE