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