Vue.js前端開發(fā)實(shí)戰(zhàn)（第2版）-教學(xué)課件 第1章 初識(shí)Vue

第1章初識(shí)Vu

e.js《Vu

e.js前端開發(fā)實(shí)戰(zhàn)（第2版）》學(xué)習(xí)目標(biāo)/Ta

rg

e

t了解前端技術(shù)的發(fā)展，能夠說出使用框架開發(fā)項(xiàng)目的優(yōu)勢(shì)了解什么是Vu

e

，能夠說出Vu

e

的基本概念了解Vu

e的特性，能夠說出Vu

e

的4個(gè)特性了解Vu

e的版本，能夠說出Vu

e

2

和Vu

e

3

的區(qū)別學(xué)習(xí)目標(biāo)/Ta

rg

e

t掌握Vis

ua

l

Studio

Code編輯器的使用方法，能夠使用Vis

ua

l

Studio

Code編輯器進(jìn)行項(xiàng)目開發(fā)掌握Node.js環(huán)境的搭建，能夠獨(dú)立完成Node.js

的下載和安裝掌握常見的包管理工具的使用方法，能夠應(yīng)用npm

和ya

rn相關(guān)命令下載、升級(jí)、卸載包掌握Vite

的使用方法，能夠使用Vite

創(chuàng)建Vu

e

3項(xiàng)目章節(jié)概述/Sum

m

a

ry在前端開發(fā)中，一個(gè)優(yōu)秀的框架可以幫助用戶解決一些常見的問題，有助于高效地完成工作。Vu

e.js

（簡(jiǎn)稱Vu

e

）作為前端開發(fā)常用的框架之一，不僅可以提高項(xiàng)目的開發(fā)效率，而且可以改善開發(fā)體驗(yàn)。為了幫助讀者對(duì)Vu

e有一個(gè)初步的認(rèn)識(shí)，本章將對(duì)Vu

e的基礎(chǔ)知識(shí)進(jìn)行詳細(xì)講解。目錄/Conte

nts1

.11

.21

.3前端技術(shù)的發(fā)展Vu

e簡(jiǎn)介Vu

e開發(fā)環(huán)境1

.4使用Vite創(chuàng)建Vu

e

3項(xiàng)目前端技術(shù)的發(fā)展1

.1了解前端技術(shù)的發(fā)展，能夠說出使用框架開發(fā)項(xiàng)目的優(yōu)勢(shì)1.1

前端技術(shù)的發(fā)展yx.ityxb

.co

m先定一個(gè)小目標(biāo)！前端開發(fā)的基礎(chǔ)語言為HTML、CS

S和Ja

va

S

crip

t，其中，HTML用于搭建頁面的內(nèi)容結(jié)構(gòu)；CS

S用于美化頁面的顯示效果；Ja

va

S

crip

t用于處理用戶和頁面之間的交互行為。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展當(dāng)開發(fā)大型交互式項(xiàng)目時(shí)，開發(fā)者需要編寫大量的Ja

va

Scrip

t代碼來操作文檔對(duì)象模型（Docum

e

nt

Ob

je

ct

Mode

l，DOM）并處理瀏覽器的兼容性問題。為了簡(jiǎn)化DOM操作和減少開發(fā)過程中的瀏覽器兼容性問題，jQuery提供了一個(gè)選擇器引擎，它比其他引擎查詢速度更快，并為不同瀏覽器之間的Ja

va

Scrip

t不兼容提供了隱式處理方法，因此jQue

ry深受開發(fā)人員的歡迎。jQue

ry的核心思想是使開發(fā)人員僅編寫少量的代碼就能實(shí)現(xiàn)更多的功能。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展在移動(dòng)互聯(lián)網(wǎng)時(shí)代，前端技術(shù)被應(yīng)用于移動(dòng)端開發(fā)中。為了使移動(dòng)端網(wǎng)頁的使用體驗(yàn)更接近用戶習(xí)慣，移動(dòng)端網(wǎng)頁通常會(huì)做成單頁We

b應(yīng)用（S

ing

le

Pa

g

e

We

b

Ap

p

lica

t

ion）的形式。單頁We

b應(yīng)用在使用過程中只需要加載一個(gè)HTML頁面，而傳統(tǒng)的網(wǎng)頁是用戶每單擊一個(gè)鏈接都需要加載相應(yīng)的HTML頁面。需要說明的是，單頁We

b應(yīng)用并不是只能顯示一個(gè)頁面，所謂“單頁”是對(duì)瀏覽器而言的，而開發(fā)者可以利用Aja

x技術(shù)實(shí)現(xiàn)邏輯上的頁面切換的效果。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展為了提高開發(fā)效率，市面上出現(xiàn)了基于MVVM模式的前端開發(fā)框架，例如Ang

ula

r、Re

a

ct、Vu

e

等。這些框架以數(shù)據(jù)為核心，使用戶關(guān)注業(yè)務(wù)邏輯的處理，減少了手動(dòng)的DOM操作。這些框架還為開發(fā)者提供了一套開發(fā)規(guī)則，控制權(quán)在框架本身，用戶需要按照框架的規(guī)范進(jìn)行開發(fā)。與jQuery相比，使用框架開發(fā)的項(xiàng)目具有更高的開發(fā)效率、更好的可維護(hù)性、更強(qiáng)的可擴(kuò)展性和更高的性能。在Ang

ula

r、Re

a

ct和Vu

e這3個(gè)框架中，Vu

e體積較小，在使用上更容易上手、更加靈活。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁We

b應(yīng)用單頁We

b應(yīng)用將所有的功能局限于一個(gè)We

b頁面中，僅在該頁面的初始化時(shí)加載相應(yīng)的資源（必要的HTML、CS

S和Ja

va

Scrip

t代碼）。在頁面加載完成后，所有的操作都在這個(gè)頁面上完成，且不會(huì)因用戶的操作而進(jìn)行頁面的重新加載或跳轉(zhuǎn)，而是利用Ja

va

Script動(dòng)態(tài)地變換頁面的內(nèi)容，從而實(shí)現(xiàn)頁面與用戶的交互。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁We

b應(yīng)用單頁We

b應(yīng)用有以下3個(gè)優(yōu)點(diǎn)。①

良好的交互體驗(yàn)。在單頁We

b應(yīng)用中，內(nèi)容的改變不需要重新加載整個(gè)頁面，響應(yīng)速度更快。②

良好的前后端分離開發(fā)模式。后端專注于提供API，更容易實(shí)現(xiàn)API的復(fù)用。③

減輕服務(wù)器的壓力。單頁We

b應(yīng)用中的數(shù)據(jù)是通過Aja

x獲取的，不需要重新加載，服務(wù)器的壓力較小。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁We

b應(yīng)用任何一種技術(shù)都有局限性，對(duì)于單頁We

b應(yīng)用來說，主要的問題有以下2個(gè)。①首屏加載慢，在首次加載時(shí)需要將頁面中所用到的資源全部加載。②不利于搜索引擎優(yōu)化（S

e

a

rch

Eng

ine

Optim

iza

t

ion，S

EO）。對(duì)于單頁We

b應(yīng)用，搜索引擎請(qǐng)求到的HTML頁面可能不是包含所有數(shù)據(jù)的最終渲染頁面，這樣就很不利于內(nèi)容被搜索引擎搜索到。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁We

b應(yīng)用隨著技術(shù)的進(jìn)步，上述問題已經(jīng)有了相應(yīng)的解決方案。對(duì)于第1個(gè)問題，可以通過路由懶加載、代碼壓縮、網(wǎng)絡(luò)傳輸壓縮等方式解決；對(duì)于第2個(gè)問題，可以通過服務(wù)器端渲染（S

e

rve

r-S

ide

Re

nde

ring，S

S

R）技術(shù)解決。yx.ityxb

.co

m1.1

前端技術(shù)的發(fā)展Vu

e簡(jiǎn)介1

.2了解什么是Vu

e

，能夠說出Vu

e

的基本概念先定一個(gè)小目標(biāo)！yx.ityxb

.co

m1.2.1

什么是Vu

e什么是Vu

e呢？1.2.1

什么是Vu

eyx.ityxb

.co

mVu

e

（讀音：/Vjuㄙ/）是一款用于構(gòu)建用戶界面的漸進(jìn)式框架。其中，“漸進(jìn)式”是指在使用Vu

e核心庫時(shí)，可以在核心庫的基礎(chǔ)上根據(jù)實(shí)際需要逐步增加功能。yx.ityxb

.co

m1.2.1

什么是Vu

e使用Vu

e進(jìn)行項(xiàng)目開發(fā)具有以下優(yōu)勢(shì)。①

輕量級(jí)。Vu

e是一個(gè)輕量級(jí)的前端開發(fā)框架，文件體積小。②

Vu

e項(xiàng)目基于Ja

va

S

crip

t語言開發(fā)，開發(fā)者不用單獨(dú)學(xué)一門陌生的語言，從而降低了學(xué)習(xí)的門檻。③

Vu

e在使用上比較靈活，開發(fā)人員可以選擇使用Vu

e開發(fā)一個(gè)全新項(xiàng)目，也可以將Vu

e引入現(xiàn)有項(xiàng)目。yx.ityxb

.co

m1.2.1

什么是Vu

e④

Vu

e通過虛擬DOM技術(shù)減少對(duì)DOM的直接操作，并通過盡可能簡(jiǎn)單的API來實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定，可支持單向和雙向數(shù)據(jù)綁定。⑤

Vu

e支持組件化開發(fā)，可提高項(xiàng)目的開發(fā)效率和可維護(hù)性，使代碼更易于復(fù)用，便于團(tuán)隊(duì)的協(xié)同開發(fā)。⑥

Vu

e可以與前端開發(fā)中用到的一系列工具以及各種支持庫結(jié)合使用，以實(shí)現(xiàn)前端工程化開發(fā)，從而提高了項(xiàng)目的開發(fā)效率，降低了大型項(xiàng)目的開發(fā)難度。yx.ityxb

.co

m1.2.1

什么是Vu

eVu

e是基于MVVM模式的框架。MVVM主要包含Mode

l（數(shù)據(jù)模型）、Vie

w（視圖）和Vie

w

Mode

l（視圖模型）。其中，Mode

l是指數(shù)據(jù)部分，負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)的處理；Vie

w

是指視圖部分，即用戶界面，負(fù)責(zé)視圖處理；Vie

w

Mode

l用于連接視圖與數(shù)據(jù)模型，負(fù)責(zé)監(jiān)聽Mode

l或者Vie

w

的改變。1.2.1

什么是Vu

eyx.ityxb

.co

mVu

e的基本工作原理如下圖所示。ViewMode

lData

BindingsDOM

ListenersView

Mode

l自動(dòng)更新yx.ityxb

.co

m監(jiān)聽DOM變化監(jiān)聽數(shù)據(jù)變化自動(dòng)同步1.2.1

什么是Vu

eVie

w

和Mode

l不能直接通信，它們需要借助

Vie

w

Mode

l才能進(jìn)行通信。Vie

w

Mode

l相當(dāng)于一個(gè)觀察者，監(jiān)控著Vie

w和Mode

l的動(dòng)作，實(shí)現(xiàn)了Vie

w與Mode

l的解耦。Vie

w

Mode

l包含DOM

Lis

te

ne

rs

和Da

ta

Binding

s

。其中，DOMLis

te

ne

rs用于監(jiān)聽Vie

w中DOM變化，并在DOM變化時(shí)通知Mode

l做出相應(yīng)的修改；Da

ta

Binding

s用于監(jiān)聽Mode

l中的數(shù)據(jù)變化，并在數(shù)據(jù)變化時(shí)通知Vie

w做出相應(yīng)的修改。1.2.1

什么是Vu

eyx.ityxb

.co

m了解Vu

e的特性，能夠說出Vu

e

的4個(gè)特性先定一個(gè)小目標(biāo)！yx.ityxb

.co

m1.2.2

Vu

e的特性Vu

e的4個(gè)特性。數(shù)據(jù)驅(qū)動(dòng)視圖雙向數(shù)據(jù)綁定yx.ityxb

.co

m插件指令1.2.2

Vu

e的特性在使用Vu

e的頁面中，Vu

e會(huì)監(jiān)聽數(shù)據(jù)變化，當(dāng)頁面數(shù)據(jù)發(fā)生變化時(shí)，Vu

e會(huì)自動(dòng)重新渲染頁面結(jié)構(gòu)，如下圖所示。Vue監(jiān)聽數(shù)據(jù)變化頁面所依賴的數(shù)據(jù)頁面結(jié)構(gòu)變化yx.ityxb

.co

m自動(dòng)渲染1.2.2

Vu

e的特性1.數(shù)據(jù)驅(qū)動(dòng)視圖Vu

e實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，即當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖也會(huì)發(fā)生變化；當(dāng)視圖發(fā)生變化時(shí)，數(shù)據(jù)也會(huì)跟著同步變化。例如，用戶在填寫表單時(shí)，雙向數(shù)據(jù)綁定可以輔助開發(fā)者在無須手動(dòng)操作DOM的前提下，自動(dòng)同步用戶填寫的內(nèi)容數(shù)據(jù)，從而獲取表單元素最新的值。yx.ityxb

.co

m1.2.2

Vu

e的特性2.雙向數(shù)據(jù)綁定指令主要包括內(nèi)置指令和自定義指令，內(nèi)置指令是Vu

e本身自帶的指令，而自定義指令是由用戶自己定義的指令。指令的名稱以“v-”開頭，作用于HTML中的元素。將指令綁定在元素上時(shí)，指令會(huì)給綁定的元素添加一些特殊的行為。例如，v-b

ind指令用于實(shí)現(xiàn)單向數(shù)據(jù)綁定，v-if指令用于實(shí)現(xiàn)頁面條件渲染，v-for指令用于實(shí)現(xiàn)頁面列表渲染等。yx.ityxb

.co

m1.2.2

Vu

e的特性3.指令Vu

e支持插件，通過加載插件可以實(shí)現(xiàn)更多的功能。常用的插件有Vu

e

Route

r（路由）、Vu

e

x（狀態(tài)管理庫）、Pinia

（輕量級(jí)狀態(tài)管理庫）等，這些插件經(jīng)過簡(jiǎn)單配置就可以使用。yx.ityxb

.co

m1.2.2

Vu

e的特性4.插件了解Vu

e

的版本，

能夠說出Vu

e

2

和Vu

e

3

的區(qū)別先定一個(gè)小目標(biāo)！yx.ityxb

.co

m1.2.3

Vu

e的版本目前，Vu

e共有3

個(gè)大版本，分別是Vu

e

1

、Vu

e

2和Vu

e

3

。其中，Vu

e

1幾乎被淘汰，不建議學(xué)習(xí)與使用；Vu

e

2和Vu

e

3目前被廣泛應(yīng)用，并且Vu

e

3將會(huì)逐步替代Vu

e

2。yx.ityxb

.co

m1.2.3

Vu

e的版本Vu

e

3支持Vu

e

2中絕大多數(shù)的API與特性，同時(shí)Vu

e

3還新增了一些特有的功能，并廢棄了Vu

e

2中的一些舊功能。Vu

e

3新增的功能包括組合式（Com

p

os

it

ion）API、多根節(jié)點(diǎn)組件等；廢棄的舊功能包括過濾器（Filte

r）以及$

on()、$

off()和$

once()實(shí)例方法等。雖然從表面上看，Vu

e

3和Vu

e

2的使用方式?jīng)]有太大的差異，但Vu

e

3的底層代碼發(fā)生了很大變化，包括渲染、數(shù)據(jù)監(jiān)聽、雙向綁定、生命周期等。yx.ityxb

.co

m1.2.3

Vu

e的版本Vu

e

3的新特性如下。①

體積更小，采用按需編譯的方式編譯出來的文件體積比Vu

e

2的小。②

性能提升，運(yùn)行速度比Vu

e

2快1.5倍左右。③

具有更好的Ty

p

e

S

crip

t支持。④

暴露了更底層的API，可以通過多種方式組織代碼，代碼使用上更加靈活。⑤

提供了更先進(jìn)的組件。Vu

e創(chuàng)建了一個(gè)虛擬的Fra

g

m

e

nt節(jié)點(diǎn)，允許組件中有多個(gè)根節(jié)點(diǎn)。⑥

提供組合式API，能夠更好地組合邏輯、封裝邏輯、復(fù)用邏輯。yx.ityxb

.co

m1.2.3

Vu

e的版本為了提高開發(fā)效率，開發(fā)者可以在項(xiàng)目中添加UI組件庫。UI組件庫可以理解成一個(gè)可重復(fù)使用的界面設(shè)計(jì)元素的集合體，使用它可以更快速地開發(fā)用戶界面。目前，主流UI組件庫都已經(jīng)發(fā)布了支持Vu

e

3的版本，常用的UI組件庫如下。①

Ele

m

e

nt

Plus

組件庫：一款基于Vu

e

3的桌面端組件庫。② Va

nt組件庫：一款開源移動(dòng)端組件庫，它從3.0版本開始支持Vu

e

3。③

Ant

De

s

ig

n

Vu

e

組件庫：一款用于開發(fā)和服務(wù)企業(yè)級(jí)后臺(tái)產(chǎn)品的組件庫，它從2.0版本開始支持Vu

e

3。yx.ityxb

.co

m1.2.3

Vu

e的版本Vu

e開發(fā)環(huán)境1

.3先定一個(gè)小目標(biāo)！掌握Vis

ua

l

Studio

Code編輯器的使用方法，能夠完成中文語言擴(kuò)展、Vo

la

r擴(kuò)展的安裝，以及使用Vis

ua

l

StudioCode編輯器打開項(xiàng)目并在項(xiàng)目中創(chuàng)建一個(gè)HTML5文檔yx.ityxb

.co

m1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器Vis

ua

l

Studio

Code

（簡(jiǎn)稱VS

Code

）是由微軟公司推出的一款免費(fèi)、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對(duì)于前端開發(fā)人員來說，一個(gè)強(qiáng)大的編輯器可以使開發(fā)變得簡(jiǎn)單、便捷、高效。yx.ityxb

.co

m1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器VS

Code編輯器具有以下特點(diǎn)。①

輕巧、極速，占用系統(tǒng)資源較少。②

具備代碼智能補(bǔ)全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。③

跨平臺(tái)，可用于m

a

c

OS、Window

s和Linux操作系統(tǒng)。④

主題界面的設(shè)計(jì)比較人性化。例如，可以快速查找文件并直接進(jìn)行開發(fā)，可以通過分屏顯示代碼，可以自定義主題顏色，以及可以快速查看已打開的項(xiàng)目文件和項(xiàng)目文件結(jié)構(gòu)。⑤

提供豐富的擴(kuò)展，用戶可根據(jù)需要自行下載和安裝擴(kuò)展。yx.ityxb

.co

m1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器下面講解如何下載和安裝VS

Code編輯器、如何安裝中文語言擴(kuò)展、如何安裝Vo

la

r擴(kuò)展，以及如何使用VSCode編輯器。yx.ityxb

.co

m打開瀏覽器，登錄VS

Code編輯器的官方網(wǎng)站，如右圖所示。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器1.下載和安裝VS

Code編輯器yx.ityxb

.co

m在VS

Code編輯器的官方網(wǎng)站中，單擊

“Dow

nloa

d

for

Window

s

”按鈕，該頁面會(huì)自動(dòng)識(shí)別當(dāng)前的操作系統(tǒng)并下載相應(yīng)的安裝包。如果需要下載其他系統(tǒng)的安裝包，可以單擊按鈕右側(cè)的小箭頭“

”打開下拉菜單，就會(huì)看到其他系統(tǒng)的安裝包對(duì)應(yīng)的下載圖標(biāo)，如右圖所示。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器yx.ityxb

.co

m下載VS

Code編輯器的安裝包后，在下載目錄中找到該安裝包，如下圖所示。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器雙擊上圖所示的圖標(biāo)，啟動(dòng)安裝程序，然后按照程序的提示一步一步進(jìn)行操作，直到安裝完成。yx.ityxb

.co

m將VS

Cod

e編輯器安裝成功后，啟動(dòng)該編輯器，即可進(jìn)入VS

Code編輯器的初始界面，如下圖所示。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器yx.ityxb

.co

m將VS

Cod

e

編輯器安裝完成后，該編輯器的默認(rèn)語言是英文。如果想要切換為中文，首先單擊VS

Code

編輯器的初始界面左側(cè)邊欄中的“

”圖標(biāo)按鈕進(jìn)入擴(kuò)展界面，然后在搜索框中輸入關(guān)鍵詞“chine

s

e

”找到中文語言擴(kuò)展，單擊“Ins

ta

ll”按鈕進(jìn)行安裝，如下圖所示。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器2.安裝中文語言擴(kuò)展yx.ityxb

.co

m安裝成功后，需要重新啟動(dòng)VS

Code編輯器，中文語言擴(kuò)展才可以生效。重新啟動(dòng)VSCode編輯器后，VS

Code編輯器的中文界面如下圖所示。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器yx.ityxb

.co

m1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器Vo

la

r擴(kuò)展專門用于為“.vue

”單文件組件（Sing

le-

File

Com

p

one

nt，S

FC）提供代碼高亮顯示和語法支持。該擴(kuò)展僅適用于Vu

e3項(xiàng)目，不僅提供了語法高亮顯示、智能提示、錯(cuò)誤提示、格式化等功能，而且支持多根節(jié)點(diǎn)組件，例如支持將一個(gè)Vu

e文件中的<te

m

p

la

te>、<s

crip

t>、<s

tyle>拆分成3個(gè)窗口，每個(gè)窗口負(fù)責(zé)各自的功能。3.安裝Vo

la

r擴(kuò)展yx.ityxb

.co

mVo

la

r擴(kuò)展的安裝方法與中文語言擴(kuò)展的安裝方法類似。如果想要安裝Vo

la

r擴(kuò)展，可以在擴(kuò)展界面的搜索框中輸入關(guān)鍵詞“Vo

la

r”，搜索到“Vu

e

La

ng

ua

g

e

Fe

a

ture

s(Vo

la

r)”擴(kuò)展后進(jìn)行安裝。需要注意的是，Vu

e

3的組件代碼與Vu

e

2不同，使用的語法提示和高亮插件也不同。在

Vu

e2

中不能使用Vo

la

r擴(kuò)展，而是使用Ve

tur擴(kuò)展，可以在擴(kuò)展界面的搜索框中輸入關(guān)鍵詞“Ve

tur”，搜索到“Ve

tur”擴(kuò)展后進(jìn)行安裝。yx.ityxb

.co

m1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器在實(shí)際開發(fā)中，開發(fā)一個(gè)項(xiàng)目需要先創(chuàng)建項(xiàng)目文件夾，以便于保存項(xiàng)目中的文件。接下來演示如何創(chuàng)建項(xiàng)目文件夾，如何使用VSCode編輯器打開項(xiàng)目文件夾，以及如何創(chuàng)建一個(gè)HTML5文檔，具體步驟如下。1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器4.使用VS

Code編輯器yx.ityxb

.co

m在D:\vue目錄下創(chuàng)建一個(gè)項(xiàng)目文件夾cha

p

te

r0

1

。創(chuàng)建項(xiàng)目文件夾1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器步驟1yx.ityxb

.co

m步驟3步驟2在VS

Code編輯器的菜單欄中選擇“文件”→“打開文件夾”命令，然后選擇

cha

p

te

r0

1文件夾。打開文件夾后的界面效果如下圖所示。打開文件夾1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器步驟1yx.ityxb

.co

m步驟3步驟2單擊按鈕①，輸入要?jiǎng)?chuàng)建的文件名稱inde

x.htm

l，即可創(chuàng)建該文件。此時(shí)創(chuàng)建的inde

x.htm

l文件是一個(gè)空白的文檔，在該文檔中，輸入“htm

l:5

”，VS

Code會(huì)給出智能提示，然后按“Ente

r”鍵會(huì)自動(dòng)生成一個(gè)HTML5文檔結(jié)構(gòu)。創(chuàng)建HTM

L5文檔1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器步驟1yx.ityxb

.co

m步驟3步驟2創(chuàng)建HTM

L5文檔>>接上頁1.3.1

Vis

u

a

l

S

t

u

d

io

Co

d

e編輯器<

!DOCTYPE

htm

l><

htm

l

la

ng

=

"

e

n"

><

he

a

d

><

m

e

t

a

cha

rs

e

t=

"

UTF-8

"

><

m

e

t

a

http

-e

q

u

iv=

"

X-UA-Com

pa

t

ib

le

"

co

nte

nt=

"

IE=

e

d

g

e

"

><

m

e

t

a

na

m

e

=

"

vie

w

p

o

rt

"

co

nte

nt=

"

w

id

th=

d

e

vice

-w

id

th,

init

ia

l-s

ca

le

=

1

.0

"

><

t

it

le

>

Do

cum

e

nt<

/

t

it

le

><

/

he

a

d

><

b

o

d

y><

/

b

o

d

y><

/

htm

l>步驟1yx.ityxb

.co

m步驟3步驟2掌握Node.js環(huán)境的搭建，能夠獨(dú)立完成Node.js

的下載和安裝1.3.2

No

d

e.js環(huán)境yx.ityxb

.co

m先定一個(gè)小目標(biāo)！Node.js

是一個(gè)基于V8引擎的Ja

va

Scrip

t運(yùn)行環(huán)境，提供了一些功能性的API，例如文件操作API、網(wǎng)絡(luò)通信API等。yx.ityxb

.co

m1.3.2

No

d

e.js環(huán)境打開Node.js官網(wǎng)，找到Node.js下載地址，如下圖所示。1.3.2

No

d

e.js環(huán)境yx.ityxb

.co

m從Node.js官方網(wǎng)站可以看出，Node.js有兩個(gè)版本，分別是1

6.1

7.0

LTS和1

8.9.0

Curre

nt。其中，LTS

（LongTe

rm

S

upp

ort）表示提供長期支持的版本，只進(jìn)行Bug修復(fù)且版本穩(wěn)定，因此有很多用戶在使用；Curre

nt表示當(dāng)前發(fā)布的新版本，增加了一些新特性，有利于進(jìn)行

新技術(shù)的開發(fā)使用。這里選擇下載1

6.1

7.0

LTS版本。下載完成后會(huì)得到一個(gè)名稱為node-v1

6.1

7.0-x6

4.m

s

i的安裝包文件。yx.ityxb

.co

m1.3.2

No

d

e.js環(huán)境雙擊node-v1

6.1

7.0-x6

4.m

s

i安裝包圖標(biāo)，會(huì)彈出安裝向?qū)Т翱?，如下圖所示。安裝過程全部使用默認(rèn)值。1.3.2

No

d

e.js環(huán)境yx.ityxb

.co

m安裝完成后，測(cè)試一下Node.js是否安裝成功，具體步驟如下。1.3.2

No

d

e.js環(huán)境yx.ityxb

.co

m按“Windo

w

s+R”組合鍵，打開“運(yùn)行”對(duì)話框，輸入“cm

d”。在“運(yùn)行”對(duì)話框中輸入“cm

d”后的效果如下圖所示。打開“運(yùn)行”對(duì)話框1.3.2

No

d

e.js環(huán)境步驟1yx.ityxb

.co

m步驟3步驟21.3.2

No

d

e.js環(huán)境打開命令提示符單擊“確定”按鈕或者直接按“Ente

r”鍵，會(huì)打開命令提示符，如下圖所示。步驟1步驟3yx.ityxb

.co

m步驟2在命令提示符中，輸入命令“node-v”，其中v是ve

rs

ion的簡(jiǎn)寫，表示版本。命令輸入完成后，按“Ente

r”鍵，查看當(dāng)前安裝的Node.js版本，如下圖所示。查看No

d

e.js版本若想要退出命令提示符，可以輸入“e

xit”并按“Ente

r”鍵，或者單擊右上角的“×”關(guān)閉按鈕退出。1.3.2

No

d

e.js環(huán)境步驟1yx.ityxb

.co

m步驟3步驟2掌握常見的包管理工具的使用方法，能夠應(yīng)用np

m

和ya

rn

相關(guān)命令下載、升級(jí)、卸載包1.3.3

常見的包管理工具yx.ityxb

.co

m先定一個(gè)小目標(biāo)！什么是包呢？1.3.3

常見的包管理工具yx.ityxb

.co

m在Vu

e項(xiàng)目開發(fā)中，經(jīng)常需要通過各種第三方的包（pa

cka

g

e

）來擴(kuò)展項(xiàng)目的功能?！鞍笨梢岳斫鉃閷⒁幌盗心K化的代碼打包起來，形成一個(gè)包，以便于使用。項(xiàng)目中所用到的包稱為項(xiàng)目的依賴（de

p

e

nde

ncy）。yx.ityxb

.co

m1.3.3

常見的包管理工具什么是包管理工具呢？1.3.3

常見的包管理工具yx.ityxb

.co

m為了方便管理第三方的包，需要用到包管理工具。包管理工具可以讓開發(fā)人員輕松地下載、升級(jí)、卸載包。假設(shè)在項(xiàng)目開發(fā)時(shí)，沒有包管理工具，若想使用第三方包，則每次都需要下載、解壓后才可以使用，非常煩瑣。而使用包管理工具，只需通過一條命令即可下載并安裝第三方包，非常方便，而且還可以指定下載的版本等。yx.ityxb

.co

m1.3.3

常見的包管理工具1.3.3

常見的包管理工具n

p

mnp

m

是Node.js

默認(rèn)的包管理工具，它可以安裝、共享、分發(fā)代碼，還可以管理項(xiàng)目的依賴關(guān)系。yx.ityxb

.co

my

a

rnya

rn

是Node.js的包管理工具，它是一個(gè)高效、安全和可靠的包管理工具，ya

rn能夠提高包的安裝效率，節(jié)約安裝時(shí)間。常見的包管理工具在安裝Node.js時(shí)會(huì)自動(dòng)安裝相應(yīng)版本的npm

，不需要單獨(dú)安裝，使用“npm-v”命令可以查看np

m的版本，如下圖所示。1.3.3

常見的包管理工具1

.

npmyx.ityxb

.co

m使用np

m包管理工具可以解決以下場(chǎng)景的需求。①

從npm服務(wù)器下載別人編寫的第三方包到本地使用。②

從npm服務(wù)器下載并安裝別人編寫的命令行程序到本地來使用。③

將自己編寫的包或命令行程序上傳到npm服務(wù)器供別人使用。yx.ityxb

.co

m1.3.3

常見的包管理工具npm提供了快速操作包的命令，只需要執(zhí)行簡(jiǎn)單的命令就可以很方便地對(duì)第三方包進(jìn)行管理。npm中常用的命令如下。

np

m

ins

ta

ll包名：可簡(jiǎn)寫為“np

m

i包名”，用于為項(xiàng)目安裝指定名稱的包。如果加上-g選項(xiàng)，則會(huì)把包安裝為全局包，否則只安裝到本項(xiàng)目中。如果省略包名，則npm會(huì)根據(jù)當(dāng)前目錄下的pa

cka

g

e.js

on文件中保存的依賴信息為項(xiàng)目安裝所有的包。

np

m

unins

ta

ll包名：用于卸載指定名稱的包。

np

m

up

da

te包名：用于更新指定名稱的包。yx.ityxb

.co

m1.3.3

常見的包管理工具在下載np

m安裝包時(shí)，下載速度可能會(huì)比較慢，這是因?yàn)樘峁┌姆?wù)器在國外。為了加快包的下載速度，建議將下載源切換成國內(nèi)鏡像服務(wù)器。為np

m設(shè)置鏡像地址的具體命令如下。yx.ityxb

.co

m1.3.3

常見的包管理工具np

m

co

nfig

s

e

t

re

g

is

t

ry

http

s

:/

/

re

g

is

t

ry.np

m

m

irro

r.co

m為了驗(yàn)證鏡像地址是否設(shè)置成功，可以通過如下命令進(jìn)行驗(yàn)證。np

m

co

nfig

g

e

t

re

g

is

t

ry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。1.3.3

常見的包管理工具在使用ya

rn之前，需要先確保計(jì)算機(jī)中已經(jīng)安裝了Node.js環(huán)境，再使用npm命令安裝ya

rn，安裝命令如下。np

m

ins

t

a

ll

ya

rn

-g為了驗(yàn)證ya

rn是否安裝成功，可以通過“ya

rn-v”命令查看ya

rn的版本信息，如下圖所示。2

.

ya

rnyx.ityxb

.co

m為了提高下載ya

rn安裝包的速度，也可以將ya

rn的下載源切換成國內(nèi)鏡像服務(wù)器。為ya

rn設(shè)置鏡像地址的具體命令如下。yx.ityxb

.co

m1.3.3

常見的包管理工具ya

rn

co

nfig

s

e

t

re

g

is

t

ry

http

s

:/

/

re

g

is

t

ry.np

m

m

irro

r.co

m為了驗(yàn)證鏡像地址是否設(shè)置成功，可以通過如下命令進(jìn)行驗(yàn)證。ya

rn

co

nfig

g

e

t

re

g

is

t

ry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。下面列舉ya

rn中一些常用的命令。

ya

rn

ins

ta

ll：可簡(jiǎn)寫為ya

rn，用于為項(xiàng)目安裝所有包。如果提供了-g選項(xiàng)，則會(huì)把包安裝為全局包，否則只安裝到本項(xiàng)目中。

ya

rn

re

m

ove包名：用于卸載指定名稱的包。

ya

rn

up包名：用于更新指定名稱的包。

ya

rn

a

dd包名：用于添加指定名稱的包。yx.ityxb

.co

m1.3.3

常見的包管理工具1.3.3

常見的包管理工具ya

rn與np

m包管理工具的區(qū)別yx.ityxb

.co

m①

使用np

m安裝同一個(gè)包時(shí)，每次安裝都需要重新下載，而ya

rn會(huì)緩存每個(gè)下載過的包，再次使用時(shí)無須重復(fù)下載。②

np

m按照隊(duì)列安裝每個(gè)包，也就是說，必須要等到當(dāng)前包安裝完成后，才能繼續(xù)安裝后面的包，而ya

rn可以利用并行下載的方式提高資源利用率，安裝速度更快。③

np

m

的輸出信息比較冗長，在執(zhí)行npm

ins

ta

ll命令時(shí)，命令提示符里會(huì)輸出所有被安裝的包的信息。相比之下，ya

rn的輸出信息比較簡(jiǎn)潔，只輸出必要的信息，同時(shí)也提供了一些命令供開發(fā)者查詢額外的安裝信息。使用Vit

e創(chuàng)建Vu

e

3項(xiàng)目1

.4了解什么是Vite

，能夠說出Vite的基本概念1.4.1

什么是Vit

eyx.ityxb

.co

m先定一個(gè)小目標(biāo)！1.4.1

什么是Vit

e什么是Vite？yx.ityxb

.co

m1.4.1

什么是Vit

eVite

（讀音：/vit/）是一個(gè)輕量級(jí)、運(yùn)行速度快的前端構(gòu)建工具，它支持模塊熱替換（Hot

Module

Re

p

la

ce

m

e

nt，HMR），可以即時(shí)、準(zhǔn)確地更新模塊，當(dāng)代碼修改時(shí)無須重新加載頁面或清除應(yīng)用程序狀態(tài)。Vite默認(rèn)安裝的插件比較少，隨著開發(fā)過程中依賴的增多，需要額外進(jìn)行配置。yx.ityxb

.co

m在Vu

e

3出現(xiàn)前，Vu

e

2

一般使用Vu

e

CLI創(chuàng)建。Vu

e

CLI基于We

b

pa

ck構(gòu)建并配置項(xiàng)目，在項(xiàng)目啟動(dòng)時(shí)，We

b

pa

ck需要從入口文件索引整個(gè)項(xiàng)目的文件，編譯成一個(gè)或多個(gè)單獨(dú)的.js文件。雖然We

b

pa

ck對(duì)代碼進(jìn)行了拆分，但是仍可能一次生成所有路由下的編譯后的文件，導(dǎo)致服務(wù)啟動(dòng)時(shí)間隨著項(xiàng)目的復(fù)雜度增加而呈指數(shù)式的增長。而Vite改進(jìn)了這一點(diǎn)，在項(xiàng)目啟動(dòng)時(shí)，Vite會(huì)對(duì)模塊代碼進(jìn)行按需加載，啟動(dòng)速度更快。因此，當(dāng)使用Vu

e

3開發(fā)新項(xiàng)目時(shí)，推薦使用Vite進(jìn)行創(chuàng)建。yx.ityxb

.co

m1.4.1

什么是Vit

eVite不需要以命令的方式安裝和卸載，只要安裝了npm或ya

rn，就可使用Vite的相關(guān)命令創(chuàng)建項(xiàng)目。Vite會(huì)作為項(xiàng)目的開發(fā)依賴保存在項(xiàng)目的node

_m

odule

s目錄中。需要注意的是，Node.js必須為1

4.1

8及以上版本時(shí)才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常運(yùn)行。另外，Node.js的1

4、1

6等更新版本不再支持Window

s

7操作系統(tǒng)，推薦使用Window

s

1

0等新版操作系統(tǒng)。yx.ityxb

.co

m1.4.1

什么是Vit

e掌握Vu

e

3項(xiàng)目的創(chuàng)建方法，能夠使用

Vite

創(chuàng)建Vu

e

3項(xiàng)目1.4.2

創(chuàng)建Vu

e

3項(xiàng)目yx.ityxb

.co

m先定一個(gè)小目標(biāo)！Vite提供了兩種創(chuàng)建項(xiàng)目的命令。手動(dòng)創(chuàng)建項(xiàng)目的命令通過模板自動(dòng)創(chuàng)建項(xiàng)目的命令1.4.2

創(chuàng)建Vu

e

3項(xiàng)目yx.ityxb

.co

m使用np

m

或ya

rn包管理工具都可以搭配Vite

手動(dòng)創(chuàng)建項(xiàng)目，具體命令如下。yx.ityxb

.co

m#使用np

m

cre

a

t

e命令創(chuàng)建項(xiàng)目np

m

cre

a

te

vite

@

la

te

s

t#使用ya

rncre

a

te命令創(chuàng)建項(xiàng)目ya

rn

cre

a

te

vite上述命令展示了兩種包管理工具用于創(chuàng)建Vite項(xiàng)目，在使用時(shí)任選其一即可。npm

cre

a

te和ya

rn

cre

a

te

命令后跟一個(gè)vite包名，表示初始化Vite

。vite

@

la

te

s

t表示在np

m中安裝最新版本的Vite。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目1.手動(dòng)創(chuàng)建項(xiàng)目的命令ya

rncre

a

te

vite執(zhí)行上述命令后，Vite會(huì)提示填寫項(xiàng)目名稱，如下圖所示。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目步驟1步驟3步驟4步驟2手動(dòng)創(chuàng)建Vu

e項(xiàng)目打開命令提示符，切換到D:\vue\cha

pte

r0

1

目錄，執(zhí)行如下命令。yx.ityxb

.co

m使用vite-proje

ct作為項(xiàng)目名稱后，Vite會(huì)提示選擇創(chuàng)建項(xiàng)目所使用的框架，如下圖所示。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目手動(dòng)創(chuàng)建Vu

e項(xiàng)目步驟1yx.ityxb

.co

m步驟2步驟3步驟4選擇好框架后，Vite會(huì)提示選擇一個(gè)變體，如下圖所示。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目手動(dòng)創(chuàng)建Vu

e項(xiàng)目步驟2步驟3步驟4yx.ityxb

.co

m步驟11.4.2

創(chuàng)建Vu

e

3項(xiàng)目手動(dòng)創(chuàng)建Vu

e項(xiàng)目選擇好變體后，Vite

會(huì)提示項(xiàng)目創(chuàng)建完成，如下圖所示。步驟1步驟2步驟3步驟4yx.ityxb

.co

m1.4.2

創(chuàng)建Vu

e

3項(xiàng)目項(xiàng)目創(chuàng)建完成后的提示命令，具體命令解釋如下。cd

vite

-p

ro

je

ctya

rnya

rn

de

vyx.ityxb

.co

m#切換到項(xiàng)目目錄#安裝項(xiàng)目的全部依賴#啟動(dòng)服務(wù)上述命令中，ya

rn

de

v命令是Vu

e

3項(xiàng)目中pa

cka

g

e.js

on文件里面s

crip

t

s節(jié)點(diǎn)配置的命令。除了ya

rn

de

v命令外，還有2個(gè)常用命令ya

rn

b

uild和ya

rn

p

re

vie

w

，它們分別表示構(gòu)建生產(chǎn)環(huán)境項(xiàng)目和構(gòu)建本地預(yù)覽環(huán)境項(xiàng)目。這3個(gè)命令實(shí)際上都是別名，是為了便于開發(fā)人員記憶。當(dāng)執(zhí)行這3個(gè)命令時(shí)，ya

rn會(huì)讀取當(dāng)前項(xiàng)目的pa

cka

g

e.js

on文件中的命令配置，找到真正的命令并執(zhí)行。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目yx.ityxb

.co

mVu

e

3項(xiàng)目的pa

cka

g

e.js

on文件中的命令配置如下。"s

crip

t

s

"

:

{"

de

v":

"

vite","

b

uild":

"

viteb

uild","

p

re

vie

w

"

:

"

vite

p

re

vie

w

"},上述配置中，de

v是vite

的別名，b

uild是vite

b

uild的別名，pre

vie

w

是vitepre

vie

w

的別名。也就是說，當(dāng)執(zhí)行ya

rn

de

v時(shí)，實(shí)際執(zhí)行的命令是ya

rn

vite。別名可以自定義，如果修改了別名，在執(zhí)行命令時(shí)需要使用修改后的別名。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目yx.ityxb

.co

m項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，具體如下。VITE

v

4

.1

.4

re

a

dyin

4

4

1

m

s亣

Loca

l:

http

:/

/

1

2

7

.0

.0

.1

:5

1

7

3

/1.4.2

創(chuàng)建Vu

e

3項(xiàng)目在瀏覽器中打開http://1

2

7.0.0.1:5

1

7

3/，如下圖所示。yx.ityxb

.co

m通過模板自動(dòng)創(chuàng)建項(xiàng)目的方式相對(duì)簡(jiǎn)單，它通過附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和模板，省去了填寫項(xiàng)目名稱、選擇框架和變體等環(huán)節(jié)。Vite提供了許多模板預(yù)設(shè)，可以創(chuàng)建

Vite+Re

a

ct+TS

、Vite+Vu

e

、Vite+Sve

lte

等類型的項(xiàng)目。通過附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和模板的基本語法格式如下。yx.ityxb

.co

m#使用np

m

6或更低版本創(chuàng)建項(xiàng)目np

m

cre

a

te

vite

@

la

te

s

t<項(xiàng)目名稱>--te

m

p

la

te<模板名稱>#使用np

m

7或更高版本創(chuàng)建項(xiàng)目np

m

cre

a

te

vite

@

la

te

s

t<項(xiàng)目名稱>----te

m

p

la

t

e<模板名稱>#使用ya

rncre

a

te命令創(chuàng)建項(xiàng)目ya

rn

cre

a

te

vite<項(xiàng)目名稱>--te

m

p

la

te<模板名稱>1.4.2

創(chuàng)建Vu

e

3項(xiàng)目2.通過模板自動(dòng)創(chuàng)建項(xiàng)目的命令打開命令提示符，切換到D:\vue\cha

p

te

r0

1目錄，使用ya

rn創(chuàng)建一個(gè)基于Vite+Vu

e

模板且項(xiàng)目名稱為he

llo-vite的項(xiàng)目。yx.ityxb

.co

mya

rn

cre

a

te

vite

he

llo

-vite

--te

m

p

la

te

vue1.4.2

創(chuàng)建Vu

e

3項(xiàng)目執(zhí)行上述命令后，he

llo-vite項(xiàng)目創(chuàng)建完成的效果如下圖所示。1.4.2

創(chuàng)建Vu

e

3項(xiàng)目yx.ityxb

.co

m在項(xiàng)目創(chuàng)建完成后，給出了一些提示命令，需要執(zhí)行這些命令才能完成項(xiàng)目啟動(dòng)，具體命令如下。cdhe

llo

-viteya

rnya

rn

de

vyx.ityxb

.co

m#切換到項(xiàng)目目錄#安裝項(xiàng)目的全部依賴#啟動(dòng)服務(wù)1.4.2

創(chuàng)建Vu

e

3項(xiàng)目項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，具體如下。VITE

v

4

.1

.4

re

a

dy

in

4

4

1

m

s亣

Lo

ca

l:

http

:/

/

1

2

7

.0

.0

.1

:5

1

7

3

/在瀏覽器中打開http://1

2

7.0.0.1:5

1

7

3/，頁面效果與手動(dòng)創(chuàng)建Vu

e

3項(xiàng)