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

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出武寧免費(fèi)做網(wǎng)站回饋大家。

ant design vue是能使用的，因?yàn)閍nt design vue是使用Vue實(shí)現(xiàn)的遵循Ant Design設(shè)計(jì)規(guī)范的高質(zhì)量UI組件庫，用于開發(fā)和服務(wù)于企業(yè)級(jí)中后臺(tái)產(chǎn)品。

Ant Design Vue 是使用 Vue 實(shí)現(xiàn)的遵循 Ant Design 設(shè)計(jì)規(guī)范的高質(zhì)量 UI 組件庫，用于開發(fā)和服務(wù)于企業(yè)級(jí)中后臺(tái)產(chǎn)品。

特性

提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。

開箱即用的高質(zhì)量 Vue 組件。

共享 Ant Design of React 設(shè)計(jì)工具體系。

支持環(huán)境

現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）。

支持服務(wù)端渲染。

安裝

使用 npm 或 yarn 安裝

我們推薦使用 npm 或 yarn 的方式進(jìn)行開發(fā)，不僅可在開發(fā)環(huán)境輕松調(diào)試，也可放心地在生產(chǎn)環(huán)境打包部署使用，享受整個(gè)生態(tài)圈和工具鏈帶來的諸多好處。

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

如果你的網(wǎng)絡(luò)環(huán)境不佳，推薦使用 cnpm。

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

瀏覽器引入

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

我們?cè)?npm 發(fā)布包內(nèi)的 ant-design-vue/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通過 /tupian/20230522/ant-design-vue 或 UNPKG 進(jìn)行下載。

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

注意：引入 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` 會(huì)加載 less 文件
  ]
}

注意：webpack 1 無需設(shè)置 libraryDirectory。

然后只需從 ant-design-vue 引入模塊即可，無需單獨(dú)引入樣式。等同于下面手動(dòng)引入的方式。

// babel-plugin-import 會(huì)幫助你加載 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

手動(dòng)引入

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

關(guān)于 ant-design-vue

眾所周知，Ant Design作為一門設(shè)計(jì)語言面世，經(jīng)歷過多年的迭代和積累，它對(duì)UI的設(shè)計(jì)思想已經(jīng)成為一套事實(shí)標(biāo)準(zhǔn)，受到眾多前端開發(fā)者及企業(yè)的追捧和喜愛，也是React開發(fā)者手中的神兵利器。希望ant-design-vue能夠讓Vue開發(fā)者也享受到Ant Design的優(yōu)秀設(shè)計(jì)。

ant-design-vue 是 Ant Design 的Vue實(shí)現(xiàn)，組件的風(fēng)格與Ant Design保持同步，組件的html結(jié)構(gòu)和css樣式也保持一致，真正做到了樣式0修改，組件API也盡量保持了一致。

感謝各位的閱讀！關(guān)于ant-design vue怎么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞名稱：ant-designvue怎么用-創(chuàng)新互聯(lián)
本文來源：http://chinadenli.net/article34/diihse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、外貿(mào)建站、軟件開發(fā)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)