Ant Design Vue:企业级中后台产品的完美解决方案
特性:
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Vue 组件。
- 共享Ant Design of React设计工具体系。
支持环境:
- 现代浏览器,如果需要支持IE9,可选择使用1.x版本。
- 支持服务端渲染。
- 支持Electron。
- 支持IE / Edge、Firefox、Chrome、Safari、Opera。
版本:
- 稳定版:npm package
- 订阅发布通知:https://github.com/vueComponent/ant-design-vue/releases.atom
关于 ant-design-vue
众所周知,Ant Design 作为一门设计语言面世,经历过多年的迭代和积累,它对 UI 的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是 React 开发者手中的神兵利器。
希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。
ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。
Ant Design Vue 致力于提供给程序员愉悦的开发体验。
标题:Ant Design Vue 安装指南
使用 npm 或 yarn 安装:
$ npm install ant-design-vue@4.x --save
$ yarn add ant-design-vue@4.x
浏览器引入: 在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。你可以在 npm 发布包内的 ant-design-vue/dist 目录下找到 antd.js、antd.min.js 和 reset.css。你也可以通过 jsdelivr 或 UNPKG 进行下载。
注意:引入 antd.js 前你需要自行引入 vue、dayjs 及其相关插件。
示例:
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<!-- 其他插件 -->
<script src="https://unpkg.com/ant-design-vue/dist/antd.min.js"></script>
按需加载: ant-design-vue 默认支持基于 ES modules 的 tree shaking。
自动按需引入组件: 如果你使用的是 Vite,推荐使用 unplugin-vue-components 插件。
$ npm install unplugin-vue-components -D
然后在 vite.config.js 中配置插件,插件会自动将代码转化为 import { Button } from 'ant-design-vue'
的形式。
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
// ...
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
],
}),
],
});
现在你可以在代码中直接引入 ant-design-vue 的组件,例如:
import { Button } from 'ant-design-vue';
快速上手:
Ant Design Vue 旨在为程序员提供愉悦的开发体验。
在开始之前,建议您先学习 Vue 和 ES2015,并确保已正确安装和配置了 Node.js v8.9 或更高版本。
官方指南假设您已经掌握了关于 HTML、CSS 和 JavaScript 的中级知识,并且已经完全掌握了 Vue 的正确开发方式。
如果您刚开始学习前端或 Vue,将 UI 框架作为您的第一步可能不是最佳选择。
在线演示:
您可以通过以下 CodeSandbox 演示来最简单地了解 Ant Design Vue 的使用方式,也建议 Fork 本例来进行 Bug 报告。
引入 Ant Design Vue:
- 安装脚手架工具:
$ npm install -g @vue/cli # 或者 $ yarn global add @vue/cli
- 创建一个项目:
使用命令行进行初始化。
$ vue create antd-demo
并按照提示配置项目。如果安装缓慢报错,您可以尝试用 cnpm 或别的镜像源自行安装:
rm -rf node_modules && cnpm install
- 使用组件:
- 安装:
$ npm i --save ant-design-vue@4.x
- 注册:
全局完整注册:
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';
const app = createApp(App);
app.use(Antd).mount('#app');
全局部分注册:
import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';
const app = createApp(App);
/* 会自动注册 Button 下的子组件, 例如 Button.Group */
app.use(Button).mount('#app');
app.config.globalProperties.$message = message;
局部注册组件:
<template>
<a-button>Add</a-button>
</template>
<script>
import { Button } from 'ant-design-vue';
const ButtonGroup = Button.Group;
export default {
components: {
AButton: Button,
AButtonGroup: ButtonGroup,
},
};
</script>
按需加载:
Ant Design Vue 默认支持基于 ES modules 的 tree shaking,直接引入 import { Button } from 'ant-design-vue';
就会有按需加载的效果。
配置主题和字体:
参考资料
https://element.eleme.io/#/zh-CN
更多学习
更多实时资讯,前沿技术,生活趣事。尽在【老马啸西风】
交流社群:[交流群信息](https://mp.weixin.qq.com/s/rkSvXxiiLGjl3S-ZOZCr0Q)