首頁 探索 說明
註冊 登入
wicresoft
/
doc_project
2
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
目錄樹: 9f08b5b43f
分支列表 標籤列表
doc_project
/
3x.antv.design
/
assets
/
introduce.en-US.a75fc209.js

introduce.en-US.a75fc209.js 50 KB
文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381 
  1. import{_ as s,a,q as t,k as e}from"./index.3fe853a6.js";const o={pageData:{title:"Ant Design of Vue",description:"",frontmatter:{},headers:[{level:2,title:"Features",slug:"Features",content:""},{level:2,title:"Environment Support",slug:"Environment-Support",content:""},{level:2,title:"Version",slug:"Version",content:""},{level:2,title:"Installation",slug:"Installation",content:"Using npm or yarn"},{level:3,title:"Using npm or yarn",slug:"Using-npm-or-yarn",content:"**We recommend using npm or yarn to install**\uFF0Cit not only makes development easier\uFF0Cbut also allow you to take advantage of the rich ecosystem of Javascript packages and tooling."},{level:3,title:"Import in Browser",slug:"Import-in-Browser",content:"Add `script` and `link` tags in your browser and use the global variable `antd`."},{level:2,title:"Usage",slug:"Usage",content:""},{level:3,title:"Use modularized antd",slug:"Use-modularized-antd",content:""},{level:2,title:"Links",slug:"Links",content:""},{level:2,title:"Contributing",slug:"Contributing",content:"If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/issue-helper/)."},{level:2,title:"About ant-design-vue",slug:"About-ant-design-vue",content:"As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design."},{level:2,title:"THANK YOU",slug:"THANK-YOU",content:"[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)"}],relativePath:"site/src/vueDocs/introduce.en-US.md",content:`# Ant Design of Vue
    2. 

  2. 

  3. Following the Ant Design specification, we developed a Vue UI library \`antd\` that contains a set of high quality components and demos for building rich, interactive user interfaces.
    4. 

  4. 

  5. <div class="pic-plus">
    6. 

  6.   <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
    7. 

  7.   <span>+</span>
    8. 

  8.   <img width="160" src="https://qn.antdv.com/vue.png" />
    9. 

  9. </div>
    10. 

  10. 

  11. <style>
    12. 

  12. .pic-plus > * {
    13. 

  13.   display: inline-block !important;
    14. 

  14.   vertical-align: middle;
    15. 

  15. }
    16. 

  16. .pic-plus span {
    17. 

  17.   font-size: 30px;
    18. 

  18.   color: #aaa;
    19. 

  19.   margin: 0 20px;
    20. 

  20. }
    21. 

  21. </style>
    22. 

  22. 

  23. ## Features
    24. 

  24. 

  25. - An enterprise-class UI design language for web applications.
    26. 

  26. - A set of high-quality Vue components out of the box.
    27. 

  27. - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
    28. 

  28. 

  29. ## Environment Support
    30. 

  30. 

  31. - Modern browsers. You can use [1.x](https://1x.antdv.com/) for IE9+.
    32. 

  32. - Server-side Rendering
    33. 

  33. - [Electron](https://electronjs.org/)
    34. 

  34. 

  35. | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron |
    36. 

  36. | --- | --- | --- | --- | --- | --- |
    37. 

  37. | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
    38. 

  38. 

  39. ## Version
    40. 

  40. 

  41. - Stable: [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
    42. 

  42. 

  43. You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design-vue/releases.atom
    44. 

  44. 

  45. ## Installation
    46. 

  46. 

  47. ### Using npm or yarn
    48. 

  48. 

  49. **We recommend using npm or yarn to install**\uFF0Cit not only makes development easier\uFF0Cbut also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
    50. 

  50. 

  51. \`\`\`bash
    52. 

  52. $ npm install ant-design-vue --save
    53. 

  53. \`\`\`
    54. 

  54. 

  55. \`\`\`bash
    56. 

  56. $ yarn add ant-design-vue
    57. 

  57. \`\`\`
    58. 

  58. 

  59. If you are in a bad network environment\uFF0Cyou can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
    60. 

  60. 

  61. ### Import in Browser
    62. 

  62. 

  63. Add \`script\` and \`link\` tags in your browser and use the global variable \`antd\`.
    64. 

  64. 

  65. We provide \`antd.js\` \`antd.css\` and \`antd.min.js\` \`antd.min.css\` under \`ant-design-vue/dist\` in antd's npm package. You can also download these files directly from [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) or [unpkg](https://unpkg.com/ant-design-vue/dist/).
    66. 

  66. 

  67. > **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
    68. 

  68. 

  69. > Note: you should import [dayjs](https://day.js.org/) and dayjs plugins before using antd.js.
    70. 

  70. 

  71. Like:
    72. 

  72. 

  73. \`\`\`html
    74. 

  74. <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    75. 

  75. <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    76. 

  76. <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    77. 

  77. <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    78. 

  78. <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    79. 

  79. <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    80. 

  80. <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    81. 

  81. <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
    82. 

  82. \`\`\`
    83. 

  83. 

  84. ## Usage
    85. 

  85. 

  86. \`\`\`jsx
    87. 

  87. import { DatePicker } from 'ant-design-vue';
    88. 

  88. app.use(DatePicker);
    89. 

  89. \`\`\`
    90. 

  90. 

  91. And import stylesheets manually:
    92. 

  92. 

  93. \`\`\`jsx
    94. 

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

  95. \`\`\`
    96. 

  96. 

  97. ### Use modularized antd
    98. 

  98. 

  99. - Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
    100. 

  100. 

  101.   \`\`\`jsx
    102. 

  102.   // .babelrc or babel-loader option
    103. 

  103.   {
    104. 

  104.     "plugins": [
    105. 

  105.       ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // \`style: true\` for less
    106. 

  106.     ]
    107. 

  107.   }
    108. 

  108.   \`\`\`
    109. 

  109. 

  110.   > Note: Don't set \`libraryDirectory\` if you are using webpack 1.
    111. 

  111. 

  112.   This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
    113. 

  113. 

  114.   \`\`\`jsx
    115. 

  115.   // import js and css modularly, parsed by babel-plugin-import
    116. 

  116.   import { DatePicker } from 'ant-design-vue';
    117. 

  117.   \`\`\`
    118. 

  118. 

  119. - Manually import
    120. 

  120. 

  121.   \`\`\`jsx
    122. 

  122.   import DatePicker from 'ant-design-vue/lib/date-picker'; // for js
    123. 

  123.   import 'ant-design-vue/lib/date-picker/style/css'; // for css
    124. 

  124.   // import 'ant-design-vue/lib/date-picker/style';         // that will import less
    125. 

  125.   \`\`\`
    126. 

  126. 

  127. - For Vite
    128. 

  128. 

  129.   \`\`\`js
    130. 

  130.   // vite.config.js
    131. 

  131.   import Components from 'unplugin-vue-components/vite';
    132. 

  132.   import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
    133. 

  133. 

  134.   export default {
    135. 

  135.     plugins: [
    136. 

  136.       /* ... */
    137. 

  137.       Components({
    138. 

  138.         resolvers: [AntDesignVueResolver()],
    139. 

  139.       }),
    140. 

  140.     ],
    141. 

  141.   };
    142. 

  142.   \`\`\`
    143. 

  143. 

  144. ## Links
    145. 

  145. 

  146. - [Home Page](https://www.antdv.com/)
    147. 

  147. - [Ant Design Of React](https://ant.design/)
    148. 

  148. - [Components](https://www.antdv.com/components/overview)
    149. 

  149. - [Change Log](/docs/vue/changelog)
    150. 

  150. - [CodeSandbox template](https://codesandbox.io/s/agitated-franklin-1w72v) for bug reports
    151. 

  151. - [Customize Theme](/docs/vue/customize-theme)
    152. 

  152. - [FAQ](/docs/vue/faq)
    153. 

  153. - [Support US](/docs/vue/sponsor)
    154. 

  154. - [Awesome Ant Design](https://github.com/vueComponent/ant-design-vue-awesome)
    155. 

  155. 

  156. ## Contributing
    157. 

  157. 

  158. If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/issue-helper/).
    159. 

  159. 

  160. > If you're new to posting issues, we ask that you read [_How To Ask Questions The Smart Way_](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
    161. 

  161. 

  162. ## About ant-design-vue
    163. 

  163. 

  164. As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design.
    165. 

  165. 

  166. The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible.
    167. 

  167. 

  168. Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience.
    169. 

  169. 

  170. ## THANK YOU
    171. 

  171. 

  172. [Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)
    173. 

  173. `,html:`<h1 id="Ant-Design-of-Vue">Ant Design of Vue <a class="header-anchor" href="#Ant-Design-of-Vue">
    174. 

  174.           <span aria-hidden="true" class="anchor">#</span>
    175. 

  175.         </a></h1>
    176. 

  176. <p>Following the Ant Design specification, we developed a Vue UI library <code>antd</code> that contains a set of high quality components and demos for building rich, interactive user interfaces.</p>
    177. 

  177. <div class="pic-plus">
    178. 

  178.   <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
    179. 

  179.   <span>+</span>
    180. 

  180.   <img width="160" src="https://qn.antdv.com/vue.png" />
    181. 

  181. </div>
    182. 

  182. <h2 id="Features">Features <a class="header-anchor" href="#Features">
    183. 

  183.           <span aria-hidden="true" class="anchor">#</span>
    184. 

  184.         </a></h2>
    185. 

  185. <ul>
    186. 

  186. <li>An enterprise-class UI design language for web applications.</li>
    187. 

  187. <li>A set of high-quality Vue components out of the box.</li>
    188. 

  188. <li>Shared <a href="https://ant.design/docs/spec/introduce" target="_blank" rel="noopener noreferrer">Ant Design of React</a> design resources.</li>
    189. 

  189. </ul>
    190. 

  190. <h2 id="Environment-Support">Environment Support <a class="header-anchor" href="#Environment-Support">
    191. 

  191.           <span aria-hidden="true" class="anchor">#</span>
    192. 

  192.         </a></h2>
    193. 

  193. <ul>
    194. 

  194. <li>Modern browsers. You can use <a href="https://1x.antdv.com/" target="_blank" rel="noopener noreferrer">1.x</a> for IE9+.</li>
    195. 

  195. <li>Server-side Rendering</li>
    196. 

  196. <li><a href="https://electronjs.org/" target="_blank" rel="noopener noreferrer">Electron</a></li>
    197. 

  197. </ul>
    198. 

  198. <table>
    199. 

  199. <thead>
    200. 

  200. <tr>
    201. 

  201. <th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /></a><br/> Edge</th>
    202. 

  202. <th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></a><br/>Firefox</th>
    203. 

  203. <th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></a><br/>Chrome</th>
    204. 

  204. <th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></a><br/>Safari</th>
    205. 

  205. <th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" /></a><br/>Opera</th>
    206. 

  206. <th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" /></a><br/>Electron</th>
    207. 

  207. </tr>
    208. 

  208. </thead>
    209. 

  209. <tbody>
    210. 

  210. <tr>
    211. 

  211. <td>Edge</td>
    212. 

  212. <td>last 2 versions</td>
    213. 

  213. <td>last 2 versions</td>
    214. 

  214. <td>last 2 versions</td>
    215. 

  215. <td>last 2 versions</td>
    216. 

  216. <td>last 2 versions</td>
    217. 

  217. </tr>
    218. 

  218. </tbody>
    219. 

  219. </table>
    220. 

  220. <h2 id="Version">Version <a class="header-anchor" href="#Version">
    221. 

  221.           <span aria-hidden="true" class="anchor">#</span>
    222. 

  222.         </a></h2>
    223. 

  223. <ul>
    224. 

  224. <li>Stable: <a href="https://www.npmjs.org/package/ant-design-vue" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square" alt="npm package"></a></li>
    225. 

  225. </ul>
    226. 

  226. <p>You can subscribe to this feed for new version notifications: <a href="https://github.com/vueComponent/ant-design-vue/releases.atom" target="_blank" rel="noopener noreferrer">https://github.com/vueComponent/ant-design-vue/releases.atom</a></p>
    227. 

  227. <h2 id="Installation">Installation <a class="header-anchor" href="#Installation">
    228. 

  228.           <span aria-hidden="true" class="anchor">#</span>
    229. 

  229.         </a></h2>
    230. 

  230. <h3 id="Using-npm-or-yarn">Using npm or yarn <a class="header-anchor" href="#Using-npm-or-yarn">
    231. 

  231.           <span aria-hidden="true" class="anchor">#</span>
    232. 

  232.         </a></h3>
    233. 

  233. <p><strong>We recommend using npm or yarn to install</strong>\uFF0Cit not only makes development easier\uFF0Cbut also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.</p>
    234. 

  234. <pre class="language-bash" v-pre><code>$ <span class="token function">npm</span> <span class="token function">install</span> ant-design-vue <span class="token parameter variable">--save</span>
    235. 

  235. </code></pre>
    236. 

  236. <pre class="language-bash" v-pre><code>$ <span class="token function">yarn</span> <span class="token function">add</span> ant-design-vue
    237. 

  237. </code></pre>
    238. 

  238. <p>If you are in a bad network environment\uFF0Cyou can try other registries and tools like <a href="https://github.com/cnpm/cnpm" target="_blank" rel="noopener noreferrer">cnpm</a>.</p>
    239. 

  239. <h3 id="Import-in-Browser">Import in Browser <a class="header-anchor" href="#Import-in-Browser">
    240. 

  240.           <span aria-hidden="true" class="anchor">#</span>
    241. 

  241.         </a></h3>
    242. 

  242. <p>Add <code>script</code> and <code>link</code> tags in your browser and use the global variable <code>antd</code>.</p>
    243. 

  243. <p>We provide <code>antd.js</code> <code>antd.css</code> and <code>antd.min.js</code> <code>antd.min.css</code> under <code>ant-design-vue/dist</code> in antd's npm package. You can also download these files directly from <a href="https://www.jsdelivr.com/package/npm/ant-design-vue" target="_blank" rel="noopener noreferrer"><img src="https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge" alt="jsdelivr"></a> or <a href="https://unpkg.com/ant-design-vue/dist/" target="_blank" rel="noopener noreferrer">unpkg</a>.</p>
    244. 

  244. <blockquote>
    245. 

  245. <p><strong>We strongly discourage loading the entire files</strong> this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as <a href="https://webpack.github.io/" target="_blank" rel="noopener noreferrer">webpack</a>, which will make it easy to import only the parts of antd that you are using.</p>
    246. 

  246. </blockquote>
    247. 

  247. <blockquote>
    248. 

  248. <p>Note: you should import <a href="https://day.js.org/" target="_blank" rel="noopener noreferrer">dayjs</a> and dayjs plugins before using antd.js.</p>
    249. 

  249. </blockquote>
    250. 

  250. <p>Like:</p>
    251. 

  251. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/dayjs.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    252. 

  252. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/customParseFormat.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    253. 

  253. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/weekday.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    254. 

  254. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/localeData.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    255. 

  255. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/weekOfYear.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    256. 

  256. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/weekYear.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    257. 

  257. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/advancedFormat.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    258. 

  258. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/dayjs/plugin/quarterOfYear.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    259. 

  259. </code></pre>
    260. 

  260. <h2 id="Usage">Usage <a class="header-anchor" href="#Usage">
    261. 

  261.           <span aria-hidden="true" class="anchor">#</span>
    262. 

  262.         </a></h2>
    263. 

  263. <pre class="language-jsx" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
    264. 

  264. app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>DatePicker<span class="token punctuation">)</span><span class="token punctuation">;</span>
    265. 

  265. </code></pre>
    266. 

  266. <p>And import stylesheets manually:</p>
    267. 

  267. <pre class="language-jsx" v-pre><code><span class="token keyword">import</span> <span class="token string">'ant-design-vue/dist/antd.css'</span><span class="token punctuation">;</span> <span class="token comment">// or 'ant-design-vue/dist/antd.less'</span>
    268. 

  268. </code></pre>
    269. 

  269. <h3 id="Use-modularized-antd">Use modularized antd <a class="header-anchor" href="#Use-modularized-antd">
    270. 

  270.           <span aria-hidden="true" class="anchor">#</span>
    271. 

  271.         </a></h3>
    272. 

  272. <ul>
    273. 

  273. <li>
    274. 

  274. <p>Use <a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noopener noreferrer">babel-plugin-import</a> (Recommended)</p>
    275. 

  275. <pre class="language-jsx" v-pre><code><span class="token comment">// .babelrc or babel-loader option</span>
    276. 

  276. <span class="token punctuation">{</span>
    277. 

  277.   <span class="token string-property property">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    278. 

  278.     <span class="token punctuation">[</span><span class="token string">"import"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string-property property">"libraryName"</span><span class="token operator">:</span> <span class="token string">"ant-design-vue"</span><span class="token punctuation">,</span> <span class="token string-property property">"libraryDirectory"</span><span class="token operator">:</span> <span class="token string">"es"</span><span class="token punctuation">,</span> <span class="token string-property property">"style"</span><span class="token operator">:</span> <span class="token string">"css"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token comment">// \`style: true\` for less</span>
    279. 

  279.   <span class="token punctuation">]</span>
    280. 

  280. <span class="token punctuation">}</span>
    281. 

  281. </code></pre>
    282. 

  282. <blockquote>
    283. 

  283. <p>Note: Don't set <code>libraryDirectory</code> if you are using webpack 1.</p>
    284. 

  284. </blockquote>
    285. 

  285. <p>This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.</p>
    286. 

  286. <pre class="language-jsx" v-pre><code><span class="token comment">// import js and css modularly, parsed by babel-plugin-import</span>
    287. 

  287. <span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
    288. 

  288. </code></pre>
    289. 

  289. </li>
    290. 

  290. <li>
    291. 

  291. <p>Manually import</p>
    292. 

  292. <pre class="language-jsx" v-pre><code><span class="token keyword">import</span> DatePicker <span class="token keyword">from</span> <span class="token string">'ant-design-vue/lib/date-picker'</span><span class="token punctuation">;</span> <span class="token comment">// for js</span>
    293. 

  293. <span class="token keyword">import</span> <span class="token string">'ant-design-vue/lib/date-picker/style/css'</span><span class="token punctuation">;</span> <span class="token comment">// for css</span>
    294. 

  294. <span class="token comment">// import 'ant-design-vue/lib/date-picker/style';         // that will import less</span>
    295. 

  295. </code></pre>
    296. 

  296. </li>
    297. 

  297. <li>
    298. 

  298. <p>For Vite</p>
    299. 

  299. <pre class="language-js" v-pre><code><span class="token comment">// vite.config.js</span>
    300. 

  300. <span class="token keyword">import</span> Components <span class="token keyword">from</span> <span class="token string">'unplugin-vue-components/vite'</span><span class="token punctuation">;</span>
    301. 

  301. <span class="token keyword">import</span> <span class="token punctuation">{</span> AntDesignVueResolver <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unplugin-vue-components/resolvers'</span><span class="token punctuation">;</span>
    302. 

  302. 

  303. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    304. 

  304.   <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    305. 

  305.     <span class="token comment">/* ... */</span>
    306. 

  306.     <span class="token function">Components</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    307. 

  307.       <span class="token literal-property property">resolvers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">AntDesignVueResolver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    308. 

  308.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    309. 

  309.   <span class="token punctuation">]</span><span class="token punctuation">,</span>
    310. 

  310. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    311. 

  311. </code></pre>
    312. 

  312. </li>
    313. 

  313. </ul>
    314. 

  314. <h2 id="Links">Links <a class="header-anchor" href="#Links">
    315. 

  315.           <span aria-hidden="true" class="anchor">#</span>
    316. 

  316.         </a></h2>
    317. 

  317. <ul>
    318. 

  318. <li><a href="https://www.antdv.com/" target="_blank" rel="noopener noreferrer">Home Page</a></li>
    319. 

  319. <li><a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design Of React</a></li>
    320. 

  320. <li><a href="https://www.antdv.com/components/overview" target="_blank" rel="noopener noreferrer">Components</a></li>
    321. 

  321. <li><a href="/docs/vue/changelog">Change Log</a></li>
    322. 

  322. <li><a href="https://codesandbox.io/s/agitated-franklin-1w72v" target="_blank" rel="noopener noreferrer">CodeSandbox template</a> for bug reports</li>
    323. 

  323. <li><a href="/docs/vue/customize-theme">Customize Theme</a></li>
    324. 

  324. <li><a href="/docs/vue/faq">FAQ</a></li>
    325. 

  325. <li><a href="/docs/vue/sponsor">Support US</a></li>
    326. 

  326. <li><a href="https://github.com/vueComponent/ant-design-vue-awesome" target="_blank" rel="noopener noreferrer">Awesome Ant Design</a></li>
    327. 

  327. </ul>
    328. 

  328. <h2 id="Contributing">Contributing <a class="header-anchor" href="#Contributing">
    329. 

  329.           <span aria-hidden="true" class="anchor">#</span>
    330. 

  330.         </a></h2>
    331. 

  331. <p>If you'd like to help us improve antd, just create a <a href="https://github.com/vueComponent/ant-design-vue/pulls" target="_blank" rel="noopener noreferrer">Pull Request</a>. Feel free to report bugs and issues <a href="https://vuecomponent.github.io/issue-helper/" target="_blank" rel="noopener noreferrer">here</a>.</p>
    332. 

  332. <blockquote>
    333. 

  333. <p>If you're new to posting issues, we ask that you read <a href="http://www.catb.org/~esr/faqs/smart-questions.html" target="_blank" rel="noopener noreferrer"><em>How To Ask Questions The Smart Way</em></a> and <a href="https://github.com/seajs/seajs/issues/545" target="_blank" rel="noopener noreferrer">How to Ask a Question in Open Source Community</a> and <a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html" target="_blank" rel="noopener noreferrer">How to Report Bugs Effectively</a> prior to posting. Well written bug reports help us help you!</p>
    334. 

  334. </blockquote>
    335. 

  335. <h2 id="About-ant-design-vue">About ant-design-vue <a class="header-anchor" href="#About-ant-design-vue">
    336. 

  336.           <span aria-hidden="true" class="anchor">#</span>
    337. 

  337.         </a></h2>
    338. 

  338. <p>As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design.</p>
    339. 

  339. <p>The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible.</p>
    340. 

  340. <p>Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience.</p>
    341. 

  341. <h2 id="THANK-YOU">THANK YOU <a class="header-anchor" href="#THANK-YOU">
    342. 

  342.           <span aria-hidden="true" class="anchor">#</span>
    343. 

  343.         </a></h2>
    344. 

  344. <p><a href="https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt" target="_blank" rel="noopener noreferrer">Ant Design Team</a></p>
    345. 

  345. `,lastUpdated:1748060301811}},p={class:"markdown"};function r(i,n,l,c,u,g){return e(),a("article",p,n[0]||(n[0]=[t(`<h1 id="Ant-Design-of-Vue">Ant Design of Vue <a class="header-anchor" href="#Ant-Design-of-Vue"><span aria-hidden="true" class="anchor">#</span></a></h1><p>Following the Ant Design specification, we developed a Vue UI library <code>antd</code> that contains a set of high quality components and demos for building rich, interactive user interfaces.</p><div class="pic-plus"><img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"><span>+</span><img width="160" src="https://qn.antdv.com/vue.png"></div><h2 id="Features">Features <a class="header-anchor" href="#Features"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li>An enterprise-class UI design language for web applications.</li><li>A set of high-quality Vue components out of the box.</li><li>Shared <a href="https://ant.design/docs/spec/introduce" target="_blank" rel="noopener noreferrer">Ant Design of React</a> design resources.</li></ul><h2 id="Environment-Support">Environment Support <a class="header-anchor" href="#Environment-Support"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li>Modern browsers. You can use <a href="https://1x.antdv.com/" target="_blank" rel="noopener noreferrer">1.x</a> for IE9+.</li><li>Server-side Rendering</li><li><a href="https://electronjs.org/" target="_blank" rel="noopener noreferrer">Electron</a></li></ul><table><thead><tr><th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px"></a><br> Edge</th><th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px"></a><br>Firefox</th><th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px"></a><br>Chrome</th><th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px"></a><br>Safari</th><th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px"></a><br>Opera</th><th><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px"></a><br>Electron</th></tr></thead><tbody><tr><td>Edge</td><td>last 2 versions</td><td>last 2 versions</td><td>last 2 versions</td><td>last 2 versions</td><td>last 2 versions</td></tr></tbody></table><h2 id="Version">Version <a class="header-anchor" href="#Version"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li>Stable: <a href="https://www.npmjs.org/package/ant-design-vue" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square" alt="npm package"></a></li></ul><p>You can subscribe to this feed for new version notifications: <a href="https://github.com/vueComponent/ant-design-vue/releases.atom" target="_blank" rel="noopener noreferrer">https://github.com/vueComponent/ant-design-vue/releases.atom</a></p><h2 id="Installation">Installation <a class="header-anchor" href="#Installation"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="Using-npm-or-yarn">Using npm or yarn <a class="header-anchor" href="#Using-npm-or-yarn"><span aria-hidden="true" class="anchor">#</span></a></h3><p><strong>We recommend using npm or yarn to install</strong>\uFF0Cit not only makes development easier\uFF0Cbut also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.</p><pre class="language-bash"><code>$ <span class="token function">npm</span> <span class="token function">install</span> ant-design-vue <span class="token parameter variable">--save</span>
    346. 

  346. </code></pre><pre class="language-bash"><code>$ <span class="token function">yarn</span> <span class="token function">add</span> ant-design-vue
    347. 

  347. </code></pre><p>If you are in a bad network environment\uFF0Cyou can try other registries and tools like <a href="https://github.com/cnpm/cnpm" target="_blank" rel="noopener noreferrer">cnpm</a>.</p><h3 id="Import-in-Browser">Import in Browser <a class="header-anchor" href="#Import-in-Browser"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Add <code>script</code> and <code>link</code> tags in your browser and use the global variable <code>antd</code>.</p><p>We provide <code>antd.js</code> <code>antd.css</code> and <code>antd.min.js</code> <code>antd.min.css</code> under <code>ant-design-vue/dist</code> in antd&#39;s npm package. You can also download these files directly from <a href="https://www.jsdelivr.com/package/npm/ant-design-vue" target="_blank" rel="noopener noreferrer"><img src="https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge" alt="jsdelivr"></a> or <a href="https://unpkg.com/ant-design-vue/dist/" target="_blank" rel="noopener noreferrer">unpkg</a>.</p><blockquote><p><strong>We strongly discourage loading the entire files</strong> this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as <a href="https://webpack.github.io/" target="_blank" rel="noopener noreferrer">webpack</a>, which will make it easy to import only the parts of antd that you are using.</p></blockquote><blockquote><p>Note: you should import <a href="https://day.js.org/" target="_blank" rel="noopener noreferrer">dayjs</a> and dayjs plugins before using antd.js.</p></blockquote><p>Like:</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/dayjs.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    348. 

  348. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/customParseFormat.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    349. 

  349. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/weekday.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    350. 

  350. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/localeData.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    351. 

  351. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/weekOfYear.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    352. 

  352. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/weekYear.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    353. 

  353. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/advancedFormat.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    354. 

  354. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/dayjs/plugin/quarterOfYear.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    355. 

  355. </code></pre><h2 id="Usage">Usage <a class="header-anchor" href="#Usage"><span aria-hidden="true" class="anchor">#</span></a></h2><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
    356. 

  356. app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>DatePicker<span class="token punctuation">)</span><span class="token punctuation">;</span>
    357. 

  357. </code></pre><p>And import stylesheets manually:</p><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token string">&#39;ant-design-vue/dist/antd.css&#39;</span><span class="token punctuation">;</span> <span class="token comment">// or &#39;ant-design-vue/dist/antd.less&#39;</span>
    358. 

  358. </code></pre><h3 id="Use-modularized-antd">Use modularized antd <a class="header-anchor" href="#Use-modularized-antd"><span aria-hidden="true" class="anchor">#</span></a></h3><ul><li><p>Use <a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noopener noreferrer">babel-plugin-import</a> (Recommended)</p><pre class="language-jsx"><code><span class="token comment">// .babelrc or babel-loader option</span>
    359. 

  359. <span class="token punctuation">{</span>
    360. 

  360.   <span class="token string-property property">&quot;plugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    361. 

  361.     <span class="token punctuation">[</span><span class="token string">&quot;import&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string-property property">&quot;libraryName&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ant-design-vue&quot;</span><span class="token punctuation">,</span> <span class="token string-property property">&quot;libraryDirectory&quot;</span><span class="token operator">:</span> <span class="token string">&quot;es&quot;</span><span class="token punctuation">,</span> <span class="token string-property property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token string">&quot;css&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token comment">// \`style: true\` for less</span>
    362. 

  362.   <span class="token punctuation">]</span>
    363. 

  363. <span class="token punctuation">}</span>
    364. 

  364. </code></pre><blockquote><p>Note: Don&#39;t set <code>libraryDirectory</code> if you are using webpack 1.</p></blockquote><p>This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.</p><pre class="language-jsx"><code><span class="token comment">// import js and css modularly, parsed by babel-plugin-import</span>
    365. 

  365. <span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
    366. 

  366. </code></pre></li><li><p>Manually import</p><pre class="language-jsx"><code><span class="token keyword">import</span> DatePicker <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue/lib/date-picker&#39;</span><span class="token punctuation">;</span> <span class="token comment">// for js</span>
    367. 

  367. <span class="token keyword">import</span> <span class="token string">&#39;ant-design-vue/lib/date-picker/style/css&#39;</span><span class="token punctuation">;</span> <span class="token comment">// for css</span>
    368. 

  368. <span class="token comment">// import &#39;ant-design-vue/lib/date-picker/style&#39;;         // that will import less</span>
    369. 

  369. </code></pre></li><li><p>For Vite</p><pre class="language-js"><code><span class="token comment">// vite.config.js</span>
    370. 

  370. <span class="token keyword">import</span> Components <span class="token keyword">from</span> <span class="token string">&#39;unplugin-vue-components/vite&#39;</span><span class="token punctuation">;</span>
    371. 

  371. <span class="token keyword">import</span> <span class="token punctuation">{</span> AntDesignVueResolver <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;unplugin-vue-components/resolvers&#39;</span><span class="token punctuation">;</span>
    372. 

  372. 

  373. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    374. 

  374.   <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    375. 

  375.     <span class="token comment">/* ... */</span>
    376. 

  376.     <span class="token function">Components</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    377. 

  377.       <span class="token literal-property property">resolvers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">AntDesignVueResolver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    378. 

  378.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    379. 

  379.   <span class="token punctuation">]</span><span class="token punctuation">,</span>
    380. 

  380. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    381. 

  381. </code></pre></li></ul><h2 id="Links">Links <a class="header-anchor" href="#Links"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li><a href="https://www.antdv.com/" target="_blank" rel="noopener noreferrer">Home Page</a></li><li><a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design Of React</a></li><li><a href="https://www.antdv.com/components/overview" target="_blank" rel="noopener noreferrer">Components</a></li><li><a href="/docs/vue/changelog">Change Log</a></li><li><a href="https://codesandbox.io/s/agitated-franklin-1w72v" target="_blank" rel="noopener noreferrer">CodeSandbox template</a> for bug reports</li><li><a href="/docs/vue/customize-theme">Customize Theme</a></li><li><a href="/docs/vue/faq">FAQ</a></li><li><a href="/docs/vue/sponsor">Support US</a></li><li><a href="https://github.com/vueComponent/ant-design-vue-awesome" target="_blank" rel="noopener noreferrer">Awesome Ant Design</a></li></ul><h2 id="Contributing">Contributing <a class="header-anchor" href="#Contributing"><span aria-hidden="true" class="anchor">#</span></a></h2><p>If you&#39;d like to help us improve antd, just create a <a href="https://github.com/vueComponent/ant-design-vue/pulls" target="_blank" rel="noopener noreferrer">Pull Request</a>. Feel free to report bugs and issues <a href="https://vuecomponent.github.io/issue-helper/" target="_blank" rel="noopener noreferrer">here</a>.</p><blockquote><p>If you&#39;re new to posting issues, we ask that you read <a href="http://www.catb.org/~esr/faqs/smart-questions.html" target="_blank" rel="noopener noreferrer"><em>How To Ask Questions The Smart Way</em></a> and <a href="https://github.com/seajs/seajs/issues/545" target="_blank" rel="noopener noreferrer">How to Ask a Question in Open Source Community</a> and <a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html" target="_blank" rel="noopener noreferrer">How to Report Bugs Effectively</a> prior to posting. Well written bug reports help us help you!</p></blockquote><h2 id="About-ant-design-vue">About ant-design-vue <a class="header-anchor" href="#About-ant-design-vue"><span aria-hidden="true" class="anchor">#</span></a></h2><p>As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design.</p><p>The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible.</p><p>Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience.</p><h2 id="THANK-YOU">THANK YOU <a class="header-anchor" href="#THANK-YOU"><span aria-hidden="true" class="anchor">#</span></a></h2><p><a href="https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt" target="_blank" rel="noopener noreferrer">Ant Design Team</a></p>`,41)]))}const h=s(o,[["render",r]]);export{h as default};
    382.