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

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

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

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

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

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

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

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

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

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

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

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