Ant Design Vue -岩石教程

特点

高质量组件：提供丰富且高质量的组件，覆盖了大部分 UI 需求。
设计系统：遵循 Ant Design 的设计规范，提供一致的用户体验。
TypeScript 支持：全面支持 TypeScript，提供良好的类型定义和开发体验。
响应式设计：组件具有良好的响应式设计，适应各种设备屏幕。
强大的文档：提供详细的文档和示例，方便开发者快速上手。
活跃的社区：拥有一个活跃的开发者社区，持续更新和维护。

使用场景

企业级应用：适用于企业级的后台管理系统、数据分析平台等。
电商平台：构建电子商务网站的前端部分。
内容管理系统：用于内容管理系统的界面开发。
仪表盘：创建数据可视化的仪表盘应用。

安装方式

使用 npm 或 yarn 安装：

npm install ant-design-vue

或

yarn add ant-design-vue

使用示例

全局引入

在项目的主入口文件中引入 Ant Design Vue：

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

new Vue({
  render: h => h(App),
}).$mount('#app');

按需引入

使用 babel-plugin-import 实现按需加载组件和样式：

npm install babel-plugin-import --save-dev

在 .babelrc 文件中进行配置：

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
  ]
}

然后在组件中按需引入：

import { Button, DatePicker } from 'ant-design-vue';

export default {
  components: {
    AButton: Button,
    ADatePicker: DatePicker,
  }
};

基本使用示例

<template>
  <div>
    <a-button type="primary">Primary Button</a-button>
    <a-date-picker></a-date-picker>
  </div>
</template>

<script>
import { Button, DatePicker } from 'ant-design-vue';

export default {
  components: {
    AButton: Button,
    ADatePicker: DatePicker,
  }
};
</script>

Ant Design Vue

特点

使用场景

安装方式

使用示例

全局引入

按需引入

基本使用示例

官方资料