使用Vite 创建 Vue 3.0 项目(最新体验)

一、前言

最近在构建一个新的项目，大学室友小伙伴想用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