ant-design vue怎么用

這篇文章給大家分享的是有關ant-design vue怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

ant design vue是能使用的，因為ant design vue是使用Vue實現的遵循Ant Design設計規范的高質量UI組件庫，用于開發和服務于企業級中后臺產品。

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

特性

提煉自企業級中后臺產品的交互語言和視覺風格。

開箱即用的高質量 Vue 組件。

共享 Ant Design of React 設計工具體系。

支持環境

現代瀏覽器和 IE9 及以上（需要 polyfills）。

支持服務端渲染。

安裝

使用 npm 或 yarn 安裝

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

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

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

組件庫使用了 vue 的新特性slot-scope(2.5.0新增), provide / inject(2.2.0新增)

瀏覽器引入

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

我們在 npm 發布包內的 ant-design-vue/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通過 https://www.jsdelivr.com/package/npm/ant-design-vue 或 UNPKG 進行下載。

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

注意：引入 antd.js 前你需要自行引入 moment。

示例

import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, 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 文件
  ]
}

注意：webpack 1 無需設置 libraryDirectory。

然后只需從 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

關于 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怎么用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！