第2章Vue.js環(huán)境搭建與項目創(chuàng)建2.1

HTML5語義化2.2

HTML5常用標簽2.3

實例一：感恩母親節(jié)了解Vue.js的多種安裝方法掌握Vue.js開發(fā)工具的安裝熟悉Vue.js調(diào)試工具的安裝掌握Vue.js項目創(chuàng)建的技巧引言在開發(fā)Vue前端頁面之前，需要搭建好開發(fā)和測試環(huán)境，良好的開發(fā)環(huán)境對于穩(wěn)定開發(fā)者以及提高生產(chǎn)效率都有著不可忽視的作用。在創(chuàng)建Vue項目之前，需要先搭建良好的Vue.js開發(fā)環(huán)境，包括安裝Vue.js，理解Vue.js多種安裝方式的不同之處，選擇并安裝合適的開發(fā)工具，進而提高開發(fā)效率，安裝為調(diào)試項目服務的調(diào)試工具vue-devtools等，使開發(fā)者在完成環(huán)境搭建的基礎上掌握Vue項目創(chuàng)建的方法。2.1安裝Vue.jsCDN方式安裝Vue.jsNPM方式安裝Vue.js使用VueCLI方式安裝Vue.js使用Vite方式安裝Vue.js2.1安裝Vue.js1.CDN的定義CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡）是構(gòu)建在現(xiàn)有網(wǎng)絡基礎之上的智能虛擬網(wǎng)絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡擁塞，提高用戶訪問響應速度和命中率。2.1.1

CDN方式安裝Vue.js2.1安裝Vue.js2.CDN方式安裝Vue.js的語法格式使用CDN方式引入Vue.js，需要選擇一個可提供Vue.js鏈接的穩(wěn)定CDN服務商。開發(fā)者可借助script標簽實現(xiàn)CDN方式安裝Vue.js，語法格式如下所示。2.1.1

CDN方式安裝Vue.js<scriptsrc="/vue@next"></script>2.1安裝Vue.js3.CDN方式安裝Vue.js的優(yōu)缺點（1）優(yōu)點不需要下載和安裝Vue.js，可以直接使用CDN文件，減少了本地文件占用和維護的成本。（2）缺點依賴于CDN服務商，可能會出現(xiàn)CDN服務不穩(wěn)定或者CDN文件更新不及時的情況。2.1.1

CDN方式安裝Vue.js2.1安裝Vue.js1.NPM的定義NPM（nodepackagemanager）是一個Node.js的包管理器和分發(fā)器。NPM是隨同Node.js一起安裝的，是Node.js社區(qū)中非常流行、支持大量第三方模塊的包管理器。Node.js集成了NPM，使用NPM方式安裝Vue框架時，可直接安裝Node.js實現(xiàn)NPM的免安裝。2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js2.NPM方式安裝Vue.js的命令代碼NPM方式安裝Vue.js的命令代碼如下所示。#安裝最新穩(wěn)定版$npminstallvue@next2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js3.CNPM方式安裝Vue.js的命令代碼由于NPM的官方鏡像是國外的服務器，而開發(fā)者在國內(nèi)訪問國外的服務器非常慢，本書推薦開發(fā)者使用淘寶的NPM鏡像CNPM，安裝CNPM的命令代碼如下所示。npminstall-gcnpm--registry=2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js4.安裝項目所需模塊完成CNPM安裝后，開發(fā)者可使用cnpm命令安裝項目所需模塊，具體命令代碼如下所示。cnpminstall模塊名稱2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js5.NPM方式安裝Vue.js的優(yōu)缺點（1）優(yōu)點可以自由選擇Vue的版本和更新方式；可以使用Vue的腳手架工具VueCLI，方便快捷地創(chuàng)建和管理Vue項目；可以和其他NPM包管理器配合使用，如Webpack或Browserify，方便進行模塊打包和依賴管理。（2）缺點需要下載和安裝Node.js和NPM環(huán)境，增加了本地文件占用和維護成本。安裝速度可能會受到網(wǎng)絡環(huán)境的影響。2.1.1

CDN方式安裝Vue.js2.1安裝Vue.jsVue提供了一個官方的腳手架VueCLI，它可以快速搭建一個應用，它為現(xiàn)代前端提供了batteries-included的構(gòu)建設置。只需幾分鐘就可以運行起應用，并帶有熱重載、保存時lint校驗，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。使用VueCLI創(chuàng)建項目要求開發(fā)者具備一定的Node.js及相關構(gòu)建工具的基礎知識，本書將在第9章將詳細介紹腳手架的安裝及使用。2.1.3

VueCLI安裝2.1安裝Vue.jsVite是Vue的作者開發(fā)的一個面向現(xiàn)代瀏覽器的，更加輕量、快捷的前端構(gòu)建工具，Vite可為前端工作者提供良好的開發(fā)體驗。Vite采用了基于瀏覽器原生ES6模塊導入的方式，利用瀏覽器去解析import，可實現(xiàn)閃電般地冷服務器啟動。本書將在第9章詳細介紹Vite的安裝與使用。2.1.4

Vite安裝2.2Vue.js的開發(fā)與調(diào)試工具Web前端開發(fā)工具安裝VSCode安裝vue-devtoolsVisualStudioCode（簡稱VSCode）是微軟開發(fā)的一個輕量級代碼編輯器，軟件功能非常強大，界面簡潔明晰，操作方便快捷，設計十分人性化。VSCode支持常見的語法提示、代碼高亮、Git等功能，具有開源、免費、跨平臺、插件擴展豐富、運行速度快、占用內(nèi)存少，開發(fā)效率高等特點，網(wǎng)頁開發(fā)中經(jīng)常會使用到該軟件，非常靈活方便。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具進入VSCode官方頁面，下載VSCode的安裝包進行安裝，官方頁面如下圖所示。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具VSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode插件的安裝VSCode作為編程IDE，可以方便地安裝一些插件進行功能擴展。VSCode插件可美化代碼格式，提供語法檢查功能，提高代碼開發(fā)效率，接下來將詳細介紹Vue開發(fā)中常用的4個插件。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（1）Chinese中文VSCode默認使用英文顯示界面，但VSCode允許開發(fā)者將默認語言改為中文。首先打開VSCode，按下“Ctrl+Shift+P”的組合鍵，然后在搜索框中輸入config并選中ConfigureDisplayLanguage，在彈出的語言列表中選中“中文（簡體）”即可。隨后頁面詢問開發(fā)者是否確定更改顯示語言并重啟VSCode，此時單擊ReStart按鈕即可完成安裝，頁面上的文字將自動轉(zhuǎn)換為中文格式。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（2）Vetur插件Vetur插件支持vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數(shù)主流的前端開發(fā)腳本和插件，如Sass和TypeScript等。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（3）ESLint代碼檢測校驗ESLint是一個用來識別JavaScript并且按照規(guī)則給出報告的代碼檢測工具，使用它可以避免低級語法錯誤或統(tǒng)一代碼風格，可以有效地控制項目中代碼的質(zhì)量。ESLint插件的安裝步驟與Vetur相同，在搜索框中輸入ESLint即可查找到該插件并進行安裝。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（4）CodeRunner快捷運行CodeRunner可以使開發(fā)者在VSCode中以一種快捷的方式運行各類代碼、代碼片段。CodeRunner插件的安裝步驟與Vetur相同，在搜索框中輸入CodeRunner即可查找到該插件并進行安裝。安裝完成后，開發(fā)者可在代碼編輯窗口中單擊右鍵選擇RunCode選項運行代碼，或在代碼編輯窗口中按下“Ctrl+Alt+N”的組合鍵運行代碼。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具vue-devtools是一款基于GoogleChrome瀏覽器、用于調(diào)試Vue應用的瀏覽器擴展。vue-devtools可以顯示虛擬DOM樹和組件信息，可以極大地提高前端開發(fā)人員的調(diào)試效率。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools1.下載壓縮包打開瀏覽器，進入vue-devtools的官方下載頁面。單擊Code菜單下的DownloadZIP按鈕即可下載vue-devtools安裝包。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools2.解壓安裝包vue-devtools安裝包下載成功后需要解壓該壓縮包，解壓后的文件名為devtools-main。進入devtools-main文件夾，打開命令提示符窗口。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools3.下載第三方依賴使用vue-devtools需要下載第三方依賴，一般使用npminstall下載第三方依賴。由于npm的安裝速度較低，建議借助yarn下載第三方依賴。執(zhí)行npminstall-gyarn命令安裝yarn。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools3.下載第三方依賴執(zhí)行yarninstall命令下載第三方依賴，下載成功后，執(zhí)行yarnrunbuild命令編譯vue-devtools源程序。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools4.Google瀏覽器的開發(fā)者模式（1）打開Google瀏覽器，單擊右上角的“”圖標，并在下方彈出的快捷菜單中選中“更多工具”→“擴展程序”選項。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools4.Google瀏覽器的開發(fā)者模式（2）開Google瀏覽器的擴展程序后，即可進入擴展程序管理頁面。需要確保Google瀏覽器的開發(fā)者模式處于打開狀態(tài)，如果處于未打開狀態(tài)，則需要單擊開發(fā)者模式右側(cè)的單選按鈕開啟開發(fā)者模式。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools5.安裝vue-devtools開啟Google瀏覽器的開發(fā)者模式后，單擊“加載已解壓的擴展程序”按鈕并選擇devtools-main文件夾下的packages\shell-chrome文件夾，即可安裝vue-devtools擴展。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools2.3實訓：創(chuàng)建第一個Vue.js程序菜系介紹頁面結(jié)構(gòu)簡圖實現(xiàn)菜系介紹頁面效果中國餐飲文化歷史悠久，菜肴在烹飪中有許多流派，并最終形成了以魯、川、粵、蘇、閩、浙、湘、徽為主的“八大菜系”。菜系介紹頁面由川菜的代表菜名稱、圖片及詳情介紹組成，其中代表菜名稱、圖片及詳情介紹均是響應式的。2.3實訓：創(chuàng)建第一個Vue.js程序2.3.1

菜系介紹頁面結(jié)構(gòu)簡圖實現(xiàn)步驟:使用Vue創(chuàng)建程序非常簡單，具體步驟如下所示。第1步，安裝Vue.js庫并使用Vue.createApp()方法創(chuàng)建一個應用程序?qū)嵗?。?步，在data()函數(shù)中定義頁面中需要渲染的數(shù)據(jù)，將data()中的數(shù)據(jù)通過{{}}插值語法展示在頁面中。第3步，調(diào)用mount()方法在指定的DOM元素上掛載應用程序?qū)嵗母M件，實現(xiàn)數(shù)據(jù)的雙向綁定，具體代碼如例2-1所示。2.3實訓：創(chuàng)建第一個Vue.js程序2.3.2實現(xiàn)菜系介紹頁面效果<body><!--DOM容器--><divid="app"><h1>{{style}}-{{repDishes}}</h1><div><imgsrc="../ch02/img/tofu.jpg"alt=""style="width:250px;height:200px;"></div><p>{{detail}}</p></div><!--CDN方式引入vue--><scriptsrc="/vue@next"></script><script>//創(chuàng)建一個應用程序?qū)嵗?/p>

constvm=Vue.createApp({//該函數(shù)返回數(shù)據(jù)對象data(){return{

主體代碼

例2-1style:'川菜',repDishes:'麻婆豆腐',detail:'此菜成菜麻、辣、鮮、香、燙、脆、嫩、酥，將川菜麻辣味型的特點展現(xiàn)的淋漓盡致。'