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  2  3  4     
      5      6  7  8     
         
      9     10 11 

　　main.js

1 import Vue from 'vue'2 import App from './App.vue'3 4 new Vue({5     el:'body',6     components:{7         app:App8     }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

　　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