Vue(1):用Vue-cli構建Vue3項目
使用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倍、體積更小、更以維護、原生支援度更高。
