手把手教你搭建vue3.0項目架構(gòu)

第手把手教你搭建vue3.0項目架構(gòu)目錄前言：一、用vue-cli創(chuàng)建項目二、安裝路由三、完善目錄結(jié)構(gòu)，創(chuàng)建配置文件vue.config.js四、安裝ant-design-vue，安裝less、安裝dayjs五、安裝vuex、axios六、vue3的一些新語法七、總結(jié)

前言：

GitHub上我開源了vue-cli、vue-cli3兩個庫，文章末尾會附上GitHub倉庫地址。這次把2.0的重新寫了一遍，優(yōu)化了一下。然后按照2.0的功能和代碼，按照vue3.0的語法，完全重寫了一遍。雖然名字叫cli，其實兩個庫都是基于vue-cli創(chuàng)建的。做這個的目的是為了工作中快速啟動項目，畢竟切片打包、less、axios、vuex、router、UI框架、基礎(chǔ)文件目錄、權(quán)限，這些都是基操，當(dāng)然項目不同，還是要做些調(diào)整的。這兩個項目的master分支都是最基礎(chǔ)的東西，里面還包含了幾個自定義的組件。vue-cli3單獨切出來一個app分支，這個分支會不定時的添加一些功能，比如hightCharts的甘特圖，three.js，用戶可以自定義的大屏展示等等一些功能，現(xiàn)在還啥都沒有，看時間吧，有時間就會更新，會優(yōu)先寫vue3.0的，2.0的再說吧。也希望大家能幫我完善這個庫，畢竟為了快速啟動項目才搭建的，自然越優(yōu)秀越好。app分支也是希望能有一些好的功能模塊案例，為大家拓展思路。

一、用vue-cli創(chuàng)建項目

npmuninstallvue-cli-g卸載老版本cli

npmi@vue/cli-g安裝新版本cli

npminstall-g@vue/cli-init安裝cli

vue-V查看cli的版本號，注意大小寫

vuecreatevue-cli創(chuàng)建vue3.0項目,記得選擇vue3

按上述步驟操作即可，我的vue-cli版本號是4.5.11。這里注意一下，創(chuàng)建項目的的時候需要手動選擇創(chuàng)建2.0還是3.0的項目，默認(rèn)是2.0，腳手架是向下兼容的。

二、安裝路由

npminstallvue-router@4安裝路由，4.0版本的

我的路由版本是4.0.12

三、完善目錄結(jié)構(gòu)，創(chuàng)建配置文件vue.config.js

目錄和vue.config.js都貼了一下，具體的還是去GitHub直接看源碼，這里不多占用篇幅了。這里app.less設(shè)置了顏色變量，統(tǒng)一了整個系統(tǒng)的顏色，后期如果做主題，也方便維護。其中antd、vuex等后面再說。

四、安裝ant-design-vue，安裝less、安裝dayjs

npmi--saveant-design-vue@next安裝antd3.x的版本3.0還在不斷更新的階段

npminstallbabel-plugin-import--save-dev引入babel，配置babel.config文件，antd組件的按需加載

npminstall--save@ant-design/icons-vue需要的話，引入antd的icon

npminstallless--save引入less

npmiless-loader@4.1.0注意版本號

npmistyle-resources-loadervue-cli-plugin-style-resources-loader-D安裝插件，vue.config.js文件，增加less文件全局配置，主要配置全局變量

npminstalldayjs--save并全局配置下dayjs，如果報錯，重裝一下ant-design-vue,dayjs比moment更加輕量

UI框架我用了ant-design-vue，這個大家隨意根據(jù)自己需求和喜好來。但是要提醒一下，antd目前2.0版本做了對vue3的支持，而且是穩(wěn)定的，現(xiàn)在正在做3.0版本的升級，項目中用的都是是3.0的寫法，穩(wěn)定性有待考究。再就是因為antd需要dayjs，這里也用了dayjs，用法大同小異，但是他非常小。項目中用了antd的按需加載，不用的組件還是不要引入的好，有需要的在antdUse.js文件引入即可。按需加載的方法官方文檔有詳述，需要修改babel.config.js。antd3的icon變成了通過組件的形式引入，使用起來有點繁瑣，也需要注意。

安裝less的babel時，注意版本號，高版本的會報錯。我這里定義了全局的less變量，統(tǒng)一項目的各級別字體大小、各種顏色等等

五、安裝vuex、axios

npminstallvuex@next--save安裝vuex，并配置

npminstallaxios安裝axios，并做統(tǒng)一配置

axios沒有什么變化。vuex建議詳細看一下官方文檔3.0到4.0的遷移文檔。這里我簡單列幾個重要的，新版本中，用createStore創(chuàng)建實例；通過useStore獲取當(dāng)前的vuex實例。具體寫法看代碼。

六、vue3的一些新語法

vue3參考了reacthooks的實現(xiàn)方式，所以寫法和編程思路很像，這里非常建議看一下尤雨溪大佬的這篇文章，點我跳轉(zhuǎn)這里他對自己升級的前因后果做了很詳細闡述，看完會對這次升級有比較清晰的認(rèn)知。這次更新主要是對組件公共邏輯的提取復(fù)用和對單一組件邏輯組織做了很大的改動，當(dāng)然根本動力還是對typescript的支持。ts是大勢所趨。從我個人而言，這次改動很大，使vue3對新手來說，上手難度非常高。對程序員要求也提高了很多。很容易出現(xiàn)代碼一鍋粥，邏輯混亂的情況。呃...還有就是.value和props.的寫法太啰嗦，我是不是要求有點高了，手動狗頭，哈哈。

但是，用多了之后你會這很好用、很方便。vue3.0數(shù)據(jù)流向很清晰、還保留了數(shù)據(jù)響應(yīng)式的老優(yōu)點。巴適得很啊。博主最開始是用react的，剛開始轉(zhuǎn)用vue的時候很不習(xí)慣，有寫法的原因，最大的還是數(shù)據(jù)不清晰，所有數(shù)據(jù)都綁定在this上，可讀性低了好多。

。。。扯遠了，回歸正題，直接說說按照我的理解，vue3有哪些變化，應(yīng)該怎么去用。

首先，vue3支持typescript了，鼓掌、撒花。。。建議學(xué)習(xí)一下，當(dāng)然用不用都行，毫無影響。只能說ts作為js的超集，徹底斬斷了js的放蕩不羈愛自由，變得中規(guī)中矩起來。也讓代碼更加規(guī)范，更加可掌控。不過很有意思的是，vue3徹底斬斷了vue2的條條框框，徹底釋放自由了，變量、方法直接在setup里面定義，邏輯也都在里面編寫，再也不需要像以前那樣在規(guī)定的地方聲明監(jiān)聽屬性、聲明方法了。這個項目都是用js寫的，我的ts水平也一般，再就是怕大家看不習(xí)慣，畢竟現(xiàn)階段ts的普及還是有點低的。

下面會列舉一些變化，有源代碼，有注釋，直接拉項目跑一下的好，這里只是簡單提一些關(guān)鍵的變化。

main.js文件。通過createApp方法創(chuàng)建vue實例，通過app.config.globalProperties.實例原型上添加全局屬性?？蓜?chuàng)建多實例，也不怕污染。

report.js文件。通過defineComponent聲明組件，配合setup這個組合函數(shù)完成組件邏輯的開發(fā)，具體寫法看源碼report.js這個文件。

setup（props,context）這個組合函數(shù)，直接替代了vue2.0computedwatch生命周期methods等整一套寫法。所有的邏輯，都在這個函數(shù)里面實現(xiàn)。所以，建議統(tǒng)一寫法，雖然以前的寫法也是支持的，個人建議要么之前那套，要么一點都不要。不要出現(xiàn)setup和methods同時出現(xiàn)的情況。

setupbeforeCreate和created已經(jīng)不需要了，setup的觸發(fā)時機其實就是在beforeCreate之前。他僅在實例初始化的時候運行一次，以后再不會執(zhí)行，setup是同步。

兩個參數(shù)，props是父級組件傳遞的數(shù)據(jù)，實時更新。不可以解構(gòu)，會丟失監(jiān)聽?？梢杂胻orefs將props轉(zhuǎn)為組件內(nèi)部的監(jiān)聽數(shù)據(jù)。但是我個人感覺這不是個好方法，我還是喜歡props.的形式使用，這樣代碼一目了然，很清楚你用的數(shù)據(jù)到底是props傳遞的還是當(dāng)前組件聲明的。數(shù)據(jù)流向很清晰；context是個對象，可以解構(gòu)使用，包含emit等屬性，沒什么好說的，看看文檔就好。

setupthis是沒用的，因為還沒return呢，所以各依賴包為了支持這一特性，都做了相應(yīng)的更新routervuex都有專門的方法，通過引入的方式獲取到實例?？梢钥匆幌孪聢D的代碼。

計算屬性、監(jiān)聽屬性、生命周期。這些都是以方法的形式注入到組件中，生命周期的名字變了一些，功能方面并沒有變化，監(jiān)聽屬性也是，寫法變化了。文檔寫的很清楚，這里，我就不多做贅述了。其次還增加了一些新的api。refreactive聲明響應(yīng)式變量；provide/inject父子組件互通；watchEffect自動監(jiān)聽，不太推薦，他會自動監(jiān)聽所有的響應(yīng)式變量，任何有變化了都會觸發(fā)回調(diào)，有點類似于update。當(dāng)然也會導(dǎo)致頻繁執(zhí)行的問題。一些簡單的頁面可以用，其他情況還是用watch手動標(biāo)記需要監(jiān)聽的變量最好。

七、總結(jié)

Vue3的新屬性非常多，多研究看文檔。不過目前社區(qū)還不是很完