从0打1 用node express vite搭建一个博客系统 系列4

vite 引入ant-design框架
ant-design框架地址

https://www.antdv.com/docs/vue/getting-started-cn

安装 #

npm i --save ant-design-vue

这里我用全局引入

import { createApp } from "vue";
import "./style.css";
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");

还有按需导入，可以看看官网的操作

在app.vue 添加ant-design的按钮

<template>
  <div>
    <a-button type="primary">Primary Button</a-button>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

输入指令 npm run dev 看看效果

清空vite的全局css样式
可以用插件 reset-css 完成

npm i reset-css

在main.js 添加

import "reset-css";

import { createApp } from "vue";
// 清除默认样式
import "reset-css";
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");

好了前期工作基本完成