安装 volar
插件在 vsCode
官网文档地址
a.安装依赖
1
| npm install ant-design-vue@3.1.1 --save
|
b.引入 antd 到 main.ts
1 2 3 4 5 6 7 8 9 10
| 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).mount("#app");
|
c.安装 ant-design-vue-helper
插件在 vsCode

四. 路由
1. 安装依赖
1
| npm install vue-router@4
|
2. 创建依赖
在项目根目录src下面,创建router文件夹,然后创建index.ts文件
index.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; import Layout from "../components/HelloWorld.vue";
const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", component: Layout, }, ];
const router = createRouter({ history: createWebHistory(), routes, });
export default router;
|
在main.ts中引入路由
main.ts
1 2 3 4 5 6 7 8 9 10 11 12
| import { createApp } from "vue"; import App from "./App.vue";
import Antd from "ant-design-vue"; import "ant-design-vue/dist/antd.css";
import router from "./router";
const app = createApp(App);
app.use(router).use(Antd).mount("#app");
|
五.配置vite
配置别名
1 2
| npm install @types/node --save-dev
|
引入 vite.config.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { resolve } from "path";
export default defineConfig({ plugins: [vue()], server: { host: "0.0.0.0", port: 8443, open: true, }, resolve: { alias: [ { find: "@", replacement: resolve(__dirname, "src"), }, ], }, });
|
引入别名到 tsconfig.json 在lib
属性后嵌入代码
1 2 3 4
| "baseUrl": ".", "paths": { "@/*": ["src/*"] }
|