使用Vue-cli構建Vue3專案
1、檢查node版本
node -v
以上node版本位14.15.0滿足Vue3專案的建立條件（Vu3需要node 版本8以上）為什麼需要安裝node?
vue專案需要在node執行環境下進行、VUE專案==檔案型別是.vue他是需要被編譯成.js檔案，才可以被瀏覽器識別
2、檢視npm版本
npm -v
npm 是node內建的資源管理器、這裡使用淘寶的映象源
設定映象源：npm config set registry 檢視映象源： npm config get registry
3、安裝Vue-cli
npm install -g @vue/cliy
安裝過程中可能出現卡頓情況、Ctrl+C停止後可重新執行命令
以上情況表示安裝成功。在建立專案之前一起來了解一下Vue CLI 和 Vue的區別
4、Vue CLI 和 Vue的區別
- Vue CLI 和 Vue的區別 ：腳手架是一個基於 Vue.js 進行快速開發的完整系統,通過@vue/cli 實現快速搭建標準化專案的腳手架
- Vue的版本和VueCLI的版本的關係 ：Vue版本不受腳手架版本的影響 使用VueCLI構建專案過程，可以根據需求選擇相應版本的Vue
5、建立Vue3專案
vue create vue3-demo
Default（[Vue 2].....）預設表示Vue2的專案
Default（[Vue 3].....）預設表示Vue3的專案
Manually select features 使用者手動選擇
以上我選擇第二個並建立專案、建立命令
vue create vue3-demo
vue3-demo建立的專案名稱、等待建立成功後如下（左上角為vue3專案結構）相關命令可檢視README.md詳情
6、執行並編譯vue3專案並瀏覽器檢視
cd vue3-demo --切換專案路徑 npm run serve --注意此處是serve而不是server
如上圖示識基礎的Vue3專案建立成功
7、Vue3專案結構解析
- node_modules:用於存放我們專案的各種依賴，比如axios等等，沒有moudles檔案，專案就沒法執行，可以使用 npm install進行專案依賴的安裝
- public:用於存放靜態檔案
- public/index.html:是一個模板檔案，作用是生成專案的入口檔案，webpack打包的js,css也會自動注入到該頁面中。我們瀏覽器訪問專案的時候就會預設開啟生成好的index.html
- src:我們存放各種vue檔案的地方
- src/assets:用於存放各種靜態檔案，如圖片等
- src/compnents：用於存放我們的公共元件，如 header、footer等
- src/APP.VUE:主vue模組 引入其他模組，app.vue是專案的主元件，所有頁面都是在app.vue下切換的
- src/main.js:入口檔案，主要作用是初始化vue例項，同時可以在此檔案中引用某些元件庫或者全域性掛在一些變數
- gitignore:git上傳需要忽略的檔案格式
- babel.config.js:是一個工具鏈，主要用於在當前和較舊的瀏覽器或環境中將ECMAScript 2015+程式碼轉換為JavaScript的向後相容版本
- package-lock.json:是在 npm install時候生成一份檔案，用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號
- package.json:模組基本資訊專案開發所需要模組，版本，專案名稱
8、Vue3 VS Vue2生命週期
與 2.x 版本生命週期相對應的組合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
其中setup是compositon Api在Vue3中的入口
9、總結
以上是展示使用Vue-cli快速搭建專案（也稱之為搭建腳手架）、vue3相對vue2速度更快1.5至2倍、體積更小、更以維護、原生支援度更高。