1 vite项目创建

兼容性注意

Vite官网：https://cn.vitejs.dev/

Vite 需要 Node.js 版本 >= 12.0.0，建议使用16版本以上

node -v  //查看版本号

1.1 创建项目

新建项目存放目录，cmd 进入到存放目录，执行如下命令创建项目

npm create vite@latest

1.2 填写项目名称

1.3 选择框架

1.4 选择js

2 引入Ant Design Vue

npm i --save ant-design-vue@4.x

在main.js文件里全局完整注册

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

3 安装路由

3.1 安装依赖

npm install vue-router@4

3.2 新建路由文件

src目录下新建router文件夹，然后新建index.js文件

import {createRouter, createWebHistory} from 'vue-router'

const router = createRouter({
    routes: [
        {
            path:'/',
            name:'hello',
            component:()=>import('@/components/HelloWorld.vue')
        }
    ],
    history: createWebHistory(),
})
export default router

3.3 main.js里面引入路由

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

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

const app = createApp(App);

app.use(Antd).use(router).mount('#app');

3.4 修改App.vue

<script setup>

</script>

<template>
  <RouterView />
</template>

<style scoped>

</style>

4 配置项目别名

vite.config.js配置文件，添加如下配置

import vue from '@vitejs/plugin-vue'
import { defineConfig, loadEnv } from 'vite'
import * as process from 'node:process'
import { fileURLToPath } from 'node:url'
import { resolve } from 'path'

const baseSrc = fileURLToPath(new URL('./src', import.meta.url))

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [vue()],
    resolve: {
      alias: [
        {
          find: '~@',
          replacement: baseSrc,
        },
        {
          find: '~',
          replacement: baseSrc,
        },
        {
          find: '@',
          replacement: baseSrc,
        },
        {
          find: '~#',
          replacement: resolve(baseSrc, './enums'),
        },
      ],
    },
    server: {
      host: '0.0.0.0',    //解决“vite use `--host` to expose”
      port: 6678,
      open: true //启动自动打开浏览器
    }
  }
})