Vue的前端工程化
一 模塊化規(guī)范
1.1模塊化規(guī)范舉例
- 瀏覽器端JS模塊化規(guī)范：AMD宰僧，CMD
- 服務器端JS模塊化規(guī)范：CommonJS
- 大一統的模塊化規(guī)范：ES6
- 每個js文件都是獨立的模塊
- 導入模塊成員使用import關鍵字
- 暴露模塊成員使用export關鍵字
1.2 babel
- 加載babel的模塊
npm install --save-dev @babel/core @babel/cli @babel/preset-env
@babel/node
npm install --save @babel/polyfill
- 創(chuàng)建 babel.config.js 文件
const presets = [
["@babel/env",{
targets:{
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}]
]
module.exports = {presets};
- 通過 npx babel-node index.js 執(zhí)行代碼
npx babel-node .\index.js
1.3 默認導出和默認導入
- 默認導出語法 export default 只允許使用一次
- 若沒有 export default 則默認導入一個空對象
實例：
- 導出模塊 m1.js
let a = 10
let b = 20
let c = 30
function show(){
console.log("Hello World")
}
export default {
a,
b,
show
}
- 導入模塊 index.js
import m1 from "./m1.js"
console.log(m1)
- 運行
npx babel-node index.js
1.4 按需導出與按需導入
- 每個模塊可以使用多次按需導出
- 按需導出和導入可以與默認導出和導入共同使用，互不影響
實例：
- 導出模塊 m1.js
let a = 10
let b = 20
let c = 30
function show(){
console.log("Hello World")
}
//默認導出
export default {
a,
b,
show
}
//按需導出
export let s1 = "yorick"
export let s2 = "tom"
export function sayHello(){
console.log("Hello")
}
- 導入模塊 index.js
//m1為默認導入观挎，{}內的為按需導入
import m1,{s1,s2 as ss2,sayHello} from "./m1.js"
console.log(m1)
console.log(s1)
console.log(ss2)
console.log(sayHello)
- 運行
PS D:\study\code\test\vue> npx babel-node .\index.js
{ a: 10, b: 20, show: [Function: show] }
yorick
tom
[Function: sayHello]
1.5 直接導入并執(zhí)行代碼
實例：
- 需要直接導入的模塊 m2.js
for(let i=0 ; i<3 ; i++){
console.log(i)
}
- 導入模塊 index.js
import "./m2.js"
- 執(zhí)行
PS D:\study\code\test\vue> npx babel-node .\index.js
0
1
2
二 Webpack打包工具
2.1 webpack概述
image-20210128101239202.png
2.2 webpack基本使用
- 創(chuàng)建列表隔行變色項目
- 新建空目錄琴儿，運行 npm init -y 初始化包管理配置
- 新建 src 源代碼目錄
- 在 src 目錄下 創(chuàng)建 index.html 首頁
- 初始化首頁的結構
- 運行 npm install jquery 安裝 jquery
- 通過模塊化的形式實現列表隔行變色的效果（需要使用webpack解決es6兼容性問題）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./index.js"></script>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
</ul>
</body>
</html>
index.js
import $ from "jquery"
$(function(){
$("li:odd").css("backgroundColor","pink")
$("li:even").css("backgroundColor","lightblue")
})
- 在項目中安裝和配置webpack
- 運行 npm install webpack webpack-cli -D 命令，安裝webpack
- 在項目根目錄下嘁捷，創(chuàng)建名為 webpack.config.js 的配置文件造成，在文件中初始化構建模式
module.exports = {
mode: "development" // development 為開發(fā)模式 production 為上線模式（壓縮混淆）
}
- 在 package.json 中的 scripts 節(jié)點下，新增 dev 腳本
"scripts":{
"dev": "webpack" //在script節(jié)點下的腳本普气，可通過 npm run 執(zhí)行
}
- 將 index.html 中的src引入替換為webpack生成的文件
<script src="../dist/main.js"></script>
- 在終端運行 npm run dev 命令谜疤，啟動 webpack 進行項目打包
PS D:\study\code\test\vue\webpack-project> npm run dev
> webpack-project@1.0.0 dev D:\study\code\test\vue\webpack-project
> webpack
asset main.js 322 KiB [emitted] (name: main)
runtime modules 931 bytes 4 modules
cacheable modules 281 KiB
./src/index.js 143 bytes [built] [code generated]
./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
webpack 5.18.0 compiled successfully in 296 ms
- 配置打包的入口和出口
默認約定：
- 打包的入口文件：src -> index.js
- 打包的出口文件：dist -> main.js
修改打包的入口和出口配置，在 webpack.config.js 中添加如下配置
const path = require("path")
module.exports = {
mode: "development", // development 為開發(fā)模式 production 為上線模式（壓縮混淆）
entry: path.join(__dirname,"./src/index.js"),
output: {
path: path.join(__dirname,"./dist"),
filename: "bundle.js"
}
}
- 配置webpack自動打包功能
- 運行 npm install webpack-dev-server -D 命令现诀，安裝自動打包的工具
- 修改 package.json -> scripts 中的 dev 命令
"scripts":{
"dev": "webpack-dev-server"
}
- 將 src -> index.html 中的 script 引用路徑改為 "/bundle.js"
- 運行 npm run dev 重新打包
- 在瀏覽器 http://localhost:8080 查看自動打包效果
注意：版本的兼容問題夷磕，下方版本可以正常使用
"devDependencies": {
"webpack": "^5.18.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
- 配置 html-webpack-plugin 生成預覽頁面
- 運行 npm install html-webpack-plugin -D 命令，安裝生成預覽頁面的插件
- 修改 webpack.config.js 文件頭部區(qū)域仔沿，添加配置信息：
const HtmlWebpackPlugin = require("html-webpack-plugin")
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html", //指定需要預覽的模板文件
filename: "index.html" //指定生成文件的名稱
})
- 修改 webpack.config.js 文件中向外暴露的配置對象坐桩，增加新的配置節(jié)點
module.exports = {
plugins: [htmlPlugin] //plugins數值是webpack打包期間會用到的插件列表
}
- 配置自動打包的相關參數
// --open 打包完成后自動打開瀏覽器頁面
// --host IP地址
// --port 端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8848"
}
2.3 webpack的加載器
- loader的調用流程
image-20210129125229232.png
- 打包處理css文件
- 運行 npm install style-loader css-loader -D 命令，安裝處理css文件的loader
- 在webpack.config.js 的 module -> rules 數組中添加loader
// test 表示匹配的文件類型封锉，use表示調用的loader
// user數組中指定的loader加載順序是固定的绵跷，多個loader的調用順序是從后往前調用
module: {
rules: [
{test:/\.css$/,use:["style-loader","css-loader"]}
]
}
- 打包處理less文件
- 運行 npm install less-loader less -D 命令
- 在 webpack.config.js 的 module -> rules 數組中添加規(guī)則
module: {
rules: [
{test:/\.less$/,use:["style-loader","css-loader","less-loader"]}
]
}
- 打包處理scss文件
- 運行 npm install sass-loader node-sass -D 命令
- 在 webpack.config.js 的 module -> rules 數組中添加規(guī)則
module: {
rules: [
{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}
]
}
- 配置postCSS 自動添加css的兼容性前綴
- 運行 npm install postcss-loader autoprefixer -D 命令
- 在根目錄下創(chuàng)建 postcss 的配置文件 postcss.config.js ，初始化配置
const autoprefixer = require("autoprefixer")
module.exports = {
plugins: [autoprefixer] //掛載插件
}
- 在 webpack.config.js 的 module -> rules 數組中成福，修改 css的loader規(guī)則
module: {
rules: [
{test:/\.css$/,use:["style-loader","css-loader","postcss-loader"]}
]
}
- 打包樣式表中的圖片和字體文件
- 運行 npm install url-loader file-loader -D 命令
- 在 webpack.config.js 的 module -> rules 數組中加入規(guī)則
// loader的?之后用來指定圖片的大小碾局，單位字節(jié)，小于limit大小的圖片會被轉為 base64 圖片
module: {
rules: [
{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:["url-loader?limit=100000"]}
]
}
- 打包處理js文件的高級語法部分
- 安裝 babel 轉換器相關包 npm install babel-loader @babel/core @babel/runtime -D
- 安裝 babel 語法插件包 npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
- 在根目錄下創(chuàng)建 babel 的配置文件 babel.config.js奴艾，初始化配置
module.exports = {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}
- 在 webpack.config.js 的 module -> rules 數組中添加loader規(guī)則
module: {
rules: [
{test:/\.js$/,use:["babel-loader"],exclude: /node_modules/}
]
}
三 Vue單文件組件
3.1 Vue單文件組件的基本用法
<template>
<div>
<h1>App 根組件</h1>
</div>
</template>
<script>
export default {
data:function(){
return {}
},
methods: {}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
3.2 webpack中配置 vue 組件的加載器
- 運行 npm install vue-loader vue-template-compiler -D 命令
- 在 webpack.config.js 配置文件中净当，添加 vue-loader 的配置項
const VueLoaderPlugin = require("vue-loader/lib/plugin")
module.exports = {
module: {
rules: [
{test:/\.vue$/,use:["vue-loader"]}
]
},
plugins: [
new VueLoaderPlugin()
]
}
3.3 在webpack中使用vue
- 運行 npm install vue -S 安裝 vue
- 在 src -> index.js 入口文件中，通過 import Vue from "vue" 導入vue的構造函數
- 創(chuàng)建vue的實例對象蕴潦，并指定控制的el區(qū)域
- 通過 render 函數渲染 App 根組件
import Vue from "vue"
import App from "../components/App.vue"
const vm = new Vue({
el: "#app",
// 通過 render 函數像啼，把指定的組件渲染到 el 區(qū)域
render: h => h(App)
})
3.4 webpack的打包發(fā)布
在 package.json 文件配置打包命令
"scripts":{
"build": "webpack -p"
}
四 Vue 腳手架
4.1 Vue腳手架的基本用法
- 安裝Vue腳手架
# 卸載之前版本
npm uninstall -g vue-cli
npm install -g @vue/cli
# 查看版本
vue -V
- 基于命令行構建vue項目
vue create my-project
- 基于ui構建vue項目
vue ui
