vue引用Antdesign,全局注册以及按需加载;项目环境vue3.x
一、执行安装命令
npm install ant-design-vue --save
or
yarn add ant-design-vue
二、按需加载
1.安装依赖:babel-plugin-import
npm install babel-plugin-import --save-dev
2.配置相关文件.babelrc 或 babel.config
"plugins": [
// `style: true` 会加载 less 文件 可以更改为"css" 但是样式可能加载不全
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }]
]
如果样式未起效,则在main.js中引入样式:
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
3.在需要的文件中引入相关组件
例如:
import { DatePicker } from 'ant-design-vue';
三、全局引入
1.在main.js文件中加入以下代码行
import Antd from 'ant-design-vue'; //引入组件库
import 'ant-design-vue/dist/antd.css'; // 引入相关样式
//注册
app.use(Antd);
注册成功后,可在任意vue文件中使用有关组件;例如
<a-button type="text">Text Button</a-button>