一、前言
最近在构建一个新的项目，大学室友小伙伴想用vue3，所以我想都没想就直接用vue-cli来搭建vue3。在搭建的的过程中，遇到了很多包版本的问题。比如：sass包。需要装node-sass、sass-loader而且版本必须对应，否则就会出现很多奇奇怪怪的问题。虽然最后也解决了，但是也是费了好久的时间。
搭建完之后想起来最近的Vite，Vite是Vue的作者尤雨溪开发的由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。我们来看看构建步骤吧（速度真的非常快！！！）
二、安装步骤
npm init @vitejs/app
1. 选择vue(按需选择)
001.png
2. 选择js或ts版本
002.png
3. npm run dev 本地项目启动
003.png
三、项目启动
上面构建项目一条命令基本就完成了，速度真的非常快呀！
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)
// 自动导入公共组件
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方便很多，亲测！）
npm add sass -D
六、ant-design-vue （Antd配置如上图 main.ts,其他ui:基于vue3.x版本的 element-plus）
npm add ant-design-vue@next -D
七、结尾
基本上面的安装完毕后，项目开发的基本构建就完成了。Vite也提供了打包命令（ num run build ) 。赶紧开启你的第一个vite项目吧
具体代码可在git仓库查看：https://github.com/HarlieYang/vite-project
