Vuejs基礎(chǔ)與應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)（微課版） 單元4教案

《Vue.Js基礎(chǔ)與應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)（微課版）》配

套教學(xué)教案

單元4

課時(shí)內(nèi)容Vue項(xiàng)目創(chuàng)建與運(yùn)行授課時(shí)間課時(shí)6

?熟悉創(chuàng)建Vue項(xiàng)目的多種方法

?認(rèn)知Vue項(xiàng)目的組成結(jié)構(gòu)與自定義配置

教學(xué)目標(biāo)?認(rèn)知Vuc項(xiàng)目的運(yùn)行流程

?能基于“Nodc.js+Vuc.js+MySQL”實(shí)現(xiàn)前后端分離的登錄與注冊(cè)功能，創(chuàng)建

Vite項(xiàng)目實(shí)現(xiàn)多種方式瀏覽與操作圖片

教學(xué)重點(diǎn)創(chuàng)建Vue項(xiàng)目的多種方法

教學(xué)難點(diǎn)創(chuàng)建Vue項(xiàng)目的多種方法

1.教學(xué)思路：介紹創(chuàng)建Vue項(xiàng)目相關(guān)的依賴包安裝工具和相應(yīng)的配置文件。

教學(xué)設(shè)計(jì)

2.教學(xué)手段：多媒體展示+軟件操作。

教學(xué)內(nèi)容

4.1熟悉創(chuàng)建Vue項(xiàng)目的多種方法

webpack作為目前最流行的項(xiàng)目打包工具之一，被廣泛應(yīng)用于項(xiàng)目的溝建和開(kāi)發(fā)過(guò)程中。在Vue的項(xiàng)目

中，webpack同樣發(fā)揮著舉足輕重的作用，例如打包壓縮、異步加載、模塊化管理等。

4.1.1創(chuàng)建基于webpack模板的Vue項(xiàng)目

在創(chuàng)建一個(gè)Vue項(xiàng)目之前，先要確保本地計(jì)算機(jī)安裝了長(zhǎng)期支持版的Node環(huán)境及包管理工具npm,在

命令行中執(zhí)行以下命令：

#查看node版本

node-v

#查看npm版本

npm-v

如果成功顯示版本號(hào)，說(shuō)明本地計(jì)算機(jī)具備node的運(yùn)行環(huán)境，用戶可以使用npm來(lái)安裝和管理新建項(xiàng)目

的依賴項(xiàng)。如果沒(méi)有或報(bào)錯(cuò)，則需要去node官網(wǎng)進(jìn)行node的下載及安裝操作。安裝完node后，便可以開(kāi)始

進(jìn)行后續(xù)的構(gòu)建工作。

在創(chuàng)建項(xiàng)目之前應(yīng)先完成vue-cli的全局安裝。執(zhí)行以下命令全局安裝@vue/cli?init:

npmig@vuc/cli或npminstallg@vuc/cli

npmi-g@vue/cli-init

【實(shí)例4-1］創(chuàng)建基于webpack模板的Vue項(xiàng)目01-vue-project

【操作要求】

創(chuàng)建基于webpack模板的Vue項(xiàng)目01-vue-project。

【實(shí)現(xiàn)過(guò)程】

1.打開(kāi)命令行與更改當(dāng)前文件

打開(kāi)Windows操作系統(tǒng)的命令行，在命令行中使用cd命令改變當(dāng)前文件夾為創(chuàng)建Vue項(xiàng)目的文件夾。

2.輸入創(chuàng)建基于webpack模板的Vue項(xiàng)目的命令

在命令行中執(zhí)行以下命令，創(chuàng)建基于webpack模板的Vue項(xiàng)目：

vueinitwebpackO1-vue-project

上述命令中，01-vue-project表示Vue的項(xiàng)目名稱?？梢愿鶕?jù)實(shí)際情況自定義項(xiàng)目名稱，項(xiàng)目名稱不要使

用大寫字母。創(chuàng)建Vue項(xiàng)目后，在當(dāng)前文件夾下會(huì)新建O1-vue-project文件夾。

3.輸入或選擇配置選項(xiàng)

開(kāi)始執(zhí)行創(chuàng)建項(xiàng)目的命令，首先顯示“downloadingtemplate”提示信息，模板下載完成后，有以下多個(gè)配置

選項(xiàng)需要進(jìn)行選擇。

(1)輸入項(xiàng)目名稱

在提示信息“？Projectname(O1-vue-project)"后面輸入自定義的項(xiàng)目名稱，如果使用默認(rèn)名稱(例如01-

vue-project),則直接按【Enter】鍵。

(2)輸入項(xiàng)目描述

在提示信息“？Projectdescription(AVue.jsproject)”后面輸入項(xiàng)目描述內(nèi)容，如果使用默認(rèn)內(nèi)容(AVue.js

project),則直接按［Enter］鍵。

(3)輸入項(xiàng)目創(chuàng)建者姓名

在提示信息“？Author”后面輸入項(xiàng)目創(chuàng)建者姓名，如果不需要(即創(chuàng)建者姓名為空),則直接按【Enter】

鍵。

(4)選擇構(gòu)建方式

提示信息“？Vuebuild”下面有兩個(gè)選擇：

>Runtime+Compiler:recommendedformostusers

Runtime-only:about6KBlighterrrin+gzip,buttemplates(oranyVue-specificHTML)areONLYallowedin.vue

files-renderfunctionsarerequiredelsewhere

按【1】鍵或［1］鍵進(jìn)行選擇，按【Enter】鍵即選定該選項(xiàng)。這里推薦選擇第一個(gè)選項(xiàng),該選項(xiàng)適合大

多數(shù)用戶使用。

(5)選擇是否安裝Vue的路由插件

如果需要安裝Vue的路由插件，就在提示信息“？Installvue-router?(丫/n)”后輸入字母V,否則就輸入字

坦“N”。建議輸入字母“丫”，然后按［Enter］鍵。

(6)選擇是否使用ESLint檢測(cè)代碼

ESLint是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。這里建議

輸入字母"N”,然后按【Enter】鍵。因?yàn)槿绻斎胱帜?丫”，在對(duì)項(xiàng)目進(jìn)行訓(xùn)試時(shí)，控制臺(tái)界面會(huì)有很多警告信

息，提示格式不規(guī)范，但格式其實(shí)并不影響項(xiàng)目。

在提示信息“？UseESLinttolintyourcode?(丫/n)”后面輸入字母“N”。

(7)選擇是否安裝單元測(cè)試

建議在提示信息“？Setupunittes:s(丫/n)”后面輸入字母“N”，然后按【Enter】鍵。

(8)選擇是否安裝E2E測(cè)試框架Nightwatch

“E2E”就是EndToEnd,也就是所謂的“用戶真實(shí)場(chǎng)景”。這里建議在提示信息“？Setupe2etestswith

Nghtwatch?(丫/n)”后面輸入字母“N”，然后按［Enter］鍵。

(9)確定項(xiàng)目創(chuàng)建后是否要運(yùn)行"npminstall"

這里有以下3個(gè)選項(xiàng)：

?Shouldwerun'npminstall'foryouaftertheprojecthasbeencreated?(recommended)(Usearrowkeys)

>Yes.useNPM

Yes,useYam

No,Iwillhandlethatmyself

按【1】鍵或【1】鍵進(jìn)行選擇，按【Enter】鍵即選定該選項(xiàng)。這里建議選擇"useNPM”選項(xiàng)，然后按【Enter】

鍵。

(10)瀏覽執(zhí)行創(chuàng)建項(xiàng)目過(guò)程中完整的選項(xiàng)結(jié)果

執(zhí)行創(chuàng)建項(xiàng)目過(guò)程中完整的選項(xiàng)結(jié)果如下：

?Projectname01-vue-project

?ProjectdescriptionAVue.jsproject

?Author

?Vuebuildstandalone

?Installvue-router?Yes

?UseESLinttolintyourcode?No

?SetupunittestsNo

?Setupe2etestswithNightwatch?No

?Shouldwerun'npminstall'toryouaftertheprojecthasbeencreated?(recommended)npm

4.下載與安裝項(xiàng)目依賴項(xiàng)

各個(gè)選項(xiàng)的選擇或確認(rèn)完成后，開(kāi)始下載與安裝項(xiàng)目依賴的包，所需的依賴包下載與安裝完成后，命令行

中會(huì)出現(xiàn)以下提示信息：

#Projectinitializationfinished!

Togetstarted:

cd01-vue-project

npmrundev

5.運(yùn)行新創(chuàng)建的項(xiàng)目01-vue-project

在命令行中執(zhí)行cd01-vue-project命令，更改當(dāng)前文件夾為01-vue-project,然后執(zhí)行以下命令，開(kāi)始運(yùn)

行新創(chuàng)建的項(xiàng)目01-vue-project:

npmrundev

以上代碼的意思是運(yùn)行package.json文件的scripts腳本中dev指代的代碼：

webpack-dev-server-inline-progress--configbuild/webpack.dev.conf.js

執(zhí)行上述命令后，如果啟動(dòng)成功，會(huì)看到以下提示信息：

DONECompiledsuccessfullyin1813ms

IYourapplicationisrunninghere:http://localhost:8080

上述信息表示當(dāng)前應(yīng)用已經(jīng)啟動(dòng)，可以在瀏覽器中通過(guò)http:〃localhost:8080進(jìn)行訪問(wèn)。

6.在瀏覽器中瀏覽項(xiàng)目01-vue-project的運(yùn)行結(jié)果

打開(kāi)瀏覽器，在地址欄中輸入網(wǎng)址'http://localhost:8080”,然后按【Enter】鍵，可以看到下圖所示的運(yùn)行結(jié)

果，表示項(xiàng)目成功啟動(dòng)。

WelcometoYourVue.jsApp

EssentialLinks

CoraPocaCommurWyChat

DocsTh嶼Temo面e

Ecosystem

01-vue-project項(xiàng)目的運(yùn)行效果

此時(shí)，在命令行中按【Ctrl+C】組合鍵可以終止項(xiàng)目的運(yùn)行。

7.使用npmrunbuild命令打包項(xiàng)目01-vue-project

修改項(xiàng)目文件夾下config文件夾里的index.js文件中的build節(jié)點(diǎn)，修改后的代碼如下：

assetsPublicPath:

接下來(lái)，使用以下命令部署項(xiàng)目：

npmrunbuild

命令執(zhí)行完成后，命令行中輸出以下提示信息：

Buildcomplete.

Tip:builtfilesaremeanttobeservedoveranHTTPserver.

Openingindex.htmloverfile://won'twork.

項(xiàng)目打包完成后會(huì)生成一個(gè)diSt文件夾，該文件夾就是打包構(gòu)建后的項(xiàng)目文件夾。

dist文件夾入口文件index.html的瀏覽結(jié)果如圖4-1所示。

4.1.2使用vuecreate命令創(chuàng)建vue2.x項(xiàng)目

使用vuecreate命令創(chuàng)建Vue2.x項(xiàng)目之前應(yīng)下載并安裝好vue-cli,然后執(zhí)行以下命令創(chuàng)建vue2.x項(xiàng)

目：

vuecreate<ProjectName>〃項(xiàng)目名稱不支持含大寫字母的駝峰命名規(guī)則

【實(shí)例4-2］使用vuecreate命令創(chuàng)建vue2.x項(xiàng)目02-vue-project

【操作要求】

使用vuecreate命令創(chuàng)建vue2.x項(xiàng)目02-vue-project。

【實(shí)現(xiàn)過(guò)程】

1.輸入創(chuàng)建vue2.x項(xiàng)目的命令

在命令行中輸入以下命令創(chuàng)建vue2.x項(xiàng)目：

vuecreate02-vue-project

2.輸入或選擇配置選項(xiàng)

創(chuàng)建vue2.x項(xiàng)目的命令輸入完畢，按［Enter］鍵，開(kāi)始執(zhí)行上述命令。此時(shí)出現(xiàn)一系列的選擇項(xiàng)，

用戶可以根據(jù)自己的需要進(jìn)行選擇。如果只想構(gòu)建一個(gè)基礎(chǔ)的Vue項(xiàng)目，那么使用BabekRouter.Vuex.

CSSPre-processors就足夠了，最后選擇包管理工具npmoryarn。

創(chuàng)建項(xiàng)目過(guò)程中完整的配置選項(xiàng)如下：

VuecliV4.5.14

?Pleasepickapreset:Manuallyselectfeatures

?Checkthefeaturesneededforyourproject:ChooseVueversion,Babel,Router.CSSPre-processors.Linter

?ChooseaversionofVue.jsthatyouwanttostarttheprojectwith2.x

?Usehistorymodeforrouter?(Requiresproperserversetupforindexfallbackinproduction)No

?PickaCSSpre-processor(PostCSS,AutoprefixerandCSSModulesaresjpportedbydefault):Sass/SCSS(with

dart-sass)

?Pickalinter/formatterconfig:Standard

?Pickadditionallintfeatures:Lintonsave

?WheredoyoupreferplacingconfigforBabel,ESLint,etc.?Indedicatedconfigfiles

?Savethisasapresetforfutureprojects?No

3.下載與安裝依賴項(xiàng)

創(chuàng)建項(xiàng)目的各個(gè)選項(xiàng)選擇完成后，開(kāi)始下載與安裝項(xiàng)目依賴項(xiàng)。

4.運(yùn)行02-vue-project項(xiàng)目

在命令行中執(zhí)行以下命令更改當(dāng)前文件夾：

cd02-vue-project

接著在命令行中執(zhí)行以下命令開(kāi)始啟動(dòng)項(xiàng)目：

npmrunserve

啟動(dòng)項(xiàng)目時(shí)會(huì)出現(xiàn)以下提示信息：

>02-vue-project@0.1.0serve

>vue-cli-serviceserve

INFOStartingdevelopmentserver...

98%afteremittingCopyPlugin

DONECompiledsuccessfullyin2869ms

Apprunningat:

-Local:http://localhost:8080/

-Network::8080/

Notethatthedevelopmentbuildisnotoptimized.

Tocreateaproductionbuild,runnpmrunbuild.

5.在瀏覽器中瀏覽項(xiàng)目02-vue-project的運(yùn)行結(jié)果

打開(kāi)瀏覽器，在地址欄中輸入“http:〃localhost:8080/\按［Enter］鍵即可看到下圖所示的運(yùn)行結(jié)果，表示

項(xiàng)目成功啟動(dòng)。

HomeIAbout

WelcometoYourVue.jsApp

Foragudeandrecpesonhowtoconfigurecustomizethisproject

chockoutthovuc-didocuiDontation

InstalledCL1Plugins

EssentialLinks

小殳即ForumGfiffimuoJtiMhuitefttofi

Ecosystem

02-vue-project項(xiàng)目的運(yùn)行結(jié)果

4.1.3使用vuecreate命令創(chuàng)建vue3.x項(xiàng)目

本小節(jié)主要介紹vue3.x項(xiàng)目搭建及其項(xiàng)目結(jié)構(gòu)和配置的知識(shí)。在項(xiàng)目正式創(chuàng)建之前，應(yīng)先完成vue-cli腳

手架工具的安裝。使用腳手架工具可以直接生成一個(gè)項(xiàng)目的整體架構(gòu)，幫助開(kāi)發(fā)者編寫Vue的基礎(chǔ)代碼。

【實(shí)例4-3］使用vuecreate命令創(chuàng)建vue3.x項(xiàng)目03-vue-project

【操作要求】

使用vuecreate命令創(chuàng)建vue3.x項(xiàng)目03-vue-project,項(xiàng)目03-vue-project的組成結(jié)構(gòu)如圖所示。

?demoO-K)3-vue-project

>■node_modules

▼pubk

■favicon.ko

</>ndex.html

&src

>■assets

-Cicomponents

■HeloWorld.vue

BApp.vue

Zmain.js

L0.gitignore

值babel.config.js

E3package-lock.json

對(duì)packdoe.Json

■README.md

項(xiàng)目03-vue-project的組成結(jié)構(gòu)

【實(shí)現(xiàn)過(guò)程】

1.輸入創(chuàng)建vue3.x項(xiàng)目的命令

在命令行中輸入以下命令創(chuàng)建vue3.x項(xiàng)目：

vuecreate03-vue-project

2.輸入或選擇配置選項(xiàng)

創(chuàng)建vue3.x項(xiàng)目的命令輸入完畢，按【Enter】鍵，開(kāi)始執(zhí)行上述命令，首先出現(xiàn)的提示信息如下：

VuecliV4.5.14

?Pleasepickapreset:(Usearrowkeys)

Default((Vue2]babel,eslint)

>Default(Vue3)([Vue3]babel,eslint)

Manuallyselectfeatures

按【1】鍵或[4]鍵進(jìn)行選擇,這里選擇“Default(Vue3)([Vue3]babel,eslint)”選項(xiàng),即提供babel和

eslint支持,然后按[Enter]鍵,提示信息如下:

?Pleasepickapreset:Default(Vue3)([Vue3]babel,eslint)

3.下載與安裝依賴項(xiàng)

由于選擇了Vue3的默認(rèn)配置，所以直接開(kāi)始下載與安裝依賴項(xiàng)，命今行輸出以下信息：

GeneratingREADME.md...

□Successfullycreatedproject03-vue-project.

□Getstartedwiththefollowingcommands:

$cd03-vue-project

$npmrunserve

此時(shí)可以斷定，Vue3項(xiàng)目的依賴項(xiàng)已成功安裝完成。

4.運(yùn)行03-vue-project項(xiàng)目

在命令行中執(zhí)行以下命令更改當(dāng)前文件夾：

cd03-vue-project

在命令行中執(zhí)行以下命令開(kāi)始啟動(dòng)項(xiàng)目：

npmrunserve

啟動(dòng)項(xiàng)目時(shí)會(huì)出現(xiàn)以下提示信息：

>03-vue-project@0.1.0serve

>vue-cli-serviceserve

INFOStartingdevelopmentserver...

98%afteremittingCopyPlugin

DONECompiledsuccessfullyin2098ms

Appiunninyat.

-Local:http://localhost:8080/

-Network::8080/

Notethatthedevelopmentbuildisnotoptimized.

Tocreateaproductionbuild,runnpmrunbuild.

5.在瀏覽器中瀏覽項(xiàng)目03-vue-project的運(yùn)行結(jié)果

打開(kāi)瀏覽器，在地址欄中輸入“http:〃localhost:8080/”，按【Enter】鍵即可看到頁(yè)面內(nèi)容。

4.1.4利用可視化界面創(chuàng)建Vue項(xiàng)目

除了使用上述命令進(jìn)行行構(gòu)建外，vue-cli3.x還提供了可視化的操作界面創(chuàng)建Vue項(xiàng)目。

【實(shí)例4-4】使用可視化操作界面創(chuàng)建vue項(xiàng)目04-vue-project

【操作要求】

使用可視化的操作界面創(chuàng)建vue項(xiàng)目04-vue-projecto

【實(shí)現(xiàn)過(guò)程】

1.開(kāi)啟圖形化界面

在指定文件夾下輸入以下命令開(kāi)啟圖形化界面：

vueui

執(zhí)行該命令，此時(shí)會(huì)出現(xiàn)以下提示信息：

□StartingGUI...

□Readyonhttp://localhost:8000

2.進(jìn)入【Vue項(xiàng)目管理器】頁(yè)面

稍等片刻后，瀏覽器會(huì)自動(dòng)打開(kāi)【項(xiàng)目?jī)x表盤】頁(yè)面（網(wǎng)址為http://lccalhost:8000/dashboard）,在該頁(yè)

面左上方的下拉菜單中或狀態(tài)欄上單擊【返回項(xiàng)目管理器】按鈕口，進(jìn)入圖4-4所示的【Vue項(xiàng)目管理器】頁(yè)

3.確定項(xiàng)目名稱

在【Vue項(xiàng)目管理器】頁(yè)面中單擊【創(chuàng)建】按鈕，進(jìn)入【創(chuàng)建新項(xiàng)目】頁(yè)面的【詩(shī)情】選項(xiàng)卡。選擇項(xiàng)目

文件夾，這里輸入“D:\vuetest”，在項(xiàng)目名稱輸入框中輸入項(xiàng)目名稱，這里輸入“04-vue-project”。

4.選擇一套預(yù)設(shè)

在【創(chuàng)建新項(xiàng)目】頁(yè)面中單擊【下一步】按鈕，進(jìn)入【創(chuàng)建新項(xiàng)目】頁(yè)面的【預(yù)設(shè)】選項(xiàng)卡，在該選項(xiàng)卡

中選擇一套預(yù)設(shè)（即一套定義好的插件和配置），這里選中“默認(rèn)[Vue2]ba:）el,eslim”預(yù)設(shè),如圖所示。

選擇"默認(rèn)（Vue2]babeLeslint"預(yù)設(shè)

5.創(chuàng)建Vue項(xiàng)目

在【創(chuàng)建新項(xiàng)目】頁(yè)面的【預(yù)設(shè)】選項(xiàng)卡中單擊【創(chuàng)建項(xiàng)目】按鈕，開(kāi)始創(chuàng)建Vue項(xiàng)目，頁(yè)面中顯示“正

在創(chuàng)建項(xiàng)目”的提示信息。項(xiàng)目成功創(chuàng)建后會(huì)彈出下圖所示的【項(xiàng)目?jī)x表盤】頁(yè)面，該頁(yè)面上方顯示"歡迎來(lái)到

新項(xiàng)目！”的提示信息，狀態(tài)欄顯示項(xiàng)目創(chuàng)建成功的提示信息，同時(shí)顯示項(xiàng)目所在文件夾與項(xiàng)目名稱。

【項(xiàng)日儀表盈】頁(yè)面

在【Vue項(xiàng)目管理器】頁(yè)面也可以直接導(dǎo)入現(xiàn)有的項(xiàng)目。

使用可視化操作的方法創(chuàng)建項(xiàng)目在一定程度上降低了構(gòu)建和使用的難度，項(xiàng)目創(chuàng)建或?qū)氤晒蟊憧梢赃M(jìn)

入項(xiàng)目進(jìn)行可視化管理。在整個(gè)管理界面中，可以為新創(chuàng)建的項(xiàng)目添加一些項(xiàng)目依賴項(xiàng)，安裝CLI提供的插件，

例如安裝@vue/cli-plugin-babel插件，添加插件的頁(yè)面如圖所示。同時(shí)，逐可以配置相應(yīng)插件的配置項(xiàng)，進(jìn)行

代碼的編譯、熱更新、檢查等。

添加插件的頁(yè)面

4.1.5使用Ste搭建Vue3.x項(xiàng)目

Vite是一種新型的前端構(gòu)建工具，最初是配合Vue3.0一起使用的，后來(lái)適配了各種前端項(xiàng)目，目前提供

/Vue.React、Preact框架模板。Vite也提供，使用npm或yam生成項(xiàng)目結(jié)構(gòu)的方式。

【實(shí)例4-5］使用Vite搭建Vue3.x項(xiàng)目05-vue-project

【操作要求】

使用Vite搭建Vue3.x項(xiàng)目05-vue-project,項(xiàng)目05-vue-project的蛆成結(jié)構(gòu)如圖所示。

dewoOO^tte-proKct

>■.vtCOdt

>■node.nodJes

>?Mk

▼fiawponcrtt

■MdoWorfdz

■*PP2

島gognore

0ndex.htM

3adge."

■?<￡A?C.md

-3tt.c

項(xiàng)目05-vue-project的組成結(jié)構(gòu)

【實(shí)現(xiàn)過(guò)程】

1.準(zhǔn)備項(xiàng)目環(huán)境

先要確保本機(jī)所用的Node.js版本為12.X.0或更高，在命令行中使月node-v命令就可以查看node的

版本。

執(zhí)行以下命令全局安裝create-vite-app:

npmi-gcreate-vite-app

2.開(kāi)始創(chuàng)建Vite項(xiàng)目

進(jìn)入創(chuàng)建V姐項(xiàng)目的文件夾，然后在命令行中執(zhí)行以下命令創(chuàng)建Vite項(xiàng)目：

npminitvite

或者

npminit@vitejs/app

或者

yamcreate@vitejs/app

按照提示信息進(jìn)行操作，首先輸入Vite項(xiàng)目名稱“05-vue-project”，然后選擇framework,創(chuàng)建過(guò)程的選擇

結(jié)果與項(xiàng)目創(chuàng)建成功的提示信息如下：

Needtoinstallthefollowingpackages:

@vitejs/create-app

，Projectname:...05-vue-project

■JSelectaframework:?vue

，Selectavariant:?vue

ScaffoldingprojectinD:\vuecases\Unit04\05-vue-project...

Done.Nowrun:

cd05-vue-project

npminstall

npmrundev

Vite默認(rèn)不會(huì)讓用戶選擇路由、檢測(cè)語(yǔ)法及測(cè)試單元等，這些需要后期手動(dòng)安裝引入。

3.安裝項(xiàng)目依賴項(xiàng)

在命令行中執(zhí)行以下命令安裝項(xiàng)目依賴項(xiàng)：

cd05-vue-project

npminstall

4.初次啟動(dòng)Vite項(xiàng)目

在命令行中執(zhí)行以下命令初次啟動(dòng)Vite項(xiàng)目：

npmrundev

該命令執(zhí)行完畢，Vite項(xiàng)目啟動(dòng)成功后會(huì)出現(xiàn)以下提示信息：

>05-vue-project@0.0.0dev

>vite

Pre-bundlingdependencies:

vue

(thiswillberunonlywhenyourdependenciesorconfighavechanged)

vitev2.6.14devserverrunningat:

>Local:http://localhost:3000/

>Network:use'-host'toexpose

readyin471ms.

運(yùn)行npmrundev命令時(shí)，會(huì)發(fā)現(xiàn)它比webpack啟動(dòng)的速度快多了。瑯以前用vue-cli腳手架搭建項(xiàng)目的

時(shí)候也有區(qū)別，Vite的默認(rèn)端口是3000。

5.在瀏覽器中瀏覽項(xiàng)目05-vue-project的運(yùn)行結(jié)果

打開(kāi)瀏覽器,在地址欄中輸入“h:tp:〃localhost:3000/",按（Enter］鍵,Vite項(xiàng)目05-vue-project初

次瀏覽效果如圖所示。

Vite項(xiàng)目05-vue-project初次瀏覽效果

6.查看05-vue叩roject項(xiàng)目中主要文件的初始代碼

(1)查看package.json文件的初始代碼

package.json文件的初始代碼如下：

(

"name":"05-vue-project".

"version":"0.0.0",

"scripts":{

"dev":"vite",

"build":"vitebuild".

"serve":"vitepreview"

"dependencies":{

"vue":"A3.2.16"

"devDependencies":{

"@vitejs/plugin-vue":"A1.9.3",

"vite":"A2.6.4"

)

)

(2)查看vite.config.js文件的初始代碼

vite.config.js文件的初始代碼如下：

import{defineConfig}from'vite'

importvuefrom'@vitejs/plugin-vue'

//https://vitejs.dev/config/

exportdefaultdefineConfig({

plugins:[vue()]

})

(3)查看index.html文件的初始代碼

index.html文件的初始代碼如下：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8"/>

<linkrel="icon"href="/favicon.ico"/>

<metaname="viewporCcontent="width=device-width,initial-scale=1.0"t>

<title>ViteApp</title>

</head>

<body>

<divid="app"></div>

<scripttype="module"src=7src/main.js"></script>

</body>

</html>

(4)查看src文件夾中main.js文件的初始代碼

src文件夾中main.js文件的初始代碼如下：

import{createApp}from'vue'

importAppfrom'./App.vue'

createApp(App).mount('#app')

(5)查看src文件夾中App.vue文件的初始代碼

src文件夾中App.vue文件的初始代碼如下：

<scriptsetup>

//ThisstartertemplateisusingVue3<scriptsetup>SFCs

//Checkouthttps://v3.vuejs.Org/api/sfc-script-setup.html#sfc-script-setup

importHelloWorldfrom'./components/HelloWorld.vue'

</script>

<ternplale>

<imgalt="Vuelogo"src="./assets/l>Dgo.png"/>

<HelloWor1dmsg="HelloVue3+Vite"/>

</template>

4.2認(rèn)知Vue項(xiàng)目的組成結(jié)構(gòu)與自定義配置

cli服務(wù)(@vue/cli-service)是一個(gè)開(kāi)發(fā)環(huán)境依賴的服務(wù)，是針對(duì)絕大部分應(yīng)用優(yōu)化過(guò)的內(nèi)部webpack配

置。在一個(gè)vue-cli項(xiàng)目中，@vue/cli-service模塊安裝了一個(gè)名為vue-cli-service的命令。

4.2.1認(rèn)知基于vue-cli2.x的項(xiàng)目組成結(jié)構(gòu)

vueinit命令是vue-cli2.x的初始化方式，可以使用GitHub上面的一些模板來(lái)初始化項(xiàng)目，webpack是

官方推薦的標(biāo)準(zhǔn)模板名?；趘ue-cli2.x創(chuàng)建的項(xiàng)目向3.x遷移只需要把static目錄復(fù)制到public目錄下，老

項(xiàng)目的src目錄覆蓋3.x的src目錄(如果修改了配置，可以查看文檔，用cli3的方法進(jìn)行配置卜

webpack是官方推薦的標(biāo)準(zhǔn)模板名，創(chuàng)建項(xiàng)目的格式如下：

vueinitwebpack＜項(xiàng)目名稱》

4.1.1小節(jié)使用vueinitwebpack命令創(chuàng)建了基于vue-cli2.x的項(xiàng)目01-vue-project,該項(xiàng)目的組成結(jié)構(gòu)及

功能說(shuō)明如下。

項(xiàng)目文件夾

(―node_modules#存放下載依賴的文件夾，用于引入第三方模塊/包

卜src#源代嶼文件夾

|—assets#存放蛆件中的靜態(tài)資源

(—components#存放一些公共組件

|—router#存放所有的路由組件

卜”App.vue#應(yīng)用根主組件

L-main.js#應(yīng)用人口文華

卜“static#存放圖片等靜態(tài)資源

|—.babelrc

J-.editorconfig

卜一.gitignore

J—.postcssrc.js

J-index.html

|"package.json#記錄項(xiàng)目基本信息、包依賴配置信息等

卜“package-lock.json#記錄當(dāng)前狀態(tài)下實(shí)際安裝包的具體來(lái)源和版本號(hào)等

L-README.md#項(xiàng)目描述說(shuō)明的readme文件

package-lock.json文件可以保證其他用戶在使用npminstall命令安裝項(xiàng)目依賴項(xiàng)時(shí)能保證一致。

4.2.2認(rèn)知基于vue-cli2.x的package.json文件

讀者可以掃描二維碼查看【電子活頁(yè)4-5】中項(xiàng)目02-vue-project下package.json文件的代碼，或者從本單

元配套的教學(xué)資源中打開(kāi)對(duì)應(yīng)的文檔查看相應(yīng)內(nèi)容。

可以看到,package.json文件是由一系列鍵值對(duì)構(gòu)成的JSON對(duì)象，每一個(gè)鍵值對(duì)都有其相應(yīng)的作用，例

如scripts腳本命令的配置。在終端啟動(dòng)項(xiàng)目運(yùn)行的npmrunserve命令便是執(zhí)行了scripts配置下的serve項(xiàng)

命令vue-cli-serviceserve，可以在scripts下自己修改或添加相應(yīng)的項(xiàng)目命令。而dependencies和

devDependencies分別為項(xiàng)目生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境的依賴包配置。也就是說(shuō)，■f^@vue/cli-service這樣只用于

項(xiàng)目開(kāi)發(fā)時(shí)的包可以放在devDependencies下，但像vue-router這樣結(jié)合在項(xiàng)目上線代碼中的包應(yīng)該放在

dependencies下。

在package.json文件中的scripts字段指定了vue-cli-service相關(guān)命令，有以下3個(gè)選項(xiàng)。

(1)serve

在命令行中執(zhí)行npmrunserve命令會(huì)啟動(dòng)一個(gè)開(kāi)發(fā)環(huán)境服務(wù)器(基于webpack-dev-server),修改組件

代碼后，會(huì)自動(dòng)替換熱模塊。

(2)build

在命令行中執(zhí)行npmrunbuild命令,該命令成功執(zhí)行后，會(huì)在項(xiàng)目根文件天下自動(dòng)創(chuàng)建一個(gè)dist子文件

夾，項(xiàng)目打包后的文件都位于該文件夾中，JavaScript文件打包后會(huì)自動(dòng)生成后綴為Js和.map的文件。

JavaScript文件是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確定位到哪里的代碼報(bào)錯(cuò)。MAP

文件比較大，其代碼未加密，可以準(zhǔn)確輸出是哪一行哪一列有錯(cuò)。

(3)lint

該選項(xiàng)是使用Eslint進(jìn)行檢查并修復(fù)代碼的規(guī)范，例如，如果main.js文件中包含多個(gè)多余的空格，執(zhí)行

npmrunlint命令后它會(huì)自動(dòng)去除多余空格。

4.2.3基于vue-cli項(xiàng)目的自定義配置

前面使用vue-cli自動(dòng)生成項(xiàng)目，但往往滿足不了實(shí)際開(kāi)發(fā)項(xiàng)目的需求,vue.config.js是一個(gè)可選的配直文

件，如果項(xiàng)目的（和package.json文件同級(jí)的）根文件夾中存在這個(gè)文件，那么它會(huì)被@vue/cli-service自動(dòng)

加載。也可以使用package.json文件中的vue字段，應(yīng)注意這種寫法需要嚴(yán)格遵照J(rèn)SON的格式來(lái)寫。

先創(chuàng)建一個(gè)vue.config.js文件，這個(gè)文件應(yīng)該導(dǎo)出一個(gè)包含了選項(xiàng)的對(duì)象，代碼如下：

module,exports={

//選項(xiàng)

）

常用的配置代碼如下：

module,exports={

//選項(xiàng)

devServer:{

port:8081,//端口號(hào),如果端口號(hào)被占用，會(huì)自動(dòng)加1

host:"localhost",〃主機(jī)名，,真機(jī)

https:false,〃協(xié)議

open:true〃啟動(dòng)服務(wù)時(shí)自動(dòng)打開(kāi)瀏覽用訪問(wèn)

）.

//lintOnSave的默認(rèn)設(shè)置值為true.警告會(huì)被輸出到命令行，但不會(huì)使得短譯失敗

HntOnSave:false,〃lintOnSave設(shè)置為false,則不輸出警告

outputDin"dist",//打包之后所在的文件夾，默認(rèn)值為dist

〃靜態(tài)資源打包之后存放的路徑（相對(duì)于outputDir指定的路徑），默認(rèn)值為assets

assetsDir"assets".

IIindex.html主頁(yè)面打包之后存放的文件夾（相對(duì)于outputDir指定的路徑）

indexPath:"out/index.html",//默認(rèn)值為index.html

productionSourceMap:false,//打包時(shí)不會(huì)生成MAP文件，加快打包速度

filenameHashing:false,//打包時(shí)，靜態(tài)文件不會(huì)生成hash值，一般不要該項(xiàng)

然后在命令行中執(zhí)行以下命令進(jìn)行構(gòu)建：

npmrunbuild

該命令執(zhí)行過(guò)程中，會(huì)輸入以下提示信息：

>02-vue-project@0.1.0build

>vue-cli-servicebuild

|Buildingforproduction...

DONECompiledsuccessfullyin5625ms

FileSizeGzipped

dist\js\chunk-vendors.6702858b.js124.70KiB44.14KiB

dist\js\app.845e835c.js6.09KiB2.22KiB

dist\js\about.e53b89e3.js0.44KiB0.31KiB

dist\css\app.2f20bce4.css0.42KiB0.26KiB

Imagesandothertypesofassetsomitted.

DONEBuildcomplete.Thedistdirectoryisreadytobedeployed.

INFOCheckoutdeploymentinstructionsat/guide/deployment.html

4.2.4認(rèn)知基于vue-cli3.x的項(xiàng)目組成結(jié)構(gòu)

vuecreate命令是vue-cli3.x的初始化方式，目前模板是固定的，模板選項(xiàng)可自由配置，創(chuàng)建出來(lái)的是基于

vue-cli3.x的項(xiàng)目，與基于vue-cli2.x的項(xiàng)目結(jié)構(gòu)不同，配置方法也不同，項(xiàng)目創(chuàng)建格式如下：

vuecreate(項(xiàng)目名稱,

4.1.2小節(jié)使用vuecreate命令創(chuàng)建了基于vue-cli3.x的項(xiàng)目02-vue-project,該項(xiàng)目的組成結(jié)構(gòu)及功能

說(shuō)明如下。

項(xiàng)目文件夾

|—node_modules#存放下載依賴的文件夾，用于引入第三方模塊/包

卜“public#存放不會(huì)變動(dòng)的靜態(tài)文件

|—index.html#主頁(yè)面文件

(—favicon.ico#在瀏覽器上顯示的圖標(biāo)

J-src#源代西文件夾

|—assets#存放蛆件中的靜態(tài)資源

(—components#存放一些公共組件

|—views#存放所有的路由組件

App.vue#應(yīng)用根主組件

L-main.js#應(yīng)用人口文件

H.browserslistrc#指定了項(xiàng)目可兼容的目標(biāo)瀏覽器范圍

H.eslintrc.js#eslint相關(guān)配置

.gitignore#git版本管制忽略的配5S

J-babel.config.js#babel的配置，即ES6語(yǔ)法編譯配置

卜“package-lock.json#記錄當(dāng)前狀態(tài)下實(shí)際安裝包的具體來(lái)源和版本號(hào)等

p-package.json#記錄項(xiàng)目基本信息、包依賴配置信息等

L“README.md#項(xiàng)目描述說(shuō)明的readme文件

文件夾public與src/assets的主要區(qū)別在于：public文件夾中的文件不被webpack打包處理，會(huì)原樣復(fù)

制到項(xiàng)目文件打包后的dist文件夾中。

實(shí)際創(chuàng)建項(xiàng)目時(shí)，由于所選擇的依賴項(xiàng)不同，最后生成的文件夾結(jié)構(gòu)乜會(huì)有所差異。

基于vue-cli3.x創(chuàng)建的項(xiàng)目和基于vue-cli2.x創(chuàng)建的項(xiàng)目是有些區(qū)別的，但基本的用法變化不是特別大。

vue-cli升級(jí)到