vue中ant-design-vue组件怎么安装与使用

这篇文章主要介绍了vue中ant-design-vue组件怎么安装与使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中ant-design-vue组件怎么安装与使用文章都会有所收获，下面我们一起来看看吧。

1. 安装

首先使用vue-cli创建项目，然后进入项目，使用npm安装ant-design-vue库：

npm i --save ant-design-vue@next

然后在package.json文件中的dependencies中看见刚刚下载的库：

2. 引入组件库

然后在main.js中引入，注意要按照顺序：

# 引入组件库import ant from 'ant-design-vue'# 引入样式表import 'ant-design-vue/dist/antd.css'

引入顺序如图所示：

接着需要use该组件库的句柄：

然后在要使用的vue文件中也引入组件库，比如我要在项目默认的App.vue中使用组件库：

import 'ant-design-vue/dist/antd'

3. 使用

3.1 按钮样式

直接将代码复制到component标签中即可，要注意component标签中只能允许有一个根标签。

3.2 导航栏样式

可以选择颜色的导航栏

顶部导航栏

3.3 表单样式

内联登录栏

补充：ant-design-vue的兼容问题

问题：ant-design-vue不兼容ie浏览器

要求：ie兼容 >= 9

环境：vue cli3搭建项目，ant-design-vue@1.3.8

babel.config.js文件

module.exports = {  presets: [    '@vue/app',    // 兼容配置    [      '@babel/preset-env',      {        'useBuiltIns': 'entry'      }    ]  ],  // 按需加载配置  plugins: [    [      'import',      {        libraryName: 'ant-design-vue',        libraryDirectory: 'es',        style: 'css'      },    ]  ]}

main.js文件（项目入口）

// 引入@babel/polyfill处理兼容 import '@babel/polyfill'import Vue from 'vue'import App from './App.vue'import router from './router/router'import store from './store/store'import './plugins/antd.js'new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

关于"vue中ant-design-vue组件怎么安装与使用"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue中ant-design-vue组件怎么安装与使用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。