Vite快速搭建一個(gè)Vue3全家桶+TS+Sass的項(xiàng)目
過(guò)來(lái)人經(jīng)驗(yàn)，一般應(yīng)屆生入職第一天用得上。至于為什么不用vue-cli——只能說(shuō)在vue技術(shù)棧里的vue-cli和vuex就要成為過(guò)去式了（但并不意味著不用學(xué)了，只是優(yōu)先級(jí)降了，干開(kāi)發(fā)總是接舊項(xiàng)目比起新項(xiàng)目多）
let`s begin
創(chuàng)建目錄
在命令行用npm或yarn：
npm create vite app-name
yarn create vite app-name
依次選擇Vue、TypeScript
依次執(zhí)行cd app-name、yarn（或 npm i）
可以關(guān)閉命令行了，接下用VScode打開(kāi)app-name文件夾
在src下加上額外的幾個(gè)目錄，讓它變成這樣
配置路徑別名
在vite.config.ts中導(dǎo)入path
安裝@types/node，為node內(nèi)置包添加TS類型聲明
yarn add -D @types/node 或? npm i -D @types/node
配置好vite.config.ts的結(jié)果如下：
還沒(méi)有結(jié)束，還需要分別在TS和編輯器中配置別名
別的插件怎么配請(qǐng)自行bing
找到Mappings項(xiàng)
找下面這個(gè)屬性
CSS預(yù)處理器
以Scss為例
yarn add -D sass 或 npm i -D sass
直接在main.ts里導(dǎo)入的話，style標(biāo)簽會(huì)訪問(wèn)不到全局Scss中的變量和規(guī)則
找到vite.config.ts，按照下面的寫法導(dǎo)入全局Scss或Less
vue-router
yarn add vue-router
在src下的router目錄新建index.ts和routes.ts
內(nèi)容如下：
注意聲明routes的類型
創(chuàng)建并導(dǎo)出router插件
在main.ts中導(dǎo)入router.ts并安裝
Pinia
開(kāi)頭也提到過(guò)，vuex將成時(shí)代棄兒
yarn add pinia
安裝pinia
聲明一個(gè)store實(shí)例
在usePinia/下的index.ts內(nèi)容如下：
Element-plus
yarn add element-plus @element-plus/icons-vue
在main.ts中安裝Element-plus，并全局注冊(cè)所有圖標(biāo)組件
Axios
請(qǐng)參考：
如果不想搞上面那一長(zhǎng)串
可以來(lái)我的gitee直接拉現(xiàn)成的：
西紅柿炒番茄不要番茄：https://gitee.com/Swz082421/vue-app
