1. 安装模板文件
1
yarn create vite

选择 vue-ts 生成 ts 项目。

  1. 安装 ant design vue 的 UI 框架
1
yarn add ant-design-vue

注意，使用 vite 按需引入 ant-design-vue 的组件，需要安装 unplugin-vue-components ，此目前版本需要 node 14 版本以上支持

  1. 安装 unplugin-vue-components，vite 按需引入 ant-design-vue
1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.js
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default {
  plugins: [
    /* ... */
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
};
  1. 安装 vue-router@4，引入路由
1
yarn add vue-router@4

新建 router 文件夹，新建 index.js 和 routes.js，

1
2
3
4
5
6
7
8
9
10
// index.ts
import { createRouter, createWebHistory } from "vue-router";
import routes from "./routes";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// routes.ts
const routes = [
  {
    name: "Option1",
    path: "/Option1",
    component: () => import("../views/Option1.vue"),
  },
  {
    name: "Option2",
    path: "/Option2",
    component: () => import("../views/Option2.vue"),
  },
];

export default routes;

在 main.js 中引入，

1
2
3
4
5
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

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