Vue學習筆記5-前端工程化
傳統開發模式的主要問題
- 命名衝突
- 檔案依賴
通過模組化解決上述問題
- 模組化就是把單獨的一個功能封裝到一個模組（檔案）中，模組之間相互隔離，但是可以通過特定的介面公開內部成 員，也可以依賴別的模組
- 模組化開發的好處：方便程式碼的重用，從而提升開發效率，並且方便後期的維護
ES6是瀏覽器端和伺服器端通用的模組化開發規範
ES6模組化規範中定義：
- 每個js檔案都是一個獨立的模組
- 匯入模組成員使用import關鍵字
- 暴露模組成員使用export關鍵字
1.模組化的分類
A.瀏覽器端的模組化
1).AMD(Asynchronous Module Definition,非同步模組定義)
代表產品為：Require.js
2).CMD(Common Module Definition,通用模組定義)
代表產品為：Sea.js
複製程式碼 B.伺服器端的模組化
伺服器端的模組化規範是使用CommonJS規範：
1).使用require引入其他模組或者包
2).使用exports或者module.exports匯出模組成員
3).一個檔案就是一個模組，都擁有獨立的作用域
複製程式碼C.ES6模組化
ES6模組化規範中定義：
1).每一個js檔案都是獨立的模組
2).匯入模組成員使用import關鍵字
3).暴露模組成員使用export關鍵字
複製程式碼小結：推薦使用ES6模組化，因為AMD，CMD侷限使用與瀏覽器端，而CommonJS在伺服器端使用。 ES6模組化是瀏覽器端和伺服器端通用的規範.
2.在NodeJS中安裝babel
A.安裝babel
開啟終端，輸入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安裝完畢之後，再次輸入命令安裝：npm install --save @babel/polyfill
複製程式碼B.建立babel.config.js
在專案目錄中建立babel.config.js檔案。
編輯js檔案中的程式碼如下：
const presets = [
["@babel/env",{
targets:{
edge:"17",firefox:"60",chrome:"67",safari:"11.1"
}
}]
]
//暴露
module.exports = { presets }
複製程式碼 C.建立index.js檔案
在專案目錄中建立index.js檔案作為入口檔案
在index.js中輸入需要執行的js程式碼，例如：
console.log("ok");
複製程式碼D.使用npx執行檔案
開啟終端，輸入命令：
複製程式碼3.設定預設匯入/匯出
A.預設匯出
export default {
成員A,成員B,.......
},如下：
let num = 100;
export default{
num
}
複製程式碼B.預設匯入
import 接收名稱 from "模組識別符號"，如下：
import test from "./test.js"
複製程式碼注意：在一個模組中，只允許使用export default向外預設暴露一次成員，千萬不要寫多個export default。 如果在一個模組中沒有向外暴露成員，其他模組引入該模組時將會得到一個空物件
4.設定按需匯入/匯出
A.按需匯出
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }
複製程式碼B.按需匯入
import { num,fn as printFn,myName } from "./test.js"
//同時匯入預設匯出的成員以及按需匯入的成員
import test,{ num,myName } from "./test.js"
複製程式碼注意：一個模組中既可以按需匯入也可以預設匯入，一個模組中既可以按需匯出也可以預設匯出
5.直接匯入並執行程式碼
import "./test2.js";
複製程式碼6.webpack的概念
webpack是一個流行的前端專案構建工具，可以解決目前web開發的困境。 webpack提供了模組化支援，程式碼壓縮混淆，解決js相容問題，效能優化等特性，提高了開發效率和專案的可維護性
7.webpack的基本使用
A.建立專案目錄並初始化
建立專案，並開啟專案所在目錄的終端，輸入命令：
npm init -y
複製程式碼B.建立首頁及js檔案
在專案目錄中建立index.html頁面，並初始化頁面結構：在頁面中擺放一個ul，ul裡面放置幾個li
在專案目錄中建立js資料夾，並在資料夾中建立index.js檔案
複製程式碼C.安裝jQuery
開啟專案目錄終端，輸入命令:
npm install jQuery -S
複製程式碼D.匯入jQuery
開啟index.js檔案，編寫程式碼匯入jQuery並實現功能：
import $ from "jquery";
$(function(){
$("li:odd").css("background","cyan");
$("li:odd").css("background","pink");
})
複製程式碼注意：此時專案執行會有錯誤，因為import $ from "jquery";這句程式碼屬於ES6的新語法程式碼，在瀏覽器中可能會存在相容性問題 所以我們需要webpack來幫助我們解決這個問題。
E.安裝webpack
1).開啟專案目錄終端，輸入命令:
npm install webpack webpack-cli -D
2).然後在專案根目錄中，建立一個 webpack.config.js 的配置檔案用來配置webpack
在 webpack.config.js 檔案中編寫程式碼進行webpack配置，如下：
module.exports = {
mode:"development"//可以設定為development(開發模式)，production(釋出模式)
}
補充：mode設定的是專案的編譯模式。
如果設定為development則表示專案處於開發階段，不會進行壓縮和混淆，打包速度會快一些
如果設定為production則表示專案處於上線釋出階段，會進行壓縮和混淆，打包速度會慢一些
3).修改專案中的package.json檔案新增執行指令碼dev，如下：
"scripts":{
"dev":"webpack"
}
注意：scripts節點下的指令碼，可以通過 npm run 執行，如：
執行終端命令：npm run dev
將會啟動webpack進行專案打包
4).執行dev命令進行專案打包，並在頁面中引入專案打包生成的js檔案
開啟專案目錄終端，輸入命令:
npm run dev
等待webpack打包完畢之後，找到預設的dist路徑中生成的main.js檔案，將其引入到html頁面中。
瀏覽頁面檢視效果。
複製程式碼8.設定webpack的打包入口/出口
在webpack 4.x中，預設會將src/index.js 作為預設的打包入口js檔案
預設會將dist/main.js 作為預設的打包輸出js檔案
如果不想使用預設的入口/出口js檔案，我們可以通過改變 webpack.config.js 來設定入口/出口的js檔案，如下：
const path = require("path");
module.exports = {
mode:"development",//設定入口檔案路徑
entry: path.join(__dirname,"./src/xx.js"),//設定出口檔案
output:{
//設定路徑
path:path.join(__dirname,"./dist"),//設定檔名
filename:"res.js"
}
}
複製程式碼9.設定webpack的自動打包
預設情況下，我們更改入口js檔案的程式碼，需要重新執行命令打包webpack，才能生成出口的js檔案
那麼每次都要重新執行命令打包，這是一個非常繁瑣的事情，那麼，自動打包可以解決這樣繁瑣的操作。
實現自動打包功能的步驟如下：
A.安裝自動打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
B.修改package.json中的dev指令如下：
"scripts":{
"dev":"webpack-dev-server"
}
C.將引入的js檔案路徑更改為：<script src="/bundle.js"></script>
D.執行npm run dev，進行打包
E.開啟網址檢視效果：http://localhost:8080
注意：webpack-dev-server自動打包的輸出檔案，預設放到了伺服器的根目錄中，是存在於記憶體當中的一個檔案，實際中在資料夾是看不到的，是虛擬的，看不見的.
複製程式碼補充： 在自動打包完畢之後，預設開啟伺服器網頁，實現方式就是開啟package.json檔案，修改dev命令： "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
10.配置html-webpack-plugin
使用html-webpack-plugin 可以生成一個預覽頁面。
因為當我們訪問預設的 http://localhost:8080/的時候，看到的是一些檔案和資料夾，想要檢視我們的頁面
還需要點選資料夾點選檔案才能檢視，那麼我們希望預設就能看到一個頁面，而不是看到資料夾或者目錄。
實現預設預覽頁面功能的步驟如下：
A.安裝預設預覽功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
B.修改webpack.config.js檔案，如下：
//匯入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//建立物件
const htmlPlugin = new HtmlWebpackPlugin({
//設定生成預覽頁面的模板檔案
template:"./src/index.html",//設定生成的預覽頁面名稱
filename:"index.html"
})
C.繼續修改webpack.config.js檔案，新增plugins資訊：
module.exports = {
......
plugins:[ htmlPlugin ]
}
複製程式碼11.webpack中的載入器
通過loader打包非js模組：預設情況下，webpack只能打包js檔案，如果想要打包非js檔案，需要呼叫loader載入器才能打包
loader載入器包含：
1).less-loader
2).sass-loader
3).url-loader:打包處理css中與url路徑有關的檔案
4).babel-loader:處理高階js語法的載入器
5).postcss-loader
6).css-loader,style-loader
注意：指定多個loader時的順序是固定的，而呼叫loader的順序是從後向前進行呼叫
A.安裝style-loader,css-loader來處理樣式檔案
1).安裝包
npm install style-loader css-loader -D
2).配置規則：更改webpack.config.js的module中的rules陣列
module.exports = {
......
plugins:[ htmlPlugin ],module : {
rules:[
{
//test設定需要匹配的檔案型別，支援正則
test:/\.css$/,//use表示該檔案型別需要呼叫的loader
use:['style-loader','css-loader']
}
]
}
}
B.安裝less,less-loader處理less檔案
1).安裝包
npm install less-loader less -D
2).配置規則：更改webpack.config.js的module中的rules陣列
module.exports = {
......
plugins:[ htmlPlugin ],'css-loader']
},{
test:/\.less$/,use:['style-loader','css-loader','less-loader']
}
]
}
}
C.安裝sass-loader,node-sass處理less檔案
1).安裝包
npm install sass-loader node-sass -D
2).配置規則：更改webpack.config.js的module中的rules陣列
module.exports = {
......
plugins:[ htmlPlugin ],'less-loader']
},{
test:/\.scss$/,'sass-loader']
}
]
}
}
補充：安裝sass-loader失敗時，大部分情況是因為網路原因，詳情參考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
D.安裝post-css自動新增css的相容性字首（-ie-,-webkit-）
1).安裝包
npm install postcss-loader autoprefixer -D
2).在專案根目錄建立並配置postcss.config.js檔案
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置規則：更改webpack.config.js的module中的rules陣列
module.exports = {
......
plugins:[ htmlPlugin ],module : {
rules:[
{
//test設定需要匹配的檔案型別，支援正則
test:/\.css$/,//use表示該檔案型別需要呼叫的loader
use:['style-loader','postcss-loader']
},{
test:/\.less$/,'less-loader']
},{
test:/\.scss$/,'sass-loader']
}
]
}
}
E.打包樣式表中的圖片以及字型檔案
在樣式表css中有時候會設定背景圖片和設定字型檔案，一樣需要loader進行處理
使用url-loader和file-loader來處理打包圖片檔案以及字型檔案
1).安裝包
npm install url-loader file-loader -D
2).配置規則：更改webpack.config.js的module中的rules陣列
module.exports = {
......
plugins:[ htmlPlugin ],'css-loader']
},'sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,//limit用來設定位元組數，只有小於limit值的圖片，才會轉換
//為base64圖片
use:"url-loader?limit=16940"
}
]
}
}
F.打包js檔案中的高階語法：在編寫js的時候，有時候我們會使用高版本的js語法
有可能這些高版本的語法不被相容，我們需要將之打包為相容性的js程式碼
我們需要安裝babel系列的包
A.安裝babel轉換器
npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法外掛包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在專案根目錄建立並配置babel.config.js檔案
module.exports = {
presets:["@babel/preset-env"],plugins:[ "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties" ]
}
D.配置規則：更改webpack.config.js的module中的rules陣列
module.exports = {
......
plugins:[ htmlPlugin ],//limit用來設定位元組數，只有小於limit值的圖片，才會轉換
//為base64圖片
use:"url-loader?limit=16940"
},{
test:/\.js$/,use:"babel-loader",//exclude為排除項，意思是不要處理node_modules中的js檔案
exclude:/node_modules/
}
]
}
}
複製程式碼12.Vue單檔案元件
傳統Vue元件的缺陷： 全域性定義的元件不能重名，字串模板缺乏語法高亮，不支援css(當html和js元件化時，css沒有參與其中) 沒有構建步驟限制，只能使用H5和ES5，不能使用前處理器（babel） 解決方案： 使用Vue單檔案元件，每個單檔案元件的字尾名都是.vue 每一個Vue單檔案元件都由三部分組成 1).template元件組成的模板區域 2).script組成的業務邏輯區域 3).style樣式區域
程式碼如下：
<template>
元件程式碼區域
</template>
<script>
js程式碼區域
</script>
<style scoped>
樣式程式碼區域
</style>
複製程式碼補充：安裝Vetur外掛可以使得.vue檔案中的程式碼高亮
配置.vue檔案的載入器 A.安裝vue元件的載入器 npm install vue-loader vue-template-compiler -D B.配置規則：更改webpack.config.js的module中的rules陣列 const VueLoaderPlugin = require("vue-loader/lib/plugin"); const vuePlugin = new VueLoaderPlugin(); module.exports = { ...... plugins:[ htmlPlugin,vuePlugin ],module : { rules:[ ...//其他規則 { test:/.vue$/,use:"vue-loader",
}
]
}
}
複製程式碼13.在webpack中使用vue
上一節我們安裝處理了vue單檔案元件的載入器，想要讓vue單檔案元件能夠使用，我們必須要安裝vue 並使用vue來引用vue單檔案元件。 A.安裝Vue npm install vue -S B.在index.js中引入vue：import Vue from "vue" C.建立Vue例項物件並指定el，最後使用render函式渲染單檔案元件 const vm = new Vue({ el:"#first",render:h=>h(app) })
14.使用webpack打包釋出專案
在專案上線之前，我們需要將整個專案打包併發布。 A.配置package.json "scripts":{ "dev":"webpack-dev-server","build":"webpack -p" } B.在專案打包之前，可以將dist目錄刪除，生成全新的dist目錄
15.Vue腳手架
Vue腳手架可以快速生成Vue專案基礎的架構。
-
A.安裝3.x版本的Vue腳手架： npm install -g @vue/cli
-
B.基於3.x版本的腳手架建立Vue專案： 1).使用命令建立Vue專案 命令：vue create my-project 選擇Manually select features(選擇特性以建立專案) 勾選特性可以用空格進行勾選。 是否選用歷史模式的路由：n ESLint選擇：ESLint + Standard config 何時進行ESLint語法校驗：Lint on save babel，postcss等配置檔案如何放置：In dedicated config files(單獨使用檔案進行配置) 是否儲存為模板：n 使用哪個工具安裝包：npm 2).基於ui介面建立Vue專案 命令：vue ui 在自動開啟的建立專案網頁中配置專案資訊。 3).基於2.x的舊模板，建立Vue專案 npm install -g @vue/cli-init vue init webpack my-project
-
C.分析Vue腳手架生成的專案結構 node_modules:依賴包目錄 public：靜態資源目錄 src：原始碼目錄 src/assets:資源目錄 src/components：元件目錄 src/views:檢視元件目錄 src/App.vue:根元件 src/main.js:入口js src/router.js:路由js babel.config.js:babel配置檔案 .eslintrc.js:
16.Vue腳手架的自定義配置
A.通過 package.json 進行配置 [不推薦使用]
"vue":{
"devServer":{
"port":"9990","open":true
}
}
B.通過單獨的配置檔案進行配置，建立vue.config.js
module.exports = {
devServer:{
port:8888,open:true
}
}
複製程式碼17.Element-UI的基本使用
Element-UI:一套基於2.0的桌面端元件庫 官網地址：element-cn.eleme.io/#/zh-CN A.安裝： npm install element-ui -S B.匯入使用： import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)
複製程式碼