ant design vue, ant-design-vue 安裝, ant-design-vue 使用

Ant Design Vue 是使用 Vue 實現的遵循 Ant Design 設計規範的高質量 UI 組件庫，用於開發和服務於企業級中後臺產品。

Ant Design Vue

中文文檔：Ant-Design-Vue
Github：Ant-Design-Vue
Star：16.9k

微信交流群： 前端攻城獅（點擊加入）

特性

• 提煉自企業級中後臺產品的交互語言和視覺風格。
• 開箱即用的高質量 Vue 組件。
• 共用Ant Design of React設計工具體系。

支持環境

• 現代瀏覽器, 如果需要支持 IE9，你可以選擇使用 1.x 版本。
• 支持服務端渲染。
• Electron

版本

穩定版：npm v3.2.10

你可以訂閱：https://github.com/vueComponent/ant-design-vue/releases.atom 來獲得穩定版發佈的通知。

安裝

使用 npm 或 yarn 安裝

我們推薦使用 npm 或 yarn 的方式進行開發，不僅可在開發環境輕鬆調試，也可放心地在生產環境打包部署使用，享受整個生態圈和工具鏈帶來的諸多好處。

npm install ant-design-vue --save

yarn add ant-design-vue

如果你的網路環境不佳，推薦使用 cnpm。

瀏覽器引入

在瀏覽器中使用 script 和 link 標簽直接引入文件，並使用全局變數 antd。

我們在 npm 發佈包內的 ant-design-vue/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。

強烈不推薦使用已構建文件，這樣無法按需載入，而且難以獲得底層依賴模塊的 bug 快速修複支持。

註意：引入 antd.js 前你需要自行引入 dayjs。

示例

import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);

引入樣式：

import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

按需載入

下麵兩種方式都可以只載入用到的組件。

• 使用 babel-plugin-import（推薦）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 會載入 less 文件
  ]
}

然後只需從 ant-design-vue 引入模塊即可，無需單獨引入樣式。等同於下麵手動引入的方式。

// babel-plugin-import 會幫助你載入 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

• 手動引入

import DatePicker from 'ant-design-vue/lib/date-picker'; // 載入 JS
import 'ant-design-vue/lib/date-picker/style/css'; // 載入 CSS
// import 'ant-design-vue/lib/date-picker/style';         // 載入 LESS

• Vite 按需

// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    /* ... */
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
};