一、前言

最近在構(gòu)建一個(gè)新的項(xiàng)目，大學(xué)室友小伙伴想用vue3，所以我想都沒(méi)想就直接用vue-cli來(lái)搭建vue3。在搭建的的過(guò)程中，遇到了很多包版本的問(wèn)題。比如：sass包。需要裝node-sass、sass-loader而且版本必須對(duì)應(yīng)，否則就會(huì)出現(xiàn)很多奇奇怪怪的問(wèn)題。雖然最后也解決了，但是也是費(fèi)了好久的時(shí)間。

搭建完之后想起來(lái)最近的Vite，Vite是Vue的作者尤雨溪開(kāi)發(fā)的由原生 ESM 驅(qū)動(dòng)的 Web 開(kāi)發(fā)構(gòu)建工具。在開(kāi)發(fā)環(huán)境下基于瀏覽器原生 ES imports 開(kāi)發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包。我們來(lái)看看構(gòu)建步驟吧（速度真的非常快?。。。?/p>

二、安裝步驟

npm init @vitejs/app

1. 選擇vue(按需選擇)

001.png

2. 選擇js或ts版本

002.png

3. npm run dev 本地項(xiàng)目啟動(dòng)

003.png

三、項(xiàng)目啟動(dòng)

上面構(gòu)建項(xiàng)目一條命令基本就完成了，速度真的非?？煅剑?/p>

004.png

四、vue-router安裝

npm add vue-router -D 
npm add vue-router@next -D

// router/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
const history = createWebHashHistory()
const router = createRouter({
    history,
    routes: [{
      path: '/',
      name: 'index',
      component: () => import('../view/index.vue')
    }]
})
export default router;
// main.ts
import { createApp } from 'vue'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue'
const app = createApp(App)
// 自動(dòng)導(dǎo)入公共組件
const modulesFiles: any = import.meta.globEager('./components/*/*.vue')
const result = Object.keys(modulesFiles).filter((item: any) => true)
result.forEach((item: any) => {
  const moduleName = item.split("/")[2]
  const componentConfig = modulesFiles[item]
  app.component(moduleName, componentConfig.default || componentConfig)
})
app.use(Antd).use(router).mount('#app')

五、sass安裝（這一步真的比vue-cli方便很多，親測(cè)?。?/h2>

npm add sass -D

六、ant-design-vue （Antd配置如上圖 main.ts,其他ui:基于vue3.x版本的 element-plus）

npm add ant-design-vue@next -D

七、結(jié)尾

基本上面的安裝完畢后，項(xiàng)目開(kāi)發(fā)的基本構(gòu)建就完成了。Vite也提供了打包命令（ num run build ) 。趕緊開(kāi)啟你的第一個(gè)vite項(xiàng)目吧

具體代碼可在git倉(cāng)庫(kù)查看：https://github.com/HarlieYang/vite-project