Ant-Design-Vue从Vue-cli迁移至Vite：解锁前端开发的闪电速度

2024-01-09 17:28:11

前言

Vite作为新一代的前端开发与构建工具，以其令人惊叹的速度备受瞩目，已成为Vue3的默认构建工具。对于Ant-Design-Vue用户来说，从Vue-cli迁移至Vite势在必行。本文将详细解析迁移流程，帮助开发人员解锁前端开发的闪电速度，助力构建高效、高性能的现代化应用。

迁移准备

在迁移之前，需确保以下准备工作：

已安装Node.js 16及以上版本
已安装Vite 3及以上版本
已安装Ant-Design-Vue

迁移步骤

1. 创建Vite项目

vue create vite-ant-design-vue

2. 安装Ant-Design-Vue

npm install ant-design-vue

3. 修改main.js

将Vue-cli项目的main.js修改为以下内容：

import { createApp } from 'vue'
import App from './App.vue'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App)
app.use(Antd);
app.mount('#app')

4. 修改package.json

将Vue-cli项目的package.json修改为以下内容：

{
  "name": "vite-ant-design-vue",
  "version": "1.0.0",
  "description": "Ant-Design-Vue from Vue-cli migration to Vite",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "ant-design-vue": "^2.0.0",
    "vue": "^3.0.0",
    "vite": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0"
  }
}