Vue.js 超詳細入門與項目實戰（微課視頻版）課件 第02章 Vue 腳手架功能_第1頁
Vue.js 超詳細入門與項目實戰（微課視頻版）課件 第02章 Vue 腳手架功能_第2頁
Vue.js 超詳細入門與項目實戰（微課視頻版）課件 第02章 Vue 腳手架功能_第3頁
Vue.js 超詳細入門與項目實戰（微課視頻版）課件 第02章 Vue 腳手架功能_第4頁
Vue.js 超詳細入門與項目實戰（微課視頻版）課件 第02章 Vue 腳手架功能_第5頁
已閱讀5頁，還剩8頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

教學內容第一節

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

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

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

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

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

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論