Vue UI 组件库【Ant-design-vue】的使用心得

最近上手写了写vue的代码，选择的是阿里的ant-design-vue的组件库，感觉整体上上手容易，使用比较方便。下面简单的记一下使用心得。

安装与引入

Ant-design-vue 组件库的安装非常简单：

npm i --save ant-design-vue

引入的方式有两种：

• 全部引入

import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

但是这种引入方式会打包进很多不需要的代码，导致文件体积变大，因此可以按需引入。

• 按需引入
  为了方便，可以引入 babel-plugin-import 进行加载。
  文件：
  babel.config.js

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

Ant-design-vue使用

首先 http://vue.ant-design.cn/docs/vue/getting-started-cn/ 的官方使用说明给了很多的示例，这时候肯定有部分读者想知道源码在哪里：

图中强调的地方就是 show code 啊哈哈！

使用什么组件比较方便：
main.js 中引入

import { Layout, Col, Row, Input, Button, List, Avatar, Dropdown, Menu, Icon, Divider, Cascader, Checkbox, Card } from 'ant-design-vue'

Vue.use(Col)
Vue.use(Row)
Vue.use(Input)
Vue.use(Button)
Vue.use(List)
Vue.use(Avatar)
Vue.use(Dropdown)
Vue.use(Menu)
Vue.use(Icon)
Vue.use(Divider)

这些就是简单的介绍，如果有不明白的欢迎留言讨论，还是
感谢 ant-design-vue 的团队！

												2019-1-1