4.5 KiB
快速上手
Ant Design Vue 致力于提供给程序员愉悦的开发体验。
在开始之前,推荐先学习 Vue 和 ES2015,并正确安装和配置了 Node.js v8.9 或以上。 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识,并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue,将 UI 框架作为你的第一步可能不是最好的主意。
在线演示
最简单的使用方式参照以下 CodeSandbox 演示,也推荐 Fork 本例来进行 Bug Report
。
引入ant-design-vue
1. 安装脚手架工具
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
2. 创建一个项目
使用命令行进行初始化。
$ vue create antd-demo
并配置项目。
若安装缓慢报错,可尝试用 cnpm
或别的镜像源自行安装:rm -rf node_modules && cnpm install
。
3. 使用组件
$ npm i --save ant-design-vue
完整引入
import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
Vue.use(Antd)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
以上代码便完成了 Antd 的引入。需要注意的是,样式文件需要单独引入。
局部导入组件
import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'
Vue.config.productionTip = false
Vue.component(Button.name, Button)
Vue.prototype.$message = message
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
你可以在左侧菜单选用更多组件。
4. 组件列表
兼容性
Ant Design Vue 支持所有的现代浏览器和 IE9+。
对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。
如果你使用了 babel,强烈推荐使用 babel-polyfill 和 babel-plugin-transform-runtime 来替代以上两个 shim。
避免同时使用 babel 和 shim 两种兼容方法,以规避 #6512 中所遇问题
按需加载
如果你在开发环境的控制台看到下面的提示,那么你可能使用了 import { Button } from 'ant-design-vue';
的写法引入了 antd 下所有的模块,这会影响应用的网络性能。
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
可以通过以下的写法来按需加载组件。
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
如果你使用了 babel,那么可以使用 babel-plugin-import 来进行按需加载,加入这个插件后。你可以仍然这么写:
import { Button } from 'ant-design-vue';
插件会帮你转换成 ant-design-vue/lib/xxx
的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。
注意,babel-plugin-import 的
style
属性除了引入对应组件的样式,也会引入一些必要的全局样式。如果你不需要它们,建议不要使用此属性。你可以import 'ant-design-vue/dist/antd.css
手动引入,并覆盖全局样式。
配置主题和字体
小贴士
- 你可以享用
npm
生态圈里的所有模块。 - 虽然Vue官方推荐模板编写组件,不过对于复杂组件,jsx未必不是一个更好的选择。