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 -> 变成正常代码 [email protected]
cnpm install [email protected] --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、
[email protected]（加载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>
时间： 2024-11-05 14:44:31