使用vite构建Vue3.0项目这篇文章描述了使用vite打包，采用Vue3、ts、ant、vueRouter、Vuex

Vue3 提供的语法提示功能插件 -- Volar

• VSCode + Volar

使用Vite构建vue项目的方法以及步骤

1. 安装vite

npm init vite@latest   npm构建vite项目
yarn create vite   yarn构建vite项目

依次需要配置项目名 、框架选择、原生和ts版本的选择

2. 运行vite + vue 项目

cd vue3进入创建的项目包

npm i/ yarn 下载项目所需的依赖

npm run dev / yarn dev 运行项目

到这一个vite + vue的项目最基本的框架就已经搭建完成了

3.安装VueRouter

npm install vue-router@4.0 

创建src/router/index.ts文件，配置路由

import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  // 指定路由模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

4.安装vuex

npm install vuex@4.0
yarn add vuex@4.0

创建src/store/index.ts，配置vuex

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'vueX'
  }
})

5.在main.ts中配置router和store

import { createApp } from 'vue'
import App from './App.vue'
// 导入router和store
import router from './router/index'
import store from './store/index'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

到这个一个基本的vite + vue3 + ts + VueRouter + VueX 的前端项目框架就搭建完成了

推荐使用的后台框架Ant

npm i --save ant-design-vue@next
yarn add ant-design-vue@next

在main.ts中配置Ant

import App from './App.vue'
// 导入router和store
import router from './router/index'
import store from './store/index'
// 导入Ant 组件以及样式
import Antd from 'ant-design-vue' 
import 'ant-design-vue/dist/antd.css' 

const app = createApp(App)
app.use(router)
app.use(store)
// 挂载Ant组件
app.use(Antd)
app.mount('#app')