可以查看第一篇文章配置好相关环境，再阅读本篇

步骤一：添加项目依赖

在vue官网中找到生态系统查看官方库
vue-router安装 | Vue Router (vuejs.org)

pnpm add vue-router@4

pinia安装Pinia | Pinia (vuejs.org)

pnpm add pinia

ant-design-vue安装Ant Design of Vue - Ant Design Vue (antdv.com)

pnpm add ant-design-vue@4.x

自动按需引入组件Ant Design of Vue - Ant Design Vue (antdv.com)

pnpm add unplugin-vue-components -D

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
});

ant-design-icon安装图标 Icon - Ant Design Vue (antdv.com)

pnpm add @ant-design/icons-vue

安装dayjs

pnpm add dayjs

安装unocssUnoCSS Vite 插件 (alfred-skyblue.github.io)

pnpm add -D unocss

根据文档教程进行配置

安装less

pnpm add -D less

安装自动导入神器

pnpm add -D unplugin-auto-import

安装vueuse工具包起步 | VueUse中文文档 (vueusejs.com)

pnpm add @vueuse/core

完整vite.config.ts如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
import UnoCSS from "unocss/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router", "@vueuse/core", "pinia"],
      dts: "types/auto-imports.d.ts",
      dirs: ["src/stores", "src/composables"],
    }),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
      dts: "types/components.d.ts",
      dirs: ["src/components"],
    }),
    UnoCSS(),
  ],
});

步骤二：删除文件，重新设置样式

删除style.css
移动vite-env.d.ts到types目录

在src/assets目录下创建styles目录，并创建文件reset.css增加对应样式

html {
  --text-color: rgba(0, 0, 0, 0.85);
  --text-color-1: rgba(0, 0, 0, 0.45);
  --text-color-2: rgba(0, 0, 0, 0.2);
  --bg-color: #fff;
  --hover-color: rgba(0, 0, 0, 0.025);
  --bg-color-container: #f0f2f5;
  --c-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#app,
body,
html {
  height: 100%;
}

#app {
  overflow-x: hidden;
}
*,
:after,
:before {
  box-sizing: border-box;
}

在main.ts中添加对应样式文件

import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/reset.css";
import "./assets/styles/reset.css";
import "uno.css";

createApp(App).mount("#app");

步骤三：设置App.vue

首先引入全局配置全局化配置 ConfigProvider - Ant Design Vue (antdv.com)
使用app包裹组件包裹组件 App - Ant Design Vue (antdv.com)
设置中文属性

<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale(zhCN.locale);
</script>

<template>
  <a-config-provider :locale="zhCN">
    <a-app class="h-full font-chinese antialiased">
      <RouterView />
    </a-app>
  </a-config-provider>
</template>

配置unocss，增加2个依赖

pnpm add -D unocss-preset-chinese unocss-preset-ease

这两个依赖一个是汉字排版，一个是动画效果
设置常用unocss样式

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";
import presetChinese from "unocss-preset-chinese";
import presetEase from "unocss-preset-ease";

export default defineConfig({
  safelist: [],
  presets: [
    presetUno(),
    presetAttributify(),
    presetChinese(),
    presetEase(),
    presetTypography(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetWebFonts({
      fonts: {
        sans: "DM Sans",
        serif: "DM Serif Display",
        mono: "DM Mono",
      },
    }),
  ],
  shortcuts: [
    ["flex-center", "flex items-center justify-center"],
    ["flex-between", "flex items-center justify-between"],
    ["flex-end", "flex items-end justify-between"],
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

步骤四：创建路由以及对应文件

新建router目录以及index.ts和static-routes.ts文件

新建.env配置文件，并配置VITE_APP_BASE=/,稍后会说明这个配置具体是做什么用的

由于我们是ts我们需要配置对应的类型，在vite-env.d.ts中添加

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_BASE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

回到我们的路由文件中

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  routes: [],
  history: createWebHistory(import.meta.env.VITE_APP_BASE),
});

export default router;

这个时候会报错不存在env，我们需要配置一下tsconfig文件

接下来我们配置我们第一个页面login
创建pages目录，并创建login文件夹，创建index.vue

接下来把我们的视线移动到static-routes.ts中

import type { RouteRecordRaw } from "vue-router";

export default [
  {
    path: "/login",
    component: () => import("../pages/login/index.vue"),
  },
] as RouteRecordRaw[];

在index.ts中引入静态路由，并在main.ts中引入router

//index.ts
import { createRouter, createWebHistory } from "vue-router";
import staticRoutes from "./static-routes";

const router = createRouter({
  routes: [...staticRoutes],
  history: createWebHistory(import.meta.env.VITE_APP_BASE),
});

export default router;

//main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "ant-design-vue/dist/reset.css";
import "./assets/styles/reset.css";
import "uno.css";

const app = createApp(App);
app.use(router);
app.mount("#app");

运行项目，在浏览器中输入/login就可以看到登录页面

接下来来揭秘VITE_APP_BASE=/具体有什么作用，我们后面部署在服务端可能会遇到 xxx.xxx/ 这样的部署，也可能遇到xxx.xxx/app 这样的部署，这个VITE_APP_BASE就是用来配置访问的路由路径，比如我们现在改为/app

手把手带你分析antdv-pro，并创建属于自己的后台管理（2）

步骤一：添加项目依赖

步骤二：删除文件，重新设置样式

步骤三：设置App.vue

步骤四：创建路由以及对应文件