Ant Design Vue是Ant Design的vue版本实现,在vue3免费开源的组件库中享有盛誉,我们博客系统也将基于该库来实现!
安装命令后跟--save,则代表该库为线上依赖,打包的时候会被打包到线上!
$ npm install ant-design-vue --save
配置vite按需引入相关组件前,需要先安装unplugin-vue-components
这个包,命令行后边跟--save-dev则代表改依赖为开发时依赖,不打包到线上环境!
$ npm install unplugin-vue-components --save-dev
之后在vite.config.js中引入如下配置:
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'plugins: [vue(),// 在此处引入如下配置Components({resolvers: [AntDesignVueResolver()],}),],
之后清空 App.vue文件中的内容,只留下如下所示的内容