Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第7、8章 Vue開發(fā)環(huán)境與SFC新特性；路由Vue Router

第7章Vue開發(fā)環(huán)境與SFC新特性(6學(xué)時(shí))教學(xué)目標(biāo)熟悉VueCLI腳手架的安裝與使用方法。掌握常用NPM包管理器命令。學(xué)會(huì)webpack安裝和配置。學(xué)會(huì)VueCLI創(chuàng)建項(xiàng)目。掌握單文件組件的結(jié)構(gòu)與新特性。掌握組合式API-依賴注入的使用方法。了解組合式API模板引用的方法。學(xué)會(huì)通過(guò)ref引用元素和組件。1

7.1.1Node.js簡(jiǎn)介

簡(jiǎn)單地說(shuō)Node.js就是運(yùn)行在服務(wù)端的JavaScript。

Node.js是一個(gè)基于ChromeV8引擎的JavaScript運(yùn)行環(huán)境，用于快捷地構(gòu)建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。它摒棄了傳統(tǒng)平臺(tái)依靠多線程來(lái)實(shí)現(xiàn)高并發(fā)的設(shè)計(jì)思路，采用了單線程、非阻塞IO、事件驅(qū)動(dòng)式的程序設(shè)計(jì)模式。ChromeV8引擎執(zhí)行JavaScript的速度非?？?，性能非常好。非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。Node.js內(nèi)建了HTTP服務(wù)器，可以向用戶提供服務(wù)。與PHP、Python、RubyonRails相比，它跳過(guò)了Apache、Nginx等HTTP服務(wù)器，直接面向前端開發(fā)。Node.js的許多設(shè)計(jì)理念與經(jīng)典架構(gòu)（如LAMP）有著很大的不同，可提供強(qiáng)大的伸縮能力。7.1部署Node.js7.1.2Node.js部署

可以從/zh-cn/網(wǎng)站上下載符合操作系統(tǒng)類型安裝包。推薦多數(shù)用戶使用長(zhǎng)期支持版（LTS），本書選擇64位的Windows安裝包node-v16.14.2-x64.msi，完成安裝。

在命令行狀態(tài)下輸入node–v和npm–v查看安裝的軟件版本信息，如有版本信息提示，說(shuō)明Node.js環(huán)境安裝就緒。7.2Node包管理器npmnpm(nodepackagemanager)是Node官方提供的包管理工具，是Node包的標(biāo)準(zhǔn)發(fā)布平臺(tái)，專門用于Node包的發(fā)布、傳播、依賴控制。npm提供了命令行工具，可以方便地下載、安裝、升級(jí)、刪除包，也可以作為開發(fā)者發(fā)布與維護(hù)包。npm是隨同Node一起安裝的包管理工具，解決了Node代碼部署上的很多問(wèn)題。經(jīng)常使用在以下三種場(chǎng)景：（1）允許用戶從npm服務(wù)器下載別人編寫的第三方包到本地使用。（2）允許用戶從npm服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。（3）允許用戶將自己編寫的包或命令行程序上傳到npm服務(wù)器供別人使用。npm由三個(gè)獨(dú)立的部分組成：npm官方網(wǎng)站（倉(cāng)庫(kù)源）、注冊(cè)表（registry）、命令行工具（CLI）。網(wǎng)站是開發(fā)者查找包（package）、設(shè)置參數(shù)以及管理NPM使用體驗(yàn)的主要途徑；注冊(cè)表是一個(gè)巨大的數(shù)據(jù)庫(kù)，保存了每個(gè)包（package）的信息。CLI通過(guò)命令行或終端運(yùn)行。開發(fā)者通過(guò)CLI與npm打交道。7.2.1npm簡(jiǎn)介7.2.2npm常用命令1.查看幫助命令npmhelp或npmh2.查看模塊信息命令（1）查看全局或項(xiàng)目下已安裝的各模塊之間的依賴關(guān)系圖。npmlist/ls/la/ll[-g]list表示列出所有模塊的依賴關(guān)系。ls、la、ll：是list的別名，功能類似。（2）查看模塊安裝路徑npmroot[-g]（3）查看模塊信息（名稱、版本號(hào)、依賴關(guān)系、Repo等）命令npmview<name>[package.json屬性名稱]npmviewwebpackauthor(示例查看webpack的作者信息)name表示所需查找的模塊名稱。package.json屬性名稱：可以指定特定的屬性，模塊和屬性之間至少空一個(gè)空格。不指定屬性參數(shù)默認(rèn)查看所有信息。3.安裝模塊命令npminstall[<name>@<version>][-g][--save][-dev]npminstallvue-cli@2.9.7–g--save–dev(示例)<name>@<version>:表示安裝指定的版本。通用格式為“模塊@版本”。例如“vue-cli@2.9.7”為安裝v2.9.7版本的vue-cli。如果不指定版本默認(rèn)安裝最新版本，實(shí)際使用時(shí)模塊名稱和版本號(hào)不需要加“<>”。-g或--global:表示全局安裝。--save或-S：表示將安裝包信息記錄在package.json文件中的dependencies（生產(chǎn)階段的依賴）屬性中。-dev:表示將安裝包信息記錄在package.json文件中的devDependencies（開發(fā)階段的依賴）屬性中，所以開發(fā)階段一般都使用這個(gè)參數(shù)。--save-dev或-D：表示將安裝包信息記錄在package.json文件中的devDependencies屬性中。4.卸載模塊命令npmuninstall[<name>@<version>][-g][--save][-dev]7.2.2npm常用命令-27.2.2npm常用命令-35.更新模塊命令npmupdate[<name>@<version>][-g][--save][-dev]6.搜索模塊命令npmsearch[<name>@<version>][-g][--save][-dev]7.創(chuàng)建一個(gè)package.json文件命令npm

init[--force|-f|--yes|-y|--scope]npm

init

<@scope>npm

init[<@scope>/]<name>

--yes或-y、--force或-f：表示無(wú)須回答任何問(wèn)題，全部使用默認(rèn)值。創(chuàng)建的文件內(nèi)容如圖7-12所示。package.json是CommonJS規(guī)定的用來(lái)描述包的文件。完全符合規(guī)范的package.json文件應(yīng)該含有以下屬性：name:包的名字，必須是唯一的，由小寫英文字母、數(shù)字和下劃線組成，不能包含空格。description:包的簡(jiǎn)要說(shuō)明。version:符合語(yǔ)義化版本識(shí)別規(guī)范的版本字符串。keywords:關(guān)鍵字?jǐn)?shù)組，通常用于搜索。maintainers:維護(hù)者數(shù)組，每個(gè)元素要包含name、email(可選)、web(可選)字段。contributors:貢獻(xiàn)者數(shù)組，格式與maintainers相同。包的作者應(yīng)該是貢獻(xiàn)者數(shù)組的第一個(gè)元素。bugs:提交bug的地址，可以是網(wǎng)址或者電子郵件地址。licenses:許可證數(shù)組，每個(gè)元素要包含type（許可證的名稱）和url（鏈接到許可證文本的地址）字段。repositories:倉(cāng)庫(kù)托管地址數(shù)組，每個(gè)元素要包含type（倉(cāng)庫(kù)的類型，如git）、URL（倉(cāng)庫(kù)的地址）和path（相對(duì)于倉(cāng)庫(kù)的路徑，可選）字段。dependencies:包的依賴，一個(gè)關(guān)聯(lián)數(shù)組，由包名稱和版本號(hào)組成。devDependencies：package的開發(fā)依賴模塊，即別人要在這個(gè)package上進(jìn)行開發(fā)。7.2.2npm常用命令-47.2.2npm常用命令-58.查找過(guò)時(shí)的模塊命令npmoutdated[-g]

通過(guò)此命令可以列出系統(tǒng)中所有過(guò)時(shí)的模塊，然后根據(jù)需要進(jìn)行適當(dāng)?shù)母隆?．安裝淘寶鏡像npminstallcnpm--registry=-g--registry：表示注冊(cè)處URL。安裝同樣的模塊速度會(huì)快些。其余npm命令的使用方法用戶可以通過(guò)npm官方網(wǎng)站（/）和官方文檔網(wǎng)站()自行查閱。7.3webpack打包工具7.3.1webpack簡(jiǎn)介1.webpack是什么webpack是一個(gè)模塊打包器(modulebundler)工具。2.webpack工作原理

分析項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其他瀏覽器不能直接運(yùn)行的模塊（如Scss、TypeScript等），轉(zhuǎn)換并打包為瀏覽器可以識(shí)別并運(yùn)行的格式，讓瀏覽器能夠使用。它能夠勝任轉(zhuǎn)換(transform)、打包(bundle)或包裹(package)任何資源(resourceorasset)，如圖7-20所示。通俗地說(shuō)，webpack將用戶的項(xiàng)目當(dāng)作一個(gè)整體，通過(guò)一個(gè)給定的主文件（如index.js）開始查找到用戶項(xiàng)目的所有依賴文件，然后使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。7.3.1webpack簡(jiǎn)介3.打包原理把項(xiàng)目的靜態(tài)資源文件當(dāng)為模塊：js、html、css都是互相依賴相互引用的，通過(guò)定義entry入口，對(duì)所有依賴的文件進(jìn)行跟蹤，通過(guò)loader和plugins處理對(duì)這些進(jìn)行轉(zhuǎn)換打包。在Vue中，按需加載又稱延遲加載或者懶加載，就是根據(jù)需要去加載資源；Vue項(xiàng)目實(shí)現(xiàn)按需加載有3種方式：Vue異步組件技術(shù)、ES提案的import()(推薦)、webpack提供的require.ensure()。但webpack官方文檔中使用import(),Vue官方文檔中，路由懶加載使用import()。所謂“按需加載”就是把打包后的bundle資源模塊通過(guò)代碼分割（CodeSplit）進(jìn)行拆分為多個(gè)chunk，并將重復(fù)的抽取出來(lái)合并為chunk，從而實(shí)現(xiàn)按需加載，把node_modules依賴包打包成一個(gè)bundle輸出。4.工作流程（1）通過(guò)配置文件webpack.config.js找到給定的入口文件（如index.js）。（2）從入口文件開始分析并處理項(xiàng)目所有的依賴模塊，并遞歸地構(gòu)建一個(gè)依賴關(guān)系圖（dependencygraph）。webpack把所有的文件都當(dāng)做模塊。JavaScript模塊：webpack自己本身就可以識(shí)別并處理。其他模塊：通過(guò)使用loaders來(lái)分析和轉(zhuǎn)譯瀏覽器不認(rèn)識(shí)的模塊為瀏覽器認(rèn)識(shí)的格式。(3)把所有的模塊打包為一個(gè)或多個(gè)瀏覽器可識(shí)別的JavaScript文件，默認(rèn)叫做bundle.js，根據(jù)給定的輸出地址，輸出到指定目錄，一般稱為dist。7.3.1webpack簡(jiǎn)介7.3.2webpack使用與基本配置(1)全局安裝webpack。npminstallwebpack-g（2）全局安裝webpack-cli。npminstallwebpack-cli-g（3）編寫webpack.config.js配置文件和相關(guān)資源文件，執(zhí)行webpack進(jìn)行打包，生成bundle.js。通過(guò)HTML頁(yè)面引用bunde.js文件即可。webpack.config.js配置的框架結(jié)構(gòu)：//

webpack.config.js

空配置框架結(jié)構(gòu)module.exports

=

{

entry:{},

//入口文件的配置項(xiàng)

output:{},

//出口文件的配置項(xiàng)

module:{},

//模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮

plugins:[],

//插件：用于生產(chǎn)模板和各項(xiàng)功能

devServer:{}

//配置webpack開發(fā)服務(wù)功能

}

根據(jù)項(xiàng)目需要進(jìn)行基礎(chǔ)階段配置。在基礎(chǔ)階段配置時(shí)，需要定義mode、entry和output三個(gè)配置項(xiàng)，它們分別代表模式、入口和輸出?；A(chǔ)階段配置文件如下：//

webpack.config.js

var

path

=

require('path');

module.exports

=

{

mode:

'development',

entry:

'./main.js',

output:

{

path:

path.resolve(__dirname,

'dist'),

filename:

'bundle.js',

publicPath:

'./dist/'

},

}

7.3.2webpack使用與基本配置1.mode（模式）

提供mode配置選項(xiàng)，告知webpack使用相應(yīng)模式的內(nèi)置優(yōu)化。模式定義并區(qū)分了webpack的執(zhí)行環(huán)境，可以區(qū)分為開發(fā)環(huán)境和生產(chǎn)環(huán)境在使用webpack打包項(xiàng)目時(shí)，必須設(shè)置mode配置項(xiàng)(development、production)，否則命令行控制臺(tái)會(huì)報(bào)錯(cuò)。2.entry（入口）entry：表示入口起點(diǎn)(entrypoint)指示webpack應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后，webpack會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)（直接和間接）依賴的。根據(jù)實(shí)際工程需要，可以配置單一入口和多頁(yè)面入口。1）單入口簡(jiǎn)單用法entry:string|Array<string>2）多入口用法entry:{[entryChunkName:string]:string|Array<string>}//entry為鍵值對(duì)形式的對(duì)象

注意:當(dāng)entry是一個(gè)鍵值對(duì)形式的對(duì)象時(shí)，包名就是鍵名，output的filename不能是一個(gè)固定的值，因?yàn)槊總€(gè)包的名字不能一樣。webpack.config.js配置中entry配置項(xiàng)常用的配置實(shí)例如下。module.exports={

entry:'./src/main.js',//默認(rèn)值是'./src'，值為字符串

entry:['./src/page2/index.js','./src/main.js'],//值為數(shù)組，多個(gè)文件一起打包entry:{//多頁(yè)面入口page1:'./src/page1/index.js',page2:['./src/page2/index.js','./src/main.js'],page3:'./src/page3/index.js'}}webpack入口文件從這里開始執(zhí)行，webpack可以從這里開始讀取webpack.config.js的相關(guān)配置進(jìn)行項(xiàng)目開發(fā)打包。2.entry（入口）output屬性指明webpack所創(chuàng)建的bundles文件的輸出位置及命名這些文件的規(guī)則，默認(rèn)值路徑為./dist。通常情況下，整個(gè)應(yīng)用程序結(jié)構(gòu)，都會(huì)被編譯到所指定的輸出路徑的文件夾中?？梢酝ㄟ^(guò)output配置項(xiàng)完成path、filename及publicPath等屬性的設(shè)置。（1）path：表示webpack所有文件的輸出的路徑，必須是絕對(duì)路徑，例如output輸出的js、url-loader解析的圖像、HtmlWebpackPlugin生成的html文件，都會(huì)存放在以path為基礎(chǔ)的目錄下。（2）publicPath：表示公共路徑。該配置能為項(xiàng)目中的所有資源指定一個(gè)基礎(chǔ)路徑。注意：所有資源的基礎(chǔ)路徑是指項(xiàng)目中引用*.css、*.js、img等資源時(shí)候的一個(gè)基礎(chǔ)路徑，這個(gè)基礎(chǔ)路徑要配合具體資源中指定的路徑使用，所以實(shí)際打包后資源的訪問(wèn)路徑可以表示為：

靜態(tài)資源最終訪問(wèn)路徑

=output.publicPath+資源loader或插件等配置路徑

路徑需要拼接起來(lái)，形成完整的訪問(wèn)路徑。3)輸出output

（3）filename：表示輸出的JS文件名稱。在單入口和多頁(yè)面入口配置情況下，生成的js文件命名不同。通常單入口生成的文件名為“bundle.js”；多頁(yè)面入口生成多個(gè)JS文件，文件名命名通常形式為“子目錄/[name]-[指定字符].js”name的值與多頁(yè)面入口配置中的屬性名相同，[指定字符]為可選，可指定，也可以不指定。子目錄也可以根據(jù)需要設(shè)置。3)輸出outputwebpack.config.js配置中output配置項(xiàng)常用的配置實(shí)例如下：varpath=require('path');module.exports={output:{path:path.resolve(__dirname,'dist'),//輸出的文件路徑，默認(rèn)為./distfilename:'bundle.js',//默認(rèn)單入口輸出為bundle.jsfilename:'js/[name]-bundle.js'//針對(duì)多頁(yè)面入口，在js子目錄下輸出不同的js文件

publicPath:'./dist/',//指定資源文件引用的目錄}};3.webpack-dev-server安裝與啟用

若想在Web服務(wù)器上打開默認(rèn)的index.html，可以全局安裝webpack-dev-server來(lái)自動(dòng)啟動(dòng)Web服務(wù),然后命令行啟動(dòng)webpack-dev-server--open,此時(shí)服務(wù)器可以自動(dòng)打開默認(rèn)的index.html文件。

啟動(dòng)webpack-dev-server，分兩步進(jìn)行。命令格式如下：

第1步，全局或本地安裝webpack-dev-server。npminstallwebpack-dev-server–g–save-dev|-D

第2步，命令行啟動(dòng)Web服務(wù)器。webpack-dev-server--open--port8080--contentBasesrc--hotWeb服務(wù)器啟動(dòng)后會(huì)自動(dòng)打開與http協(xié)議關(guān)聯(lián)的瀏覽器，并顯示默認(rèn)的index.html頁(yè)面。參數(shù)--open：自動(dòng)打開瀏覽器。--port8080：指定端口8080。--contentBasesrc：設(shè)置默認(rèn)根路徑；--hot：熱重載，熱更新。打補(bǔ)丁，實(shí)現(xiàn)瀏覽器的無(wú)刷新?！纠?-1】webpack配套實(shí)戰(zhàn)—多個(gè)JS文件打包-webpack-1。

在當(dāng)前目錄下新建項(xiàng)目文件夾為“webpack-1”，在其下新建src子文件夾。在該文件夾下創(chuàng)建index.js、main.js文件。步驟和代碼如下。7.3.2webpack使用與基本配置

for

(var

i

=

0;

i

<=count-1;

i++)

{

num[i]=Math.floor(Math.random()*(end+1)+start)

}

var

num1=num.join(',');

var

div1=document.createElement('div');

div1.innerHTML+="<h3>產(chǎn)生隨機(jī)整數(shù)，并輸出結(jié)果</h3>"

div1.innerHTML+="產(chǎn)生"+bits+"位的隨機(jī)整數(shù)"+count+"個(gè)：<br>"+num1

document.body.appendChild(div1)

}

（1）創(chuàng)建src/index.js。//

index.js

--定義函數(shù)并輸出

//

參數(shù)說(shuō)明：bits為整數(shù)的位數(shù);count:隨機(jī)產(chǎn)生整數(shù)的個(gè)數(shù)

export

default

function

randomInt(bits,count){

var

start,end;

//存放起止數(shù)

var

num=new

Array(count);

//

存放產(chǎn)生的隨機(jī)整數(shù)

switch(bits){

case

1:{start=0;end=9};break;

case

2:{start=10;end=99};break;

case

3:{start=100;end=999};break;

case

4:{start=1000;end=9999};break;

default:{

//

當(dāng)bits>5時(shí)，bits=2

start=10;end=99;bits=2;

}

}

（2）創(chuàng)建src/main.js。//

main.js

--導(dǎo)入index.js

import

randomInt

from

'./index'

//導(dǎo)入index.js

randomInt(5,10);

//

調(diào)用模塊定義的方法

（3）創(chuàng)建index.html

<!--

index.html

-->

<!DOCTYPE

html>

<html>

<head>

<meta

charset="utf-8">

<title>webpack項(xiàng)目初戰(zhàn)</title>

</head>

<body>

<script

type="text/javascript"

src="dist/bundle.js"></script>

</body>

</html>

（4）創(chuàng)建webpack.config.js。//

webpack.config.js

var

path

=

require('path');

module.exports

=

{

mode:

'development',

entry:

'./src/main.js',

//入口文件

output:

{

path:

path.resolve(__dirname,

'dist'),

//輸出路徑

filename:

'bundle.js',//輸出文件名

publicPath:

'./dist/'

},

};

（5）命令行狀態(tài)下運(yùn)行webapck，進(jìn)行項(xiàng)目打包。在輸出目錄dist下生成bundle.js文件，執(zhí)行結(jié)果如圖7-5所示。項(xiàng)目文件結(jié)構(gòu)如圖7-6所示。命令格式如下：webpack

【例7-1】webpack配套實(shí)戰(zhàn)webpack./src/main.js--output-filenamebundle.js--output-path./dist--modedevelopment

在當(dāng)前目錄下，創(chuàng)建webpack-server-1文件夾。將項(xiàng)目webapck-1文件夾中所有文件拷貝到該文件夾中，然后修改webpack.config.js文件，安裝和導(dǎo)入html-webpack-plugin插件，并在配置文件中增加plugins、devServer選項(xiàng)的設(shè)置。配置完成后，可以在命令行窗口執(zhí)行webpackserve或webpack-dev-server，即可自動(dòng)打開指定目錄下的index.html文件。【例7-2】webpack-dev-server配置實(shí)戰(zhàn)1.修改webpack.config.js文件。//

webpack.config.js

const

path

=

require('path')

const

HtmlWebpackPlugin

=

require('html-webpack-plugin')

//處理html文件module.exports

=

{

mode:

'development',

entry:

'./src/main.js',

//入口文件

output:

{

path:

path.resolve(__dirname,

'dist'),

//輸出路徑

filename:

'bundle.js',

//輸出文件名

},

//增加插件選項(xiàng)屬性

plugins:[

new

HtmlWebpackPlugin({

title:

'Webpack

html

自動(dòng)引入

bundle

文件',

//頁(yè)面標(biāo)題

filename:

'index.html',

//指定文件名

inject:

'body',

//注入body中

}),

],

//增加devServer選項(xiàng)屬性

devServer:{

open:

true,

//自動(dòng)打開

hot:

true,

//自動(dòng)熱模塊更新

port:8080,

//指定端口

static:

{

//提供靜態(tài)資源服務(wù)

directory:

path.join(__dirname,

'dist'),//拼接資源路徑

},

}

}

【例7-2】webpack-dev-server配置實(shí)戰(zhàn)2.執(zhí)行插件安裝和啟動(dòng)本地服務(wù)。命令執(zhí)行界面如圖7-8所示。命令如下：npminstallhtml-webpack-plugin–Dwebpackserve或webpack-dev-server

執(zhí)行webpack-dev-server命令后的效果如圖7-9所示，自動(dòng)打開瀏覽器并查看index.html頁(yè)面，效果與圖7-7一樣，只是URL改為http://localhost:8080。注意：webpack5的devServer中，已經(jīng)使用static代替contentBase這個(gè)屬性。7.3.3webpack配置加載器loaders

webpack默認(rèn)只能識(shí)別JS模塊，不識(shí)別其他模塊，如CSS文件、less文件、vue文件、圖片、視頻等。webpack使用加載器loader來(lái)識(shí)別和解析除了JS的以外的其他模塊，并為不同的模塊，提供不同的loader。loader是一個(gè)聲明式函數(shù)，用以轉(zhuǎn)換或操作特定類型的文件。當(dāng)webpack中包含非JS的模塊時(shí)，就需要為其配置對(duì)應(yīng)的loader。loader的配置主要通過(guò)module中rules來(lái)進(jìn)行讀取和解析，規(guī)則的類型是一個(gè)數(shù)組，數(shù)組里每一項(xiàng)都描述了如何去處理部分文件。1.loader命名方法。加載器loader通常以XXX-loader格式來(lái)命名，XXX是上下文名稱，例如file、url、css等，而加載器命名如file-loader、url-loader、css-loader、style-loader等。2.loader安裝方法。npminstallxxx-loader--save-dev

3.loader使用方法。（1）在配置項(xiàng)（webpack.config.js）中指定（推薦）。module.exports={module:{ rules:[

{

test:

/\.css$/,

use:

[

{

loader:

'style-loader'

},

{

loader:

'css-loader'

}

]

},

]}（7.3.3webpack配置加載器loaders2）內(nèi)聯(lián)方式：在每個(gè)import語(yǔ)句中顯式指定loader。

可以在import語(yǔ)句或任何與"import"方法同等的引用方式中指定loader。使用!將資源中的loader分開。每個(gè)部分都會(huì)相對(duì)于當(dāng)前目錄解析。importStylesfrom'style-loader!css-loader?modules!./styles.css';

語(yǔ)法說(shuō)明：將styles.css文件內(nèi)容先經(jīng)過(guò)css-loader處理，然后經(jīng)過(guò)style-loader處理，以<style></style>標(biāo)記的形式注入到頁(yè)面的head中。7.3.3webpack配置加載器loadersbabel-loader:將ES6轉(zhuǎn)成ES5。style-loader:將CSS添加到DOMstyle標(biāo)記里。css-loader:允許將CSS文件通過(guò)require()方式引入，并返回CSS代碼。less-loader、sass-loader:處理less、sass。file-loader:分發(fā)文件到output目錄并返回相對(duì)路徑。url-loader:和file-loader類似，但是當(dāng)文件小于設(shè)定的limit時(shí)，會(huì)采用base64編碼進(jìn)行轉(zhuǎn)換，返回DataUrl。raw-loader：加載文件原始內(nèi)容（utf-8），把文件作為字符串導(dǎo)入。4.常用的loader類型。

常用的loader分為模板、樣式、腳本轉(zhuǎn)換編譯、JSON加載、Files文件、加載框架等六類。詳見下表。7.3.3webpack配置加載器loaders5.loader配置。

配置loader需要在webpack.config.js中進(jìn)行，主要通過(guò)module.rules屬性來(lái)配置，rules屬性的值為對(duì)象數(shù)組，用“[]”表示，里面包含若干個(gè){}對(duì)象。配置時(shí)需要注意以下幾點(diǎn)：條件匹配：通過(guò)test、include（包括）、exclude（排除）三個(gè)配置項(xiàng)來(lái)命中l(wèi)oader要應(yīng)用規(guī)則的文件，例如test:/\.css$/,匹配所有為*.css文件。應(yīng)用規(guī)則：對(duì)選中后的文件通過(guò)use配置項(xiàng)來(lái)應(yīng)用loader，可以應(yīng)用一個(gè)loader或按照從后往前的順序應(yīng)用一組loader，同時(shí)還可以分別給loader傳入?yún)?shù)。重置順序：在use:['loader3','loader2','loader1']配置項(xiàng)中，一組loader的執(zhí)行順序默認(rèn)是從右到左執(zhí)行，但通過(guò)enforce選項(xiàng)可以讓某個(gè)loader的執(zhí)行順序排在最前（pre）-或者最后（post）。例如在某條規(guī)則中的use配置項(xiàng)后面添加“,enforce:'pre'”(逗號(hào)分隔),則該條規(guī)則執(zhí)行權(quán)限前置。6.常用加載器配置1)圖像加載器的配置

頁(yè)面中圖像和CSS文件中背景圖像可以通過(guò)file-loader或url-loader加載器進(jìn)行加載。在實(shí)際配置loader時(shí)，可以使用limit、fallback、mimetype、name等選項(xiàng)。

（1）name:值為String，指定生成資源名稱格式，形如“[name].[hash:n].[ext]”。[name]占位符，表示資源原來(lái)的文件名。[hash:n],n表示hash值的位數(shù)，作用是產(chǎn)生n位hash數(shù)。[ext]表示文件擴(kuò)展名。當(dāng)然也可以不使用hash值構(gòu)建文件名，同樣可以指定其它字符串，如[name]-chu.[ext]。

（2）limit:值為Number|Boolean|String。無(wú)默認(rèn)值。根據(jù)工程應(yīng)用的需要，可以設(shè)置為1024的倍數(shù)，例如“l(fā)imit:8192|(8*1024)”。7.3.3webpack配置加載器loaders當(dāng)資源的大小小于限制值時(shí)，會(huì)被采用base64編碼進(jìn)行轉(zhuǎn)換，返回DataUrl，以盡可能的減少網(wǎng)絡(luò)請(qǐng)求次數(shù)。當(dāng)資源的大小大于或等于限制值時(shí)，使用file-loader去處理文件，并且所有的查詢參數(shù)都會(huì)傳遞給file-loader。（3）fallback:值為String，默認(rèn)值為“file-loader”。用于指定當(dāng)目標(biāo)文件的大小超過(guò)限制選項(xiàng)中設(shè)置的限制時(shí)要使用的替代加載程序。（4）mimetype:值為String，默認(rèn)值為文件擴(kuò)展名，例如“image/png”。實(shí)際使用選項(xiàng)時(shí)，可參考下列格式進(jìn)行配置。module:

{

rules:

[{

test:

/\.(gif|jpg|jpeg|png|svg)$/,

use:

[{

loader:

'url-loader',

options:

{

name:

'

[name]-[

[hash:n].[ext]

',

limit:

8192,

fallback:

require.resolve('responsive-loader'),

}

}]

}]

}

2）樣式加載器的配置

安裝不同的加載器就可以對(duì)不同的后綴名的文件進(jìn)行處理，處理CSS樣式文件，就要用到style-loaedr和css-loader。Webpack.config.js中處理CSS樣式的模塊配置如下：module.exports={module:{ rules:[

{

test:

/\.css$/,

use:

[{

loader:

‘style-loader’

//loader2，優(yōu)先級(jí)其次

},

{

loader:

‘css-loader’//loader1，優(yōu)先級(jí)高

}]

},

]}7.3.3webpack配置加載器loaders注意：其中use屬性也可以使用use:[‘style-loader',‘css-loader']這個(gè)簡(jiǎn)化形式。記住css-loader在后，style-loader在前，這個(gè)順序不能顛倒。如果加載和轉(zhuǎn)義less、sass/scss文件需要使用less-loader、sass-loader。若使用postcss加載和轉(zhuǎn)義css/sss文件需要使用postcss-loader加載器。如use:['style-loader','css-loader','less-loader','sass-loader','postcss-loader'],3）JS文件加載器配置module:{rules:[{test:/\.js$/,//es6=>es5

include:[

path.resolve(__dirname,'src')

],exclude:/(node_modules|bower_components)/,//(不處理node_modules和bower_components下的js文件)優(yōu)化處理加快速度

use:{loader:'babel-loader',options:{presets:['@babel/preset-env']//presets設(shè)置的就是當(dāng)前js的版本plugins:[require('@babel/plugin-transform-object-rest-spread')]//需要的插件

}}}]}7.3.3webpack配置加載器loaders7.3.4webpack配置開發(fā)服務(wù)器webpack-dev-server是webpack官方提供的一個(gè)小型Express服務(wù)器。使用它可以為webpack打包生成的資源文件提供web服務(wù)。webpack-dev-server主要提供兩個(gè)功能：（1）為靜態(tài)文件提供服務(wù)。（2）自動(dòng)刷新和熱替換(HMR-HotModuleReplacement)。要啟動(dòng)webpack-dev-server服務(wù)，需要安裝webpack-dev-server模塊，然后配置webpack，最后在命令行啟動(dòng)服務(wù)。（1）安裝webpack-dev-server模塊。

npminstall--save-devwebpack-dev-server（2）在webpack.config.js中配置devServer屬性。devServer:{

contentBase:path.join(__dirname,"dist"),compress:true,port:9000，

compress:true,historyApiFallback:true,hot:true,https:false,noInfo:true,//...},//webpack5下devServer配置devServer:{static:{directory:path.join(__dirname,"build"),

serveIndex:true,//中間件會(huì)在查看沒(méi)有index.html文件的目錄時(shí)生成目錄列表}compress:true,//啟動(dòng)gzip壓縮open:true,//自動(dòng)打開瀏覽器port:8082,//端口號(hào)};

7.4VueCLIVueCLI腳手架作用是構(gòu)建目錄結(jié)構(gòu)，完成本地調(diào)試，實(shí)現(xiàn)代碼部署、熱加載、單元測(cè)試。

利用VueCLI來(lái)搭建Vue項(xiàng)目，前提是必須先安裝好Node.js和npm。在命令行CMD下輸入相關(guān)命令，進(jìn)行全局安裝。7.4.1VueCLI安裝

全局安裝@vue/cli（最新版本）的命令如下。npminstall-g@vue/cli

命令執(zhí)行后，命令行窗口效果如圖所示。安裝窗口出現(xiàn)的版本號(hào)為vue-cli@5.0.8

全局安裝vue-cli(

低版本1.x或2.x)的命令如下。

npminstall-gvue-cli命令執(zhí)行后，命令行窗口效果如圖所示。全局卸載vue-cli的命令如下。npmuninstall–gvue-cli查看vue-cli或@vue/cli的版本的命令如下。

vue–version或者vue-V(說(shuō)明V需要大寫)7.4.2VueCLI創(chuàng)建Vue項(xiàng)目【例7-3】VueCLI5.x創(chuàng)建Vue項(xiàng)目vue-cli-1。(1)在命令行窗口，輸入命令vuecreatevue-cli-1，進(jìn)入對(duì)話框。(2)檢查項(xiàng)目所需要的功能（特性）。(3)選擇代碼格式化配置。(4)選擇附加的lint特性。(5)如果決定手動(dòng)選擇特性，在操作提示的最后一步時(shí)，可以選擇將已選擇的選項(xiàng)保存為一個(gè)將來(lái)可復(fù)用的preset（預(yù)設(shè)）。(6)完成選項(xiàng)設(shè)置后，項(xiàng)目成功創(chuàng)建。1.使用VueCLI5.x創(chuàng)建項(xiàng)目7.4.2VueCLI創(chuàng)建Vue項(xiàng)目3.Vueui可視化創(chuàng)建Vue項(xiàng)目除了通過(guò)命令方式來(lái)創(chuàng)建Vue項(xiàng)目外，也可以通過(guò)vue命令來(lái)啟動(dòng)圖形化界面創(chuàng)建項(xiàng)目。啟動(dòng)Vue圖形化界面的命令如下：

vue

ui

執(zhí)行命令后，啟動(dòng)GUI，界面效果如下圖所示，然后自動(dòng)打開關(guān)聯(lián)的瀏覽器并訪問(wèn)http://localhost:8000/project/select，首頁(yè)面展示項(xiàng)目依賴，如圖7-22所示。

7.5單文件組件SFC問(wèn)題導(dǎo)入：在很多Vue項(xiàng)目中，使用ponent()來(lái)定義全局組件，緊接著用app.mount(‘#app')在每個(gè)頁(yè)面內(nèi)指定一個(gè)容器元素。這種方式在眾多中小規(guī)模的項(xiàng)目中運(yùn)行效果還不錯(cuò)，在這些項(xiàng)目里JavaScript只被用來(lái)加強(qiáng)特定的視圖。但在較為復(fù)雜的項(xiàng)目中，這種方式缺點(diǎn)很多。具體有以下幾點(diǎn)：（1）全局定義強(qiáng)制要求每個(gè)component中的命名不得重復(fù)。（2）字符串模板缺乏語(yǔ)法高亮，在HTML有多行的時(shí)候，需要用到丑陋的“\”。（3）不支持CSS，意味著當(dāng)HTML和JavaScript組件化時(shí)，CSS明顯被遺漏。（4）沒(méi)有構(gòu)建步驟限制，只能使用HTML和ES5JavaScript，而不能使用預(yù)處理器，如Pug(formerlyJade)和Babel。解決方案：Vue提供了單文件組件（SingleFileComponents）很好地解決上述所有問(wèn)題。

單文件組件的擴(kuò)展名為.vue，需要使用vue-loader（解析和轉(zhuǎn)換.vue文件，提取出其中的邏輯代碼script、樣式代碼style、以及HTML模板template，再分別把它們交給對(duì)應(yīng)的Loader去處理）來(lái)解析，所以通常使用webpack或Browserify等構(gòu)建工具來(lái)實(shí)現(xiàn)項(xiàng)目的編譯和打包。

但Vue3.x中建議使用vuecreate或使用npmcreatevite（或npminitvite）來(lái)創(chuàng)建項(xiàng)目。

若使用vite構(gòu)建項(xiàng)目，需要安裝vite插件，詳見第11章Vue3.x構(gòu)建項(xiàng)目-vite。本節(jié)推薦使用vuecreate來(lái)創(chuàng)建項(xiàng)目。

當(dāng)通過(guò)VueCLI建立Vue新項(xiàng)目后，src目錄下會(huì)自動(dòng)生成一個(gè)App.vue文件。這個(gè)Vue單組件的構(gòu)成語(yǔ)法：<template>

<div

id="app">

<img

alt="Vue

logo"

src="./assets/logo.png"

/>

</div>

</template>

<script>

console.log("這是測(cè)試！")

</script>

<style>

#app

{

text-align:

center;

color:

#2c3e50;

margin-top:

60px;

}

</style>

7.5.1單文件組件的結(jié)構(gòu)template：組件的HTML模板。script/scriptsetup：主要是JavaScript或TypeScript程序。其中,每個(gè).vue文件最多可同時(shí)包含一個(gè)<script>標(biāo)記（不包括<scriptsetup>）;該腳本將作為ESModule來(lái)執(zhí)行；其默認(rèn)導(dǎo)出的內(nèi)容應(yīng)該是Vue組件選項(xiàng)對(duì)象，它要么是一個(gè)普通的對(duì)象，要么是defineComponent的返回值。每個(gè).vue文件最多可同時(shí)包含一個(gè)<scriptsetup>塊（不包括<script>），該腳本會(huì)被預(yù)處理并作為組件的setup()函數(shù)使用，也就是說(shuō)它會(huì)在每個(gè)組件實(shí)例中執(zhí)行。<scriptsetup>的頂層綁定會(huì)自動(dòng)暴露給模板。style：CCS樣式。每個(gè).vue文件最多可同時(shí)包含一個(gè)<style>塊。<style>標(biāo)記可以通過(guò)scoped或moduleattribute將樣式封裝在當(dāng)前組件內(nèi)，多個(gè)不同封裝模式的<style>標(biāo)記可以在同一個(gè)組件中混用?！纠?-4】Vue單文件組件實(shí)戰(zhàn)--項(xiàng)目vue-sfc-1項(xiàng)目創(chuàng)建命令與過(guò)程：vuecreatevue-sfc-1cdvue-sfc-1npmrunserve（1）修改App.vue文件。代碼如下：<template>

<div

id="app">

<img

alt="Vue

logo"

src="./assets/logo.png"

/>

<mysfc

msg="歡迎使用

Vue.js

3.2!"

/>

</div>

</template>

<script

setup>

import

mysfc

from

"./components/mysfc.vue";

</script>

<style>

#app

{

text-align:

center;

color:

#2c3e50;

margin-top:

60px;

}

</style>

（2）刪除components目錄下的HelloWorld.vue文件，新建mysfc.vue文件。代碼如下：<!--

mysfc.vue

-->

<template>

<div>

<h3>{{

msg

}}--自定義組件</h3>

<p>自定義組件由三部分構(gòu)成：模板、腳本和樣式。</p>

<p>這是組件中的數(shù)據(jù)：{{

message

}}</p>

</div>

</template>

<script

setup>

import

{

defineProps,

ref

}

from

"vue";

defineProps({

msg:

String

});

const

message

=

ref("今天是個(gè)好日子！");

</script>

<style

scoped>

p

{

font-size:

22px;

text-decoration:

underline;

}

</style>

（3）在命令行窗口中，執(zhí)行如下命令：npmrunserve然后刷新瀏覽器，查看頁(yè)面效果如圖7-28所示?！纠?-4】Vue單文件組件實(shí)戰(zhàn)--項(xiàng)目vue-sfc-17.5.2單文件組件的新特點(diǎn)

單文件組件（又名.vue文件）的兩項(xiàng)功能如下：<scriptsetup>是一種編譯時(shí)語(yǔ)法糖，能夠極大改善在SFC中使用CompositionAPI時(shí)的開發(fā)者體驗(yàn)。<style>v-bind用于在SFC<style>標(biāo)記中啟用組件狀態(tài)驅(qū)動(dòng)的動(dòng)態(tài)CSS值。下面給出一個(gè)同時(shí)使用這兩個(gè)新功能的示例組件：1．<scriptsetup>在<scriptsetup>中，不必聲明exportdefault和setup方法，這種寫法會(huì)自動(dòng)將所有頂級(jí)變量、函數(shù)，均會(huì)自動(dòng)暴露給模板（template）使用。下面結(jié)合一個(gè)例子，感受下scriptsetup帶來(lái)的便利?！纠?-5】SFC新特性展示實(shí)戰(zhàn)。

使用vuecreatevue-sfc-2來(lái)創(chuàng)建項(xiàng)目，過(guò)程與【例7-4相同】。具體步驟如下：（1）修改App.vue文件。代碼如下：<template>

<div

id="app">

<img

alt="Vue

logo"

src="./assets/logo.png"

/>

<mysfc

msg="歡迎使用

Vue.js

3.2!"

/>

</div>

</template>

<script

setup>

import

mysfc

from

"./components/mysfc.vue";

</script>

<style>

#app

{text-align:

center;

color:

#2c3e50;margin-top:

60px;}

</style>

（2）刪除components目錄下的HelloWorld.vue文件。在該目錄下，新建mysfc.vue文件。具體內(nèi)容如下：<!--

mysfc.vue

-->

<script

setup>

import

mysfc2

from

"./mysfc2.vue";

import

{

ref

}

from

"vue";

const

color

=

ref("red");

//

初始值

</script>

<template>

<div>

<h3>SFC的新特性,style

v-bind</h3>

<button

@click="color

=

color

===

'red'

?

'green'

:

'red'">

Color

is:

{{

color

}}

</button>

<mysfc2></mysfc2>

</div>

</template>

<style

scoped>

h3

{

color:

v-bind(color);

}

</style>

（3）在components目錄下，新建mysfc2.vue文件。具體內(nèi)容如下：<!--

mysfc2.vue

-->

<template>

<div>

<h3>這是子組件mysfc2.vue--{{

count

}}</h3>

<button

@click="add1">增加1</button>

</div>

</template>

<script

setup>

import

{

ref

}

from

"vue";

const

count

=

ref(0);

function

add1()

{

count.value++;

}

</script>

<style

scoped>

h3

{

font-style:

italic;font-size:v-bind("(count+16)+'px'"

}

</style>

【例7-5】SFC新特性展示實(shí)戰(zhàn)注意：頂級(jí)變量count和函數(shù)add1()不再通過(guò)return返回出去，而是直接暴露給模板使用。起初Vue3.0暴露變量必須return出來(lái)，template中才能使用。（1）獲取組件傳值defineProps()與子組件傳遞事件defineEmits()前面已經(jīng)強(qiáng)調(diào)不需要使用setup()函數(shù)，那么子組件怎么才能接受父組件傳遞過(guò)來(lái)的數(shù)據(jù)呢？props、$emit()怎么獲取數(shù)據(jù)和上傳數(shù)據(jù)呢？Vue3.2推出新的API，分別為defineProps()、defineEmits()?！净菊Z(yǔ)法】子組件中需要處理的工作<!--子組件的模板中使用傳遞過(guò)來(lái)的數(shù)據(jù)-->

<h3>{{propName}}</h3>//JS中，子組件中導(dǎo)入API，并使用defineProps()定義傳遞參數(shù)的類型import{defineProps}from"vue";defineProps({propName:type});//子組件中，通過(guò)defineEmits()定義自定義事件名稱const$myemit=defineEmits(["customEvent1","customEvent2"]);//子組件在事件處理函數(shù)中，通過(guò)$myemit()來(lái)觸發(fā)自定義事件，同時(shí)傳遞數(shù)據(jù)functionhandler1Click(){

$myemit("customEvent1",postData1);}父組件需要處理的工作<!--父組件中使用子組件，并設(shè)置傳遞的參數(shù)-->

<mysfc1propName="歡迎使用Vue.js3.2!"></mysfc1><!--父組件中使用mysfc2組件，并偵聽自定義事件customEvent1--><mysfc2@customEvent1="functionHandler"></mysfc2>//父組件在偵聽事件處理函數(shù)中獲取中處理數(shù)據(jù)functionmyAddHandler(postData){

//對(duì)獲取的數(shù)據(jù)進(jìn)行處理}defineProps()與defineEmits()子組件defineProps({})用于聲明父組件傳遞的數(shù)據(jù)，參數(shù)為對(duì)象。propName：為屬性；type：為類型，可以有多個(gè)屬性值對(duì)。defineEmits(["customEvent1","customEvent2",…])用來(lái)定義自定義事件名稱，可以同時(shí)定義多個(gè)事件名稱，參數(shù)為數(shù)組。$myemit("customEvent1",postData)用來(lái)觸發(fā)自定義事件，并傳遞數(shù)據(jù)給父組件。父組件

通過(guò)@customEvent1="functionHandler"來(lái)偵聽自定義事件來(lái)綁定事件處理函數(shù)，處理函數(shù)的參數(shù)即為子組件上傳的數(shù)據(jù)，并在事件處理函數(shù)中，對(duì)子組件傳遞過(guò)來(lái)的數(shù)據(jù)進(jìn)行處理。defineProps()與defineEmits()語(yǔ)法【例7-6】Vue3.2中父子組件相互傳遞數(shù)據(jù)實(shí)戰(zhàn)。使用vuecreatevue-sfc-emitprops-3項(xiàng)目，修改App.vue文件，刪除components目錄下的HelloWorld.vue文件，并在該目錄下新建mysfc1.vue和mysfc2.vue文件。具體內(nèi)容如下：(1)修改App.vue文件。代碼如下：<template>

<div

id="app">

<fieldset>

<legend>App組件</legend>

<img

alt="Vue

logo"

src="./assets/logo.png"

/><!--父組件通過(guò)props傳值給子組件-->

<mysfc1

msg="歡迎使用

Vue.js

3.2!"></mysfc1>

</fieldset>

</div>

</template>

<script

setup>

import

mysfc1

from

"./components/mysfc1.vue";

//導(dǎo)入子組件</script>

<style>

#app

{

text-align:

center;color:

#2c3e50;}

</style>

(2)在components目錄下新建mysfc1.vue文件。代碼如下：<!--

mysfc1.vue

-->

<template>

<div

class="home">

<fieldset>

<legend>mysfc1組件</legend>

<h3>{{

msg

}}</h3>

<p>子組件mysfc2中的amount={{

amount

}}</p>

<!--

使用mysfc2組件，并偵聽自定義事件myAdd、myDel

-->

<mysfc2

@myAdd="myAddHandler"

@myDel="myDelHandler">

</mysfc2>

</fieldset>

</div>

</template>

<script

setup>

import

{

defineProps,

ref

}

from

"vue";

//

導(dǎo)入API

import

mysfc2

from

"./mysfc2.vue";

//

導(dǎo)入mysfc2組件

//

接收App組件傳遞過(guò)來(lái)的數(shù)據(jù)msg

defineProps({

msg:

String

});

const

amount

=

ref(0);

//

定義事件處理函數(shù)

function

myAddHandler(postData)

{

amount.value

=

postData;

}

function

myDelHandler(postData)

{

amount.value

=

postData;

}

</script>

(3)在components目錄下新建mysfc2.vue文件。代碼如下：<!--

mysfc2.vue

-->

<template>

<div>

<fieldset>

<legend>mysfc2組件</legend>

<h2>計(jì)數(shù)器-count={{

count

}}</h2>

<button

@click="handler1Click">增加1</button>

<button

@click="handler2Click">減少1</button>

</fieldset>

</div>

</template>

【例7-6】Vue3.2中父子組件相互傳遞數(shù)據(jù)實(shí)戰(zhàn)<script

setup>

import

{

defineEmits,

ref

}

from

"vue";

//

使?defineEmits()定義自定義事件名稱，可以接受?個(gè)數(shù)組

const

$myemit

=

defineEmits(["myAdd",

"myDel"]);

const

count

=

ref(0);

function

handler1Click()

{

count.value++;

$myemit("myAdd",

count.value);

}

function

handler2Click()

{

count.value--;

$myemit("myDel",

count.value);

}

</script>

(3)在components目錄下新建mysfc2.vue文件。代碼如下：<!--

mysfc2.vue

-->

<template>

<div>

<fieldset>

<legend>mysfc2組件</legend>

【例7-6】Vue3.2中父子組件相互傳遞數(shù)據(jù)實(shí)戰(zhàn)

<h2>計(jì)數(shù)器-count={{

count

}}</h2>

<button

@click="handler1Click">增加1</button>

<button

@click="handler2Click">減少1</button>

</fieldset>

</div>

</template>

<script

setup>

import

{

defineEmits,

ref

}

from

"vue";

//

使?defineEmits()定義自定義事件名稱，可以接受?個(gè)數(shù)組

const

$myemit

=

defineEmits(["myAdd",

"myDel"]);

const

count

=

ref(0);

function

handler1Click()

{

count.value++;

$myemit("myAdd",

count.value);

}

function

handler2Click()

{

count.value--;

$myemit("myDel",

count.value);

}

</script>

(2)獲取子組件ref變量和defineExpose()暴露子組件方法與屬性

defineExpose()用于組件暴露自己的屬性以及方法，去供外部使用，常用于父子組件關(guān)系。