本文详解如何使用 Vite 快速创建 Vue3 项目，涵盖 Vue CLI 升级至 5.0.1 版本后的语法变更及向下兼容问题。内容包含通过 npm 或 yarn 初始化项目、配置 Vue Router 4.0 与 Vuex 4.0，以及引入 Ant Design Vue 的具体步骤，并附带降级脚手架的方法。
项目创建
Vite 简介
若需使用 Vite 构建 Vue 项目，首先需将 Vue 脚手架升级至 5.0.1 版本。需注意，该版本存在一个显著缺陷：升级后将不再向下兼容 Vue2 的语法创建项目方式。
将脚手架升级至 5.0.1 版本，可执行命令：cnpm install vue@next 或 yarn global add @vue/cli 以安装新版 @vue/cli。
升级完成后，输入 vue -V 命令即可查看当前脚手架的版本号。
当脚手架版本为 5.0.1 时，创建项目的语法已发生变化。在 4.5.15 版本中，仍可使用 vue create demo 命令创建项目，但在 5.0.1 版本中采用了新的语法。若继续使用旧方法，系统会提示“你的vue-cli已经过时了。请删除后重新手动运行vue-cli”。
项目启动命令由 npm run serve 或 yarn serve 变更为 npm run dev 或 yarn dev，同时默认端口号由原来的 8080 更改为 3000。
这是新页面：
这是老页面：
使用 Vite 创建项目
Vite 是一款 Web 开发构建工具，凭借其原生 ES 模块导入机制，能够实现极速的冷服务器启动。
通过终端执行以下命令，即可快速构建 Vue 项目。
- 使用 npm：
npm init vite@latest '项目名称' --template vue
cd '项目名称'
下载依赖：npm install
启动项目：npm run dev- 使用 yarn：
yarn create vite '项目名称' --template vue
cd '项目名称'
yarn
yarn dev从下图可见，新建项目的目录结构与 vue-cli4 创建的项目结构基本一致，均包含 App.vue 和 main.js。
查看 main.js 文件内容
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')可以发现 Vue 的创建方式已发生改变：以往使用 new Vue 初始化 Vue，而在 Vue3.0 中，已修改为通过 createApp 方式。
vue3官网
配置项目
配置 vue-router
Vue Router 4.0，具体变化详情请查阅 Github 中的完整说明。
目前版本为 beta: v4.0.12，使用 yarn 安装时需指定版本号。
1、安装 vue-router
yarn add vue-router@4.0.12
// or
npm install vue-router@next2、安装完成后配置 vue-router
在项目 src 目录下新建 router 目录，并添加 index.ts 文件，写入以下内容。
// import VueRouter from 'vue-router'
import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})
// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
// // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
// history: VueRouter.createWebHashHistory(),
// routes, // short for `routes: routes`
// })配置 Vuex
Vuex 4.0，具体变化详情请查阅 Github。
目前版本为 beta: v4.0.2。
1、安装 vuex
yarn add vuex@4
//或者
npm install vuex@next2、安装完成后配置 vuex
在项目 src 目录下新建 store 目录，并添加 index.js 文件，写入以下内容。
import { createStore } from 'vuex'
interface State {
userName: string
}
export default createStore({
state(): State {
return {
userName: "vuex",
};
},
});配置 Ant Design Vue
具体使用方式请参考：官方文档
Ant Design Vue 新的ui网站
1、引入 ant-design-vue
yarn add ant-design-vue@next2、在 main.js 中引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router/index'
import store from './store/index'
// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_ 实例来创建router
// 整个应用程序路由器感知。
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')@vue/cli 降级方法
若需开发 Vue2 项目，则需卸载当前 @vue/cli 并重新下载指定版本。
首先找到电脑上的命令提示符（黑窗口），右键以管理员身份运行。
查看当前版本：vue -V
- 卸载当前脚手架 ：npm uninstall -g @vue/cli
- 安装指定版本：npm install -g @vue/cli@版本号
- 此处采用 vue cli4 的最高版本 4.5.15。
- 命令为：npm install -g @vue/cli@4.5.15
成功后：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。