ant-design vue 能用麼

ant design vue是能使用的。 ant design vue是使用Vue實現的遵循Ant Design設計規範的高品質UI元件庫，用於開發和服務企業級中後台產品。

本文操作環境：windows10系統、vue 2.9、thinkpad t480電腦。

推薦：《vue教學》

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 致力於提供給程式設計師愉悅的開發體驗。

以上是ant-design vue 能用麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！