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

目录

• 1. 安装
• 2. 引入组件库
• 3. 使用
• 3.1 按钮样式
• 3.2 导航栏样式
• 3.3 表单样式
• 补充：ant-design-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搭建项目，[email protected]

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组件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！