vue-loader: 其他loader -> css-loader、url-loader、html-loader..... 后台: nodeJs（模块化） -> require exports broserify 最早提出，模块加载，只能加载js webpack 模块加载器， 一切东西都是模块, 最后打包到一块了 require('style.css'); -> css-loader、style-loader vue-loader基于webpack .css、.js、.html、.php、..... a.vue需要webpack编译成浏览器可以看懂的。 .vue文件: 放置的是vue组件模块代码 <template> html </template> <style> css </style> <script> js （平时代码、ES6浏览器兼容性不好） babel-loader编译成es5代码 </script> ------------------------------------- 简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件，官方推荐命名法第一个字母大写 |-package.json 工程文件(项目依赖、名称、配置) npm init --yes 生成 |-webpack.config.js webpack配置文件 ES6: 模块化开发 导出模块： export default {} 引入模块: import 模块名 from 地址 -------------------------------------------- webpak准备工作: cnpm install webpack --save-dev //不带服务器版本 cnpm install webpack-dev-server --save-dev //带服务器版本 App.vue -> 变成正常代码 vue-loader@8.5.4 cnpm install vue-loader@8.5.4 --save-dev cnpm install vue-html-loader --save-dev vue-html-loader、css-loader、vue-style-loader、 vue-hot-reload-api@1.3.2（加载js的） babel相关插件： babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime 最最核心： 下载 "vue": "^1.0.28"
webpack.config.js
module.exports={ entry:'./main.js', //入口文件 output:{ //出口 path:__dirname, filename:'build.js'//官方名称 }, module:{ loaders:[ {test:/.vue$/, loader:'vue-loader'},// .是转义，vue$以vue结尾的文件，用vue-loader编译， {test:/.js$/, loader:'babel', exclude:/node_modules/}//编译js结尾的文件，使用abel-loader来编译， ] }, babel:{ presets:['es2015'], plugins:['transform-runtime'] } };
package.json
{ "name": "vue-loader-demo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "dev": "webpack-dev-server --inline --hot --port 8082" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.16.0", "babel-runtime": "^6.11.6", "css-loader": "^0.25.0", "vue-hot-reload-api": "^1.3.2", "vue-html-loader": "^1.2.3", "vue-loader": "^8.5.4", "vue-style-loader": "^1.0.0" }, "dependencies": { "vue": "^1.0.28" } }
main.js
import Vue from 'vue' //下载的 "vue": "^1.0.28" import App from './App.vue' new Vue({ el:'body', components:{ app:App } });
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <app></app> <!--组件--> <script src="build.js"></script> <!--出口js文件--> </body> </html>
App.vue
<template> <h1>welcome Vue</h1> <h2 @click="change">{{msg}}</h2> <my-menu></my-menu> </template> <script> import Menu from './components/Menu.vue' export default{ data(){ return { msg:'welcome Vue ^_^' } }, methods:{ change(){ this.msg='wahaha' } }, components:{ 'my-menu':Menu } } </script> <style> body{ background: #ccc } </style>
Menu.vue
<template> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> </template> <script> </script>