Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第02章 Vue 腳手架功能

第2章Vue腳手架功能課件V1.0

教學(xué)內(nèi)容第一節(jié)

腳手架核心功能第二節(jié)安裝腳手架過程第三節(jié)使用腳手架創(chuàng)建項(xiàng)目知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握最新版本VueCLI的功能掌握VueCLI的安裝方式和常用指令掌握VueCLI編譯和發(fā)布的方式知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用2C02-01腳手架核心功能

C02-02安裝腳手架過程1、安裝VueCLI2、常用VueCLI指令C02-03使用腳手架創(chuàng)建項(xiàng)目1、創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目2、修改組件代碼3、項(xiàng)目發(fā)布“腳手架”是指幫助搭建工程的工具的通俗說法，Vue框架對(duì)應(yīng)的工具就是VueCLI。

VueCLI是一個(gè)基于Vue.js快速開發(fā)的系統(tǒng)，新版的VueCLI由@vue/cli模塊實(shí)現(xiàn)交互式的項(xiàng)目開發(fā)，通過@vue/cli-service-global模塊實(shí)現(xiàn)零配置原型開發(fā)，運(yùn)行時(shí)依賴@vue/cli-service模塊實(shí)現(xiàn)更新、升級(jí)和擴(kuò)展功能，它包含下列幾個(gè)核心功能。CLI包CLI服務(wù)CLI插件腳手架核心功能

安裝VueCLI之前，先必須安裝最新版本的Node.js，推薦V10以上的版本，可以進(jìn)入Node.js官網(wǎng)/en/，下載相應(yīng)的安裝包文件。如圖所示。安裝VueCLI

圖中，create指令用于創(chuàng)建一個(gè)新的基于VueCLI的項(xiàng)目，add指令用于向已創(chuàng)建的項(xiàng)目中加入插件，serve指令用于在瀏覽器下以開發(fā)者模式啟動(dòng)配置完成的項(xiàng)目，build指令則用于在瀏覽器下以生產(chǎn)模塊編譯配置完成的項(xiàng)目。常用VueCLI指令使用指令創(chuàng)建項(xiàng)目

打開提示符窗口，在光標(biāo)閃爍處，輸入指令：vuecreateshop再按回車鍵，就會(huì)通過VueCLI工具，自動(dòng)創(chuàng)建一個(gè)名稱為shop的項(xiàng)目，如圖所示。創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目執(zhí)行項(xiàng)目

項(xiàng)目創(chuàng)建后，可以在命令提示符窗口中，輸入指令，先進(jìn)入項(xiàng)目文件夾中，再在瀏覽器中啟動(dòng)該項(xiàng)目，如圖所示。創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目分析項(xiàng)目結(jié)構(gòu)

使用VisualStudio打開項(xiàng)目文件夾shop后，它的結(jié)構(gòu)相對(duì)于Vue2之前的版本來說，更加簡(jiǎn)單，包含三個(gè)重要的文件夾，如圖所示。創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目node_modules文件夾用于保存各類依賴的包文件和模塊src文件夾用于保存項(xiàng)目中全部的組件和各類加載的文件public文件夾用于保存公共圖標(biāo)和全局文件

在項(xiàng)目中，默認(rèn)生成的代碼可以進(jìn)行任意修改，接下來通過一個(gè)簡(jiǎn)單的實(shí)例，加深對(duì)文件和代碼結(jié)構(gòu)的理解能力。效果如圖所示。修改組件代碼

創(chuàng)建項(xiàng)目的最終目標(biāo)是為了發(fā)布項(xiàng)目，即將項(xiàng)目部署到服務(wù)器上，通過外網(wǎng)訪問這些編譯后的項(xiàng)目頁(yè)面，最終實(shí)現(xiàn)項(xiàng)目發(fā)布的功能；使用VueCLI4相比之前