vue3-ant-design-vue

新建vue3项目

 npx vue create project
 手动选择vue3项目即可
 运行 yarn serve

进入antd-design-vue官网,选择v2或者v3即可

下载antd-design-vue

• yarn add ant-design-vue@next
• main.js引入

 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入Antd-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
var app = createApp(App)
app.use(store)
app.use(router)
app.use(Antd)
.mount('#app')

展示图

当然了我们也可以抽离main.js中的代码,使用按需加载第三方UI插件

• 1: 引入babel-plugin-import ,yarn add babel-plugin-import
• 2：在babel.config.js配置如下

 module.exports = {
	presets: ["@vue/cli-plugin-babel/preset"],
	plugins: [
		[
			"import",
			{
				libraryName: "ant-design-vue",
				libraryDirectory: "es",
				style: "css"
			},
			"ant-design-vue"
		],
		[
			"import",
			{
				libraryName: "@ant-design/icons-vue",
				libraryDirectory: "",
				style: false,
				camel2DashComponentName: false
			},
			"@ant-design/icons-vue"
		]
	]
}

• 3: src下新建plugins文件夹，新建index.js和components.js文件
• plugins-components.js

import { Button } from "ant-design-vue"
const components = [ Button,]
export const componentsPlugin = app => components.forEach(app.use, app)

• 4: plugins-index.js

import router from '@/router'
import store from '@/store'
import { componentsPlugin } from "./components.js"
/**
 * 
 * 插件集
 * @type {import("vue").Plugin[]}
 */
const plugins = [store,router,componentsPlugin]

/**
 * 批量注册插件
 * @param {import("vue").App} app
 */
 export const usePlugins = app =>
//  plugins.forEach(plugin => app.use(plugin),app),//因为app.vue本身就是一个函数，我们可以直接写app.vue即可
 plugins.forEach(app.use, app)

• 5: main.js

import { createApp } from 'vue'
import App from './App.vue'
var app = createApp(App)
import {usePlugins} from './plugins'
usePlugins(app)
app.mount('#app')

效果图如下