前言
webpack4.x
vue2.96
vue-loader15.x
安裝vue-loader成功感覺需要運氣盟庞，我也不知道怎么成功的盒卸。有時間總結一下。
結構目錄:
圖片.png
安裝vue cnom i vue -S
安裝loader cnpm install vue-loader vue-template-compiler -D
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
package.json
{
"name": "webpack4_vue_study5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.6.2",
"vue-template-compiler": "^2.6.6",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"vue": "^2.6.6"
}
}
main.js
//import $ from 'jquery'
//import './css/index.css'
import Vue from "../node_modules/vue/dist/vue.js"
import login from "./login.vue"
/* let login = {
template:"<h1>這是login組件，是使用網頁中的形式創(chuàng)建出來的</h1>"
} */
let vm = new Vue({
el:'#app',
data:{
msg:'獸人永不為奴!'
},
/* components:{
login
} */
render:c => c(login),
})
webpack.config.js
// webpack配置文件
// 這個配置文件推掸，其實就是一個 JS 文件，通過Node中的模塊操作缝驳，向外暴露了一個配置對象
let path = require('path')
let webpack = require('webpack') //啟用熱更新第二步
let htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry:'./src/main.js',//入口
output:{
filename:'bundle.js',
path:path.resolve('./dist')
},//出口
devServer:{
open:true,
port:3000,
contentBase:'./src',
hot: true, //啟用熱更新第一步
},//開發(fā)服務器
module:{
rules:[
/* {test:/\.css$/,use:['style-loader','css-loader']},//用來處理css的第三代模塊,處理順序慈俯，從后向前
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//用來處理less文件的第三方模塊
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
{test:/\.(jpg|jpeg|png|gif|bmp)$/,use:'url-loader?limit=30000&name=[hash:8]-[name].[ext]'},//處理圖片路徑的loader
// limit 給定的值，是圖片的大小滑蚯，單位是byte浪蹂，如果我們引用的圖片大于這個大小抵栈，則不會轉為base64編碼，如果小于這個大小坤次，則會轉為base64編碼
// name=[name].[ext]表示名字后綴不變,name=[hash:8]-[name].[ext]前面有8為哈希值
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//處理字體文件loader
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置babel來轉化高級的ES語法 */
{test:/\.vue$/,use:'vue-loader'},//處理vue的loader
],//所有的匹配規(guī)則
},//模塊配置（用于配置所有的第三方模塊加載器）
plugins:[
new webpack.HotModuleReplacementPlugin(),//啟用熱更新第三步
new htmlWebpackPlugin({ // 創(chuàng)建一個在內存匯總生成html頁面的插件
template:path.resolve('./src/index.html'),//指定模板頁面,
filename:'index.html',//指定生成頁面的名稱
}),
new VueLoaderPlugin(),
],//插件
mode:'development',//開發(fā)者模式
resolve:{
},//配置解析
}
login.vue
<template>
<div>
<p>hey jude</p>
<p>hey jude</p>
<p>hey jude</p>
</div>
</template>
<script>
/* export default {
data(){
return {
msg:"123"
}
},
methods:{
show(){
console.log("調用了login.vue的show方法")
}
}
}
// 在ES6中古劲，規(guī)定了如何 導入 和 導出 ，模塊
// ES6中導入模塊缰猴，使用 import 模塊名稱 from "模塊標識符"
// 在ES5中产艾，使用 export default 和 export 向外暴露成員 */
</script>
<style>
</style>
圖片.png
步驟:
1安裝vue ,vue-loader,
2定義.vue結尾的組件。 由三部分組成 template script style
3使用import導入這個組件
4創(chuàng)建 vm的實例
let vm = new Vue({
el:'#app',
data:{
msg:'在webpack嘗試使用Vue'
},
components:{
login
}
在webpack中滑绒，如果想要通過vue把一個組件放到頁面中去闷堡，需要使用render函數
render:function(createElements){
return createElements(login)
},
render:c => c(login),
})
es6中導入模塊 使用 import 模塊名稱 from '模塊標識符',
在es6中，使用export default 和export向外暴露成員
在node中使用var 名稱=require('模塊標識符')
export default向外暴露的成員可以使用任意的變量接受疑故，可以自定義接受規(guī)則杠览。
在一個模塊中export default只允許向外暴露一次
test.js
var info = {
name:"tony",
age:18
}
export default info
export default {
address:'BeiJing'
}
main.js
import login from "./login.vue"
import info from "./test.js"
console.log(info)
使用export
只能使用花括號接收
test.js
export var title='人民教育出版社'
export var name='翟天臨'
export var age=17
main.js
import m1,{title as title2,name,age as ageage}from "./test.js"
console.log(m1)
console.log(title2)
console.log(name)
console.log(ageage)
圖片.png
1export可以暴露多個成員 ，
2不一定需要導出幾個接受幾個纵势。
3導出的成員必須嚴格按照導出時候的名稱使用花括號接收,也可以用as 起別名來接收
二
安裝路由
cnpm i vue router -S
.vue里面的lang 屬性 scoped屬性
抽離路由模塊
