從零搭建vue3.0專案架構（附帶程式碼、步驟詳解）
前言：
GitHub上我開源了vue-cli、vue-cli3兩個庫，文章末尾會附上GitHub倉庫地址。這次把2.0的重新寫了一遍，優化了一下。然後按照2.0的功能和程式碼，按照vue3.0的語法，完全重寫了一遍。雖然名字叫cli，其實兩個庫都是基於vue-cli建立的。做這個的目的是為了工作中快速啟動專案，畢竟切片打包、less、axios、vuex、router、UI框架、基礎檔案目錄、許可權，這些都是基操，當然專案不同，還是要做些調整的。這兩個專案的master分支都是最基礎的東西，裡面還包含了幾個自定義的元件。vue-cli3 單獨切出來一個app分支，這個分支會不定時的新增一些功能，比如hightCharts的甘特圖，three.js，使用者可以自定義的大屏展示等等一些功能，現在還啥都沒有，看時間吧，有時間就會更新，會優先寫vue3.0 的，2.0 的再說吧。也希望大家能幫我完善這個庫，畢竟為了快速啟動專案才搭建的，自然越優秀越好。app分支也是希望能有一些好的功能模組案例，為大家拓展思路。
目錄：
3、安裝ant-design-vue，安裝less、安裝dayjs
5、vue3的一些新語法講解
6、總結（原始碼的GitHub地址也在最後）
一、用 vue-cli 建立專案
npm uninstall vue-cli -g 解除安裝老版本cli
npm i @vue/cli -g 安裝新版本cli
npm install -g @vue/cli-init 安裝cli
vue -V 檢視cli的版本號，注意大小寫
vue create vue
按上述步驟操作即可，我的vue-cli版本號是 4.5.11。這裡注意一下，建立專案的的時候需要手動選擇建立2.0還是3.0的專案，預設是2.0，腳手架是向下相容的。
二、安裝路由
npm install vue-router@4 安裝路由，4.0版本的
我的路由版本是4.0.12
三、完善目錄結構，建立配置檔案vue.config.js
目錄和vue.config.js都貼了一下，具體的還是去GitHub直接看原始碼，這裡不多佔用篇幅了。這裡app.less設定了顏色變數，統一了整個系統的顏色，後期如果做主題，也方便維護。其中antd、vuex等後面再說。
四、安裝ant-design-vue，安裝less、安裝dayjs
npm i --save ant-design-vue@next 安裝 antd3.x的版本 3.0還在不斷更新的階段
npm install babel-plugin-import --save-dev 引入babel， 配置 babel.config 檔案，antd元件的按需載入
npm install --save @ant-design/icons-vue 需要的話，引入antd的icon
npm install less --save 引入less
npm i less[email protected] 注意版本號
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 安裝外掛，vue.config.js 檔案，增加less檔案全域性配置，主要配置全域性變數
npm install dayjs --save 並全域性配置下 dayjs， 如果報錯，重灌一下ant-design-vue,dayjs比moment更加輕量
UI框架我用了ant-design-vue，這個大家隨意根據自己需求和喜好來。但是要提醒一下，antd目前2.0版本做了對vue3的支援，而且是穩定的，現在正在做3.0版本的升級，專案中用的都是是3.0的寫法，穩定性有待考究。再就是因為antd需要dayjs，這裡也用了dayjs，用法大同小異，但是他非常小。專案中用了antd的按需載入，不用的元件還是不要引入的好，有需要的在antdUse.js檔案引入即可。按需載入的方法官方文件有詳述，需要修改babel.config.js。antd3的icon變成了通過元件的形式引入，使用起來有點繁瑣，也需要注意。
安裝less的babel時，注意版本號，高版本的會報錯。我這裡定義了全域性的less變數，統一專案的各級別字型大小、各種顏色等等
五、安裝vuex、axios
npm install vuex@next --save 安裝vuex，並配置
npm install axios 安裝 axios，並做統一配置
axios沒有什麼變化。vuex建議詳細看一下官方文件3.0到4.0的遷移文件。這裡我簡單列幾個重要的，新版本中，用 createStore 建立例項；通過 useStore 獲取當前的vuex例項。具體寫法看程式碼。
六、vue3的一些新語法
vue3參考了react hooks的實現方式，所以寫法和程式設計思路很像，這裡非常建議看一下尤雨溪大佬的這篇文章，點我跳轉這裡他對自己升級的前因後果做了很詳細闡述，看完會對這次升級有比較清晰的認知。這次更新主要是對元件公共邏輯的提取複用和對單一元件邏輯組織做了很大的改動，當然根本動力還是對typescript的支援。ts是大勢所趨。從我個人而言，這次改動很大，使vue3對新手來說，上手難度非常高。對程式設計師要求也提高了很多。很容易出現程式碼一鍋粥，邏輯混亂的情況。呃 ...還有就是.value 和 props. 的寫法太囉嗦，我是不是要求有點高了，手動狗頭，哈哈。
但是，用多了之後你會這很好用、很方便。vue3.0資料流向很清晰、還保留了資料響應式的老優點。巴適得很啊。博主最開始是用react的，剛開始轉用vue的時候很不習慣，有寫法的原因，最大的還是資料不清晰，所有資料都繫結在this上，可讀性低了好多。
。。。扯遠了，迴歸正題，直接說說按照我的理解，vue3有哪些變化，應該怎麼去用。
首先，vue3支援typescript了，鼓掌、撒花。。。建議學習一下，當然用不用都行，毫無影響。只能說ts作為js的超集，徹底斬斷了js的放蕩不羈愛自由，變得中規中矩起來。也讓程式碼更加規範，更加可掌控。不過很有意思的是，vue3徹底斬斷了vue2的條條框框，徹底釋放自由了，變數、方法直接在setup裡面定義，邏輯也都在裡面編寫，再也不需要像以前那樣在規定的地方宣告監聽屬性、宣告方法了。這個專案都是用js寫的，我的ts水平也一般，再就是怕大家看不習慣，畢竟現階段ts的普及還是有點低的。
下面會列舉一些變化，有原始碼，有註釋，直接拉專案跑一下的好，這裡只是簡單提一些關鍵的變化。
main.js檔案。通過 createApp 方法建立vue例項，通過app.config.globalProperties.例項原型上新增全域性屬性。可建立多例項，也不怕汙染。
report.js檔案。通過 defineComponent 宣告元件，配合 setup 這個組合函式完成元件邏輯的開發，具體寫法看原始碼report.js這個檔案。
setup（props, context） 這個組合函式，直接替代了vue2.0 computed watch 生命週期 methods等整一套寫法。所有的邏輯，都在這個函式裡面實現。所以，建議統一寫法，雖然以前的寫法也是支援的，個人建議要麼之前那套，要麼一點都不要。不要出現setup和methods同時出現的情況。
1、setup beforeCreate和created已經不需要了，setup的觸發時機其實就是在beforeCreate之前。他僅在例項初始化的時候執行一次，以後再不會執行，setup是同步。
2、兩個引數，props是父級元件傳遞的資料，實時更新。不可以解構，會丟失監聽。可以用torefs將props轉為元件內部的監聽資料。但是我個人感覺這不是個好方法，我還是喜歡 props. 的形式使用，這樣程式碼一目瞭然，很清楚你用的資料到底是props傳遞的還是當前元件宣告的。資料流向很清晰； context是個物件，可以解構使用，包含emit等屬性，沒什麼好說的，看看文件就好。
3、setupthis是沒用的，因為還沒return呢，所以各依賴包為了支援這一特性，都做了相應的更新 router vuex 都有專門的方法，通過引入的方式獲取到例項。可以看一下下圖的程式碼。
4、計算屬性、監聽屬性、生命週期。這些都是以方法的形式注入到元件中，生命週期的名字變了一些，功能方面並沒有變化，監聽屬性也是，寫法變化了。文件寫的很清楚，這裡，我就不多做贅述了。其次還增加了一些新的api。ref reactive宣告響應式變數；provide / inject 父子元件互通；watchEffect自動監聽，不太推薦，他會自動監聽所有的響應式變數，任何有變化了都會觸發回撥，有點類似於update。當然也會導致頻繁執行的問題。一些簡單的頁面可以用，其他情況還是用watch手動標記需要監聽的變數最好。
七、總結
Vue3的新屬性非常多，多研究看文件。不過目前社群還不是很完善，個人感覺到2022年的年底，應該會改善很多，大部分依賴都會支援。
最後，如果大家覺得這個專案寫的還可以的，給個star，對程式碼有問題，也希望大佬們能修正一下，有好的元件或者效果都可以分享一下。萬一專案有需求就用上了呢，哈哈。