溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何搭建vue3.0項目架構，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
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-cli 創建vue3.0項目, 記得選擇vue3
按上述步驟操作即可，我的vue-cli版本號是 4.5.11。這里注意一下，創建項目的的時候需要手動選擇創建2.0還是3.0的項目，默認是2.0，腳手架是向下兼容的。
npm install vue-router@4 安裝路由，4.0版本的
我的路由版本是4.0.12
目錄和vue.config.js都貼了一下，具體的還是去GitHub直接看源碼，這里不多占用篇幅了。這里app.less設置了顏色變量，統一了整個系統的顏色，后期如果做主題，也方便維護。其中antd、vuex等后面再說。
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-loader@4.1.0 注意版本號 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變量，統一項目的各級別字體大小、各種顏色等等
npm install vuex@next --save 安裝vuex，并配置 npm install axios 安裝 axios，并做統一配置
axios沒有什么變化。vuex建議詳細看一下官方文檔3.0到4.0的遷移文檔。這里我簡單列幾個重要的，新版本中，用 createStore創建實例；通過 useStore 獲取當前的vuex實例。具體寫法看代碼。
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同時出現的情況。
setup beforeCreate和created已經不需要了，setup的觸發時機其實就是在beforeCreate之前。他僅在實例初始化的時候運行一次，以后再不會執行，setup是同步。
兩個參數，props是父級組件傳遞的數據，實時更新。不可以解構，會丟失監聽。可以用torefs將props轉為組件內部的監聽數據。但是我個人感覺這不是個好方法，我還是喜歡 props. 的形式使用，這樣代碼一目了然，很清楚你用的數據到底是props傳遞的還是當前組件聲明的。數據流向很清晰； context是個對象，可以解構使用，包含emit等屬性，沒什么好說的，看看文檔就好。
setupthis是沒用的，因為還沒return呢，所以各依賴包為了支持這一特性，都做了相應的更新 router vuex 都有專門的方法，通過引入的方式獲取到實例。可以看一下下圖的代碼。
計算屬性、監聽屬性、生命周期。這些都是以方法的形式注入到組件中，生命周期的名字變了一些，功能方面并沒有變化，監聽屬性也是，寫法變化了。文檔寫的很清楚，這里，我就不多做贅述了。其次還增加了一些新的api。ref reactive聲明響應式變量；provide / inject 父子組件互通；watchEffect自動監聽，不太推薦，他會自動監聽所有的響應式變量，任何有變化了都會觸發回調，有點類似于update。當然也會導致頻繁執行的問題。一些簡單的頁面可以用，其他情況還是用watch手動標記需要監聽的變量最好。
以上是“如何搭建vue3.0項目架構”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
