import{_ as s,a,q as t,k as e}from"./index.3fe853a6.js";const p={pageData:{title:"Ant Design of Vue",description:"",frontmatter:{},headers:[{level:2,title:"\u7279\u6027",slug:"\u7279\u6027",content:""},{level:2,title:"\u652F\u6301\u73AF\u5883",slug:"\u652F\u6301\u73AF\u5883",content:""},{level:2,title:"\u7248\u672C",slug:"\u7248\u672C",content:""},{level:2,title:"\u5B89\u88C5",slug:"\u5B89\u88C5",content:"\u4F7F\u7528 npm \u6216 yarn \u5B89\u88C5"},{level:3,title:"\u4F7F\u7528 npm \u6216 yarn \u5B89\u88C5",slug:"\u4F7F\u7528-npm-\u6216-yarn-\u5B89\u88C5",content:"**\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 npm \u6216 yarn \u7684\u65B9\u5F0F\u8FDB\u884C\u5F00\u53D1**\uFF0C\u4E0D\u4EC5\u53EF\u5728\u5F00\u53D1\u73AF\u5883\u8F7B\u677E\u8C03\u8BD5\uFF0C\u4E5F\u53EF\u653E\u5FC3\u5730\u5728\u751F\u4EA7\u73AF\u5883\u6253\u5305\u90E8\u7F72\u4F7F\u7528\uFF0C\u4EAB\u53D7\u6574\u4E2A\u751F\u6001\u5708\u548C\u5DE5\u5177\u94FE\u5E26\u6765\u7684\u8BF8\u591A\u597D\u5904\u3002"},{level:3,title:"\u6D4F\u89C8\u5668\u5F15\u5165",slug:"\u6D4F\u89C8\u5668\u5F15\u5165",content:"\u5728\u6D4F\u89C8\u5668\u4E2D\u4F7F\u7528 `script` \u548C `link` \u6807\u7B7E\u76F4\u63A5\u5F15\u5165\u6587\u4EF6\uFF0C\u5E76\u4F7F\u7528\u5168\u5C40\u53D8\u91CF `antd`\u3002"},{level:2,title:"\u793A\u4F8B",slug:"\u793A\u4F8B",content:""},{level:3,title:"\u6309\u9700\u52A0\u8F7D",slug:"\u6309\u9700\u52A0\u8F7D",content:"\u4E0B\u9762\u4E24\u79CD\u65B9\u5F0F\u90FD\u53EF\u4EE5\u53EA\u52A0\u8F7D\u7528\u5230\u7684\u7EC4\u4EF6\u3002"},{level:2,title:"\u94FE\u63A5",slug:"\u94FE\u63A5",content:""},{level:2,title:"\u5982\u4F55\u8D21\u732E",slug:"\u5982\u4F55\u8D21\u732E",content:"\u5982\u679C\u4F60\u5E0C\u671B\u53C2\u4E0E\u8D21\u732E\uFF0C\u6B22\u8FCE [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls)\uFF0C\u6216\u7ED9\u6211\u4EEC [\u62A5\u544A Bug](https://vuecomponent.github.io/issue-helper/)([\u56FD\u5185\u955C\u50CF](http://ant-design-vue.gitee.io/issue-helper/))\u3002"},{level:2,title:"\u5173\u4E8E ant-design-vue",slug:"\u5173\u4E8E-ant-design-vue",content:"\u4F17\u6240\u5468\u77E5\uFF0CAnt Design \u4F5C\u4E3A\u4E00\u95E8\u8BBE\u8BA1\u8BED\u8A00\u9762\u4E16\uFF0C\u7ECF\u5386\u8FC7\u591A\u5E74\u7684\u8FED\u4EE3\u548C\u79EF\u7D2F\uFF0C\u5B83\u5BF9 UI \u7684\u8BBE\u8BA1\u601D\u60F3\u5DF2\u7ECF\u6210\u4E3A\u4E00\u5957\u4E8B\u5B9E\u6807\u51C6\uFF0C\u53D7\u5230\u4F17\u591A\u524D\u7AEF\u5F00\u53D1\u8005\u53CA\u4F01\u4E1A\u7684\u8FFD\u6367\u548C\u559C\u7231\uFF0C\u4E5F\u662F React \u5F00\u53D1\u8005\u624B\u4E2D\u7684\u795E\u5175\u5229\u5668\u3002\u5E0C\u671B ant-design-vue \u80FD\u591F\u8BA9 Vue \u5F00\u53D1\u8005\u4E5F\u4EAB\u53D7\u5230 Ant Design \u7684\u4F18\u79C0\u8BBE\u8BA1\u3002"},{level:2,title:"\u7279\u522B\u611F\u8C22",slug:"\u7279\u522B\u611F\u8C22",content:"[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)"}],relativePath:"site/src/vueDocs/introduce.zh-CN.md",content:`# Ant Design of Vue
\u8FD9\u91CC\u662F Ant Design \u7684 Vue \u5B9E\u73B0\uFF0C\u5F00\u53D1\u548C\u670D\u52A1\u4E8E\u4F01\u4E1A\u7EA7\u540E\u53F0\u4EA7\u54C1\u3002
<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>
<style>
.pic-plus > * {
display: inline-block !important;
vertical-align: middle;
}
.pic-plus span {
font-size: 30px;
color: #aaa;
margin: 0 20px;
}
</style>
## \u7279\u6027
- \u63D0\u70BC\u81EA\u4F01\u4E1A\u7EA7\u4E2D\u540E\u53F0\u4EA7\u54C1\u7684\u4EA4\u4E92\u8BED\u8A00\u548C\u89C6\u89C9\u98CE\u683C\u3002
- \u5F00\u7BB1\u5373\u7528\u7684\u9AD8\u8D28\u91CF Vue \u7EC4\u4EF6\u3002
- \u5171\u4EAB[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)\u8BBE\u8BA1\u5DE5\u5177\u4F53\u7CFB\u3002
## \u652F\u6301\u73AF\u5883
- \u73B0\u4EE3\u6D4F\u89C8\u5668, \u5982\u679C\u9700\u8981\u652F\u6301 IE9\uFF0C\u4F60\u53EF\u4EE5\u9009\u62E9\u4F7F\u7528 [1.x \u7248\u672C](https://1x.antdv.com/)\u3002
- \u652F\u6301\u670D\u52A1\u7AEF\u6E32\u67D3\u3002
- [Electron](https://electronjs.org/)
| [<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/>IE / 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 |
| --- | --- | --- | --- | --- | --- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## \u7248\u672C
- \u7A33\u5B9A\u7248\uFF1A[](https://www.npmjs.org/package/ant-design-vue)
\u4F60\u53EF\u4EE5\u8BA2\u9605\uFF1Ahttps://github.com/vueComponent/ant-design-vue/releases.atom \u6765\u83B7\u5F97\u7A33\u5B9A\u7248\u53D1\u5E03\u7684\u901A\u77E5\u3002
## \u5B89\u88C5
### \u4F7F\u7528 npm \u6216 yarn \u5B89\u88C5
**\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 npm \u6216 yarn \u7684\u65B9\u5F0F\u8FDB\u884C\u5F00\u53D1**\uFF0C\u4E0D\u4EC5\u53EF\u5728\u5F00\u53D1\u73AF\u5883\u8F7B\u677E\u8C03\u8BD5\uFF0C\u4E5F\u53EF\u653E\u5FC3\u5730\u5728\u751F\u4EA7\u73AF\u5883\u6253\u5305\u90E8\u7F72\u4F7F\u7528\uFF0C\u4EAB\u53D7\u6574\u4E2A\u751F\u6001\u5708\u548C\u5DE5\u5177\u94FE\u5E26\u6765\u7684\u8BF8\u591A\u597D\u5904\u3002
\`\`\`bash
$ npm install ant-design-vue --save
\`\`\`
\`\`\`bash
$ yarn add ant-design-vue
\`\`\`
\u5982\u679C\u4F60\u7684\u7F51\u7EDC\u73AF\u5883\u4E0D\u4F73\uFF0C\u63A8\u8350\u4F7F\u7528 [cnpm](https://github.com/cnpm/cnpm)\u3002
### \u6D4F\u89C8\u5668\u5F15\u5165
\u5728\u6D4F\u89C8\u5668\u4E2D\u4F7F\u7528 \`script\` \u548C \`link\` \u6807\u7B7E\u76F4\u63A5\u5F15\u5165\u6587\u4EF6\uFF0C\u5E76\u4F7F\u7528\u5168\u5C40\u53D8\u91CF \`antd\`\u3002
\u6211\u4EEC\u5728 npm \u53D1\u5E03\u5305\u5185\u7684 \`ant-design-vue/dist\` \u76EE\u5F55\u4E0B\u63D0\u4F9B\u4E86 \`antd.js\` \`antd.css\` \u4EE5\u53CA \`antd.min.js\` \`antd.min.css\`\u3002\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7 [](https://www.jsdelivr.com/package/npm/ant-design-vue) \u6216 [UNPKG](https://unpkg.com/ant-design-vue/dist/) \u8FDB\u884C\u4E0B\u8F7D\u3002
> **\u5F3A\u70C8\u4E0D\u63A8\u8350\u4F7F\u7528\u5DF2\u6784\u5EFA\u6587\u4EF6**\uFF0C\u8FD9\u6837\u65E0\u6CD5\u6309\u9700\u52A0\u8F7D\uFF0C\u800C\u4E14\u96BE\u4EE5\u83B7\u5F97\u5E95\u5C42\u4F9D\u8D56\u6A21\u5757\u7684 bug \u5FEB\u901F\u4FEE\u590D\u652F\u6301\u3002
> \u6CE8\u610F\uFF1A\u5F15\u5165 antd.js \u524D\u4F60\u9700\u8981\u81EA\u884C\u5F15\u5165 [dayjs](https://day.js.org/) \u53CA\u5176\u76F8\u5173\u63D2\u4EF6\u3002
\u5982\uFF1A
\`\`\`html
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
\`\`\`
## \u793A\u4F8B
\`\`\`jsx
import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);
\`\`\`
\u5F15\u5165\u6837\u5F0F\uFF1A
\`\`\`jsx
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
\`\`\`
### \u6309\u9700\u52A0\u8F7D
\u4E0B\u9762\u4E24\u79CD\u65B9\u5F0F\u90FD\u53EF\u4EE5\u53EA\u52A0\u8F7D\u7528\u5230\u7684\u7EC4\u4EF6\u3002
- \u4F7F\u7528 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)\uFF08\u63A8\u8350\uFF09\u3002
\`\`\`jsx
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // \`style: true\` \u4F1A\u52A0\u8F7D less \u6587\u4EF6
]
}
\`\`\`
> \u6CE8\u610F\uFF1Awebpack 1 \u65E0\u9700\u8BBE\u7F6E \`libraryDirectory\`\u3002
\u7136\u540E\u53EA\u9700\u4ECE ant-design-vue \u5F15\u5165\u6A21\u5757\u5373\u53EF\uFF0C\u65E0\u9700\u5355\u72EC\u5F15\u5165\u6837\u5F0F\u3002\u7B49\u540C\u4E8E\u4E0B\u9762\u624B\u52A8\u5F15\u5165\u7684\u65B9\u5F0F\u3002
\`\`\`jsx
// babel-plugin-import \u4F1A\u5E2E\u52A9\u4F60\u52A0\u8F7D JS \u548C CSS
import { DatePicker } from 'ant-design-vue';
\`\`\`
- \u624B\u52A8\u5F15\u5165
\`\`\`jsx
import DatePicker from 'ant-design-vue/lib/date-picker'; // \u52A0\u8F7D JS
import 'ant-design-vue/lib/date-picker/style/css'; // \u52A0\u8F7D CSS
// import 'ant-design-vue/lib/date-picker/style'; // \u52A0\u8F7D LESS
\`\`\`
- Vite \u6309\u9700
\`\`\`js
// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
/* ... */
Components({
resolvers: [AntDesignVueResolver()],
}),
],
};
\`\`\`
## \u94FE\u63A5
- [\u9996\u9875](https://www.antdv.com/)
- [Ant Design Of React](https://ant.design/)
- [\u7EC4\u4EF6\u5E93](https://www.antdv.com/components/overview-cn)
- [\u66F4\u65B0\u65E5\u5FD7](/docs/vue/changelog-cn)
- [CodeSandbox \u6A21\u677F](https://codesandbox.io/s/agitated-franklin-1w72v) for bug reports
- [\u5B9A\u5236\u4E3B\u9898](/docs/vue/customize-theme-cn)
- [\u5E38\u89C1\u95EE\u9898](/docs/vue/faq-cn)
- [\u652F\u6301\u6211\u4EEC](/docs/vue/sponsor-cn)
- [Awesome Ant Design](https://github.com/vueComponent/ant-design-vue-awesome)
## \u5982\u4F55\u8D21\u732E
\u5982\u679C\u4F60\u5E0C\u671B\u53C2\u4E0E\u8D21\u732E\uFF0C\u6B22\u8FCE [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls)\uFF0C\u6216\u7ED9\u6211\u4EEC [\u62A5\u544A Bug](https://vuecomponent.github.io/issue-helper/)([\u56FD\u5185\u955C\u50CF](http://ant-design-vue.gitee.io/issue-helper/))\u3002
> \u5F3A\u70C8\u63A8\u8350\u9605\u8BFB [\u300A\u63D0\u95EE\u7684\u667A\u6167\u300B](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)\u3001[\u300A\u5982\u4F55\u5411\u5F00\u6E90\u793E\u533A\u63D0\u95EE\u9898\u300B](https://github.com/seajs/seajs/issues/545) \u548C [\u300A\u5982\u4F55\u6709\u6548\u5730\u62A5\u544A Bug\u300B](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)\u3001[\u300A\u5982\u4F55\u5411\u5F00\u6E90\u9879\u76EE\u63D0\u4EA4\u65E0\u6CD5\u89E3\u7B54\u7684\u95EE\u9898\u300B](https://zhuanlan.zhihu.com/p/25795393)\uFF0C\u66F4\u597D\u7684\u95EE\u9898\u66F4\u5BB9\u6613\u83B7\u5F97\u5E2E\u52A9\u3002
## \u5173\u4E8E ant-design-vue
\u4F17\u6240\u5468\u77E5\uFF0CAnt Design \u4F5C\u4E3A\u4E00\u95E8\u8BBE\u8BA1\u8BED\u8A00\u9762\u4E16\uFF0C\u7ECF\u5386\u8FC7\u591A\u5E74\u7684\u8FED\u4EE3\u548C\u79EF\u7D2F\uFF0C\u5B83\u5BF9 UI \u7684\u8BBE\u8BA1\u601D\u60F3\u5DF2\u7ECF\u6210\u4E3A\u4E00\u5957\u4E8B\u5B9E\u6807\u51C6\uFF0C\u53D7\u5230\u4F17\u591A\u524D\u7AEF\u5F00\u53D1\u8005\u53CA\u4F01\u4E1A\u7684\u8FFD\u6367\u548C\u559C\u7231\uFF0C\u4E5F\u662F React \u5F00\u53D1\u8005\u624B\u4E2D\u7684\u795E\u5175\u5229\u5668\u3002\u5E0C\u671B ant-design-vue \u80FD\u591F\u8BA9 Vue \u5F00\u53D1\u8005\u4E5F\u4EAB\u53D7\u5230 Ant Design \u7684\u4F18\u79C0\u8BBE\u8BA1\u3002
ant-design-vue \u662F Ant Design \u7684 Vue \u5B9E\u73B0\uFF0C\u7EC4\u4EF6\u7684\u98CE\u683C\u4E0E Ant Design \u4FDD\u6301\u540C\u6B65\uFF0C\u7EC4\u4EF6\u7684 html \u7ED3\u6784\u548C css \u6837\u5F0F\u4E5F\u4FDD\u6301\u4E00\u81F4\uFF0C\u771F\u6B63\u505A\u5230\u4E86\u6837\u5F0F 0 \u4FEE\u6539\uFF0C\u7EC4\u4EF6 API \u4E5F\u5C3D\u91CF\u4FDD\u6301\u4E86\u4E00\u81F4\u3002
Ant Design Vue \u81F4\u529B\u4E8E\u63D0\u4F9B\u7ED9\u7A0B\u5E8F\u5458**\u6109\u60A6**\u7684\u5F00\u53D1\u4F53\u9A8C\u3002
## \u7279\u522B\u611F\u8C22
[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)
`,html:`Ant Design of Vue
\u8FD9\u91CC\u662F Ant Design \u7684 Vue \u5B9E\u73B0\uFF0C\u5F00\u53D1\u548C\u670D\u52A1\u4E8E\u4F01\u4E1A\u7EA7\u540E\u53F0\u4EA7\u54C1\u3002
+
\u7279\u6027
- \u63D0\u70BC\u81EA\u4F01\u4E1A\u7EA7\u4E2D\u540E\u53F0\u4EA7\u54C1\u7684\u4EA4\u4E92\u8BED\u8A00\u548C\u89C6\u89C9\u98CE\u683C\u3002
- \u5F00\u7BB1\u5373\u7528\u7684\u9AD8\u8D28\u91CF Vue \u7EC4\u4EF6\u3002
- \u5171\u4EABAnt Design of React\u8BBE\u8BA1\u5DE5\u5177\u4F53\u7CFB\u3002
\u652F\u6301\u73AF\u5883
- \u73B0\u4EE3\u6D4F\u89C8\u5668, \u5982\u679C\u9700\u8981\u652F\u6301 IE9\uFF0C\u4F60\u53EF\u4EE5\u9009\u62E9\u4F7F\u7528 1.x \u7248\u672C\u3002
- \u652F\u6301\u670D\u52A1\u7AEF\u6E32\u67D3\u3002
- Electron
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
Electron |
| Edge |
last 2 versions |
last 2 versions |
last 2 versions |
last 2 versions |
last 2 versions |
\u7248\u672C
- \u7A33\u5B9A\u7248\uFF1A
\u4F60\u53EF\u4EE5\u8BA2\u9605\uFF1Ahttps://github.com/vueComponent/ant-design-vue/releases.atom \u6765\u83B7\u5F97\u7A33\u5B9A\u7248\u53D1\u5E03\u7684\u901A\u77E5\u3002
\u5B89\u88C5
\u4F7F\u7528 npm \u6216 yarn \u5B89\u88C5
\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 npm \u6216 yarn \u7684\u65B9\u5F0F\u8FDB\u884C\u5F00\u53D1\uFF0C\u4E0D\u4EC5\u53EF\u5728\u5F00\u53D1\u73AF\u5883\u8F7B\u677E\u8C03\u8BD5\uFF0C\u4E5F\u53EF\u653E\u5FC3\u5730\u5728\u751F\u4EA7\u73AF\u5883\u6253\u5305\u90E8\u7F72\u4F7F\u7528\uFF0C\u4EAB\u53D7\u6574\u4E2A\u751F\u6001\u5708\u548C\u5DE5\u5177\u94FE\u5E26\u6765\u7684\u8BF8\u591A\u597D\u5904\u3002
$ npm install ant-design-vue --save
$ yarn add ant-design-vue
\u5982\u679C\u4F60\u7684\u7F51\u7EDC\u73AF\u5883\u4E0D\u4F73\uFF0C\u63A8\u8350\u4F7F\u7528 cnpm\u3002
\u6D4F\u89C8\u5668\u5F15\u5165
\u5728\u6D4F\u89C8\u5668\u4E2D\u4F7F\u7528 script \u548C link \u6807\u7B7E\u76F4\u63A5\u5F15\u5165\u6587\u4EF6\uFF0C\u5E76\u4F7F\u7528\u5168\u5C40\u53D8\u91CF antd\u3002
\u6211\u4EEC\u5728 npm \u53D1\u5E03\u5305\u5185\u7684 ant-design-vue/dist \u76EE\u5F55\u4E0B\u63D0\u4F9B\u4E86 antd.js antd.css \u4EE5\u53CA antd.min.js antd.min.css\u3002\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7 
\u6216 UNPKG \u8FDB\u884C\u4E0B\u8F7D\u3002
\u5F3A\u70C8\u4E0D\u63A8\u8350\u4F7F\u7528\u5DF2\u6784\u5EFA\u6587\u4EF6\uFF0C\u8FD9\u6837\u65E0\u6CD5\u6309\u9700\u52A0\u8F7D\uFF0C\u800C\u4E14\u96BE\u4EE5\u83B7\u5F97\u5E95\u5C42\u4F9D\u8D56\u6A21\u5757\u7684 bug \u5FEB\u901F\u4FEE\u590D\u652F\u6301\u3002
\u6CE8\u610F\uFF1A\u5F15\u5165 antd.js \u524D\u4F60\u9700\u8981\u81EA\u884C\u5F15\u5165 dayjs \u53CA\u5176\u76F8\u5173\u63D2\u4EF6\u3002
\u5982\uFF1A
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
\u793A\u4F8B
import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);
\u5F15\u5165\u6837\u5F0F\uFF1A
import 'ant-design-vue/dist/antd.css';
\u6309\u9700\u52A0\u8F7D
\u4E0B\u9762\u4E24\u79CD\u65B9\u5F0F\u90FD\u53EF\u4EE5\u53EA\u52A0\u8F7D\u7528\u5230\u7684\u7EC4\u4EF6\u3002
-
\u4F7F\u7528 babel-plugin-import\uFF08\u63A8\u8350\uFF09\u3002
{
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
]
}
\u6CE8\u610F\uFF1Awebpack 1 \u65E0\u9700\u8BBE\u7F6E libraryDirectory\u3002
\u7136\u540E\u53EA\u9700\u4ECE ant-design-vue \u5F15\u5165\u6A21\u5757\u5373\u53EF\uFF0C\u65E0\u9700\u5355\u72EC\u5F15\u5165\u6837\u5F0F\u3002\u7B49\u540C\u4E8E\u4E0B\u9762\u624B\u52A8\u5F15\u5165\u7684\u65B9\u5F0F\u3002
import { DatePicker } from 'ant-design-vue';
-
\u624B\u52A8\u5F15\u5165
import DatePicker from 'ant-design-vue/lib/date-picker';
import 'ant-design-vue/lib/date-picker/style/css';
-
Vite \u6309\u9700
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
Components({
resolvers: [AntDesignVueResolver()],
}),
],
};
\u94FE\u63A5
\u5982\u4F55\u8D21\u732E
\u5982\u679C\u4F60\u5E0C\u671B\u53C2\u4E0E\u8D21\u732E\uFF0C\u6B22\u8FCE Pull Request\uFF0C\u6216\u7ED9\u6211\u4EEC \u62A5\u544A Bug(\u56FD\u5185\u955C\u50CF)\u3002
\u5F3A\u70C8\u63A8\u8350\u9605\u8BFB \u300A\u63D0\u95EE\u7684\u667A\u6167\u300B\u3001\u300A\u5982\u4F55\u5411\u5F00\u6E90\u793E\u533A\u63D0\u95EE\u9898\u300B \u548C \u300A\u5982\u4F55\u6709\u6548\u5730\u62A5\u544A Bug\u300B\u3001\u300A\u5982\u4F55\u5411\u5F00\u6E90\u9879\u76EE\u63D0\u4EA4\u65E0\u6CD5\u89E3\u7B54\u7684\u95EE\u9898\u300B\uFF0C\u66F4\u597D\u7684\u95EE\u9898\u66F4\u5BB9\u6613\u83B7\u5F97\u5E2E\u52A9\u3002
\u5173\u4E8E ant-design-vue
\u4F17\u6240\u5468\u77E5\uFF0CAnt Design \u4F5C\u4E3A\u4E00\u95E8\u8BBE\u8BA1\u8BED\u8A00\u9762\u4E16\uFF0C\u7ECF\u5386\u8FC7\u591A\u5E74\u7684\u8FED\u4EE3\u548C\u79EF\u7D2F\uFF0C\u5B83\u5BF9 UI \u7684\u8BBE\u8BA1\u601D\u60F3\u5DF2\u7ECF\u6210\u4E3A\u4E00\u5957\u4E8B\u5B9E\u6807\u51C6\uFF0C\u53D7\u5230\u4F17\u591A\u524D\u7AEF\u5F00\u53D1\u8005\u53CA\u4F01\u4E1A\u7684\u8FFD\u6367\u548C\u559C\u7231\uFF0C\u4E5F\u662F React \u5F00\u53D1\u8005\u624B\u4E2D\u7684\u795E\u5175\u5229\u5668\u3002\u5E0C\u671B ant-design-vue \u80FD\u591F\u8BA9 Vue \u5F00\u53D1\u8005\u4E5F\u4EAB\u53D7\u5230 Ant Design \u7684\u4F18\u79C0\u8BBE\u8BA1\u3002
ant-design-vue \u662F Ant Design \u7684 Vue \u5B9E\u73B0\uFF0C\u7EC4\u4EF6\u7684\u98CE\u683C\u4E0E Ant Design \u4FDD\u6301\u540C\u6B65\uFF0C\u7EC4\u4EF6\u7684 html \u7ED3\u6784\u548C css \u6837\u5F0F\u4E5F\u4FDD\u6301\u4E00\u81F4\uFF0C\u771F\u6B63\u505A\u5230\u4E86\u6837\u5F0F 0 \u4FEE\u6539\uFF0C\u7EC4\u4EF6 API \u4E5F\u5C3D\u91CF\u4FDD\u6301\u4E86\u4E00\u81F4\u3002
Ant Design Vue \u81F4\u529B\u4E8E\u63D0\u4F9B\u7ED9\u7A0B\u5E8F\u5458\u6109\u60A6\u7684\u5F00\u53D1\u4F53\u9A8C\u3002
\u7279\u522B\u611F\u8C22
Ant Design Team
`,lastUpdated:1748060301811}},o={class:"markdown"};function r(c,n,l,i,u,g){return e(),a("article",o,n[0]||(n[0]=[t(`Ant Design of Vue
\u8FD9\u91CC\u662F Ant Design \u7684 Vue \u5B9E\u73B0\uFF0C\u5F00\u53D1\u548C\u670D\u52A1\u4E8E\u4F01\u4E1A\u7EA7\u540E\u53F0\u4EA7\u54C1\u3002
+ \u7279\u6027
- \u63D0\u70BC\u81EA\u4F01\u4E1A\u7EA7\u4E2D\u540E\u53F0\u4EA7\u54C1\u7684\u4EA4\u4E92\u8BED\u8A00\u548C\u89C6\u89C9\u98CE\u683C\u3002
- \u5F00\u7BB1\u5373\u7528\u7684\u9AD8\u8D28\u91CF Vue \u7EC4\u4EF6\u3002
- \u5171\u4EABAnt Design of React\u8BBE\u8BA1\u5DE5\u5177\u4F53\u7CFB\u3002
\u652F\u6301\u73AF\u5883
- \u73B0\u4EE3\u6D4F\u89C8\u5668, \u5982\u679C\u9700\u8981\u652F\u6301 IE9\uFF0C\u4F60\u53EF\u4EE5\u9009\u62E9\u4F7F\u7528 1.x \u7248\u672C\u3002
- \u652F\u6301\u670D\u52A1\u7AEF\u6E32\u67D3\u3002
- Electron
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
Electron |
|---|
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
\u7248\u672C
- \u7A33\u5B9A\u7248\uFF1A
\u4F60\u53EF\u4EE5\u8BA2\u9605\uFF1Ahttps://github.com/vueComponent/ant-design-vue/releases.atom \u6765\u83B7\u5F97\u7A33\u5B9A\u7248\u53D1\u5E03\u7684\u901A\u77E5\u3002
\u5B89\u88C5
\u4F7F\u7528 npm \u6216 yarn \u5B89\u88C5
\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 npm \u6216 yarn \u7684\u65B9\u5F0F\u8FDB\u884C\u5F00\u53D1\uFF0C\u4E0D\u4EC5\u53EF\u5728\u5F00\u53D1\u73AF\u5883\u8F7B\u677E\u8C03\u8BD5\uFF0C\u4E5F\u53EF\u653E\u5FC3\u5730\u5728\u751F\u4EA7\u73AF\u5883\u6253\u5305\u90E8\u7F72\u4F7F\u7528\uFF0C\u4EAB\u53D7\u6574\u4E2A\u751F\u6001\u5708\u548C\u5DE5\u5177\u94FE\u5E26\u6765\u7684\u8BF8\u591A\u597D\u5904\u3002
$ npm install ant-design-vue --save
$ yarn add ant-design-vue
\u5982\u679C\u4F60\u7684\u7F51\u7EDC\u73AF\u5883\u4E0D\u4F73\uFF0C\u63A8\u8350\u4F7F\u7528 cnpm\u3002
\u6D4F\u89C8\u5668\u5F15\u5165
\u5728\u6D4F\u89C8\u5668\u4E2D\u4F7F\u7528 script \u548C link \u6807\u7B7E\u76F4\u63A5\u5F15\u5165\u6587\u4EF6\uFF0C\u5E76\u4F7F\u7528\u5168\u5C40\u53D8\u91CF antd\u3002
\u6211\u4EEC\u5728 npm \u53D1\u5E03\u5305\u5185\u7684 ant-design-vue/dist \u76EE\u5F55\u4E0B\u63D0\u4F9B\u4E86 antd.js antd.css \u4EE5\u53CA antd.min.js antd.min.css\u3002\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7 \u6216 UNPKG \u8FDB\u884C\u4E0B\u8F7D\u3002
\u5F3A\u70C8\u4E0D\u63A8\u8350\u4F7F\u7528\u5DF2\u6784\u5EFA\u6587\u4EF6\uFF0C\u8FD9\u6837\u65E0\u6CD5\u6309\u9700\u52A0\u8F7D\uFF0C\u800C\u4E14\u96BE\u4EE5\u83B7\u5F97\u5E95\u5C42\u4F9D\u8D56\u6A21\u5757\u7684 bug \u5FEB\u901F\u4FEE\u590D\u652F\u6301\u3002
\u6CE8\u610F\uFF1A\u5F15\u5165 antd.js \u524D\u4F60\u9700\u8981\u81EA\u884C\u5F15\u5165 dayjs \u53CA\u5176\u76F8\u5173\u63D2\u4EF6\u3002
\u5982\uFF1A
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
\u793A\u4F8B
import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);
\u5F15\u5165\u6837\u5F0F\uFF1A
import 'ant-design-vue/dist/antd.css';
\u6309\u9700\u52A0\u8F7D
\u4E0B\u9762\u4E24\u79CD\u65B9\u5F0F\u90FD\u53EF\u4EE5\u53EA\u52A0\u8F7D\u7528\u5230\u7684\u7EC4\u4EF6\u3002
\u4F7F\u7528 babel-plugin-import\uFF08\u63A8\u8350\uFF09\u3002
{
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
]
}
\u6CE8\u610F\uFF1Awebpack 1 \u65E0\u9700\u8BBE\u7F6E libraryDirectory\u3002
\u7136\u540E\u53EA\u9700\u4ECE ant-design-vue \u5F15\u5165\u6A21\u5757\u5373\u53EF\uFF0C\u65E0\u9700\u5355\u72EC\u5F15\u5165\u6837\u5F0F\u3002\u7B49\u540C\u4E8E\u4E0B\u9762\u624B\u52A8\u5F15\u5165\u7684\u65B9\u5F0F\u3002
import { DatePicker } from 'ant-design-vue';
\u624B\u52A8\u5F15\u5165
import DatePicker from 'ant-design-vue/lib/date-picker';
import 'ant-design-vue/lib/date-picker/style/css';
Vite \u6309\u9700
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
Components({
resolvers: [AntDesignVueResolver()],
}),
],
};
\u94FE\u63A5
\u5982\u4F55\u8D21\u732E
\u5982\u679C\u4F60\u5E0C\u671B\u53C2\u4E0E\u8D21\u732E\uFF0C\u6B22\u8FCE Pull Request\uFF0C\u6216\u7ED9\u6211\u4EEC \u62A5\u544A Bug(\u56FD\u5185\u955C\u50CF)\u3002
\u5F3A\u70C8\u63A8\u8350\u9605\u8BFB \u300A\u63D0\u95EE\u7684\u667A\u6167\u300B\u3001\u300A\u5982\u4F55\u5411\u5F00\u6E90\u793E\u533A\u63D0\u95EE\u9898\u300B \u548C \u300A\u5982\u4F55\u6709\u6548\u5730\u62A5\u544A Bug\u300B\u3001\u300A\u5982\u4F55\u5411\u5F00\u6E90\u9879\u76EE\u63D0\u4EA4\u65E0\u6CD5\u89E3\u7B54\u7684\u95EE\u9898\u300B\uFF0C\u66F4\u597D\u7684\u95EE\u9898\u66F4\u5BB9\u6613\u83B7\u5F97\u5E2E\u52A9\u3002
\u5173\u4E8E ant-design-vue
\u4F17\u6240\u5468\u77E5\uFF0CAnt Design \u4F5C\u4E3A\u4E00\u95E8\u8BBE\u8BA1\u8BED\u8A00\u9762\u4E16\uFF0C\u7ECF\u5386\u8FC7\u591A\u5E74\u7684\u8FED\u4EE3\u548C\u79EF\u7D2F\uFF0C\u5B83\u5BF9 UI \u7684\u8BBE\u8BA1\u601D\u60F3\u5DF2\u7ECF\u6210\u4E3A\u4E00\u5957\u4E8B\u5B9E\u6807\u51C6\uFF0C\u53D7\u5230\u4F17\u591A\u524D\u7AEF\u5F00\u53D1\u8005\u53CA\u4F01\u4E1A\u7684\u8FFD\u6367\u548C\u559C\u7231\uFF0C\u4E5F\u662F React \u5F00\u53D1\u8005\u624B\u4E2D\u7684\u795E\u5175\u5229\u5668\u3002\u5E0C\u671B ant-design-vue \u80FD\u591F\u8BA9 Vue \u5F00\u53D1\u8005\u4E5F\u4EAB\u53D7\u5230 Ant Design \u7684\u4F18\u79C0\u8BBE\u8BA1\u3002
ant-design-vue \u662F Ant Design \u7684 Vue \u5B9E\u73B0\uFF0C\u7EC4\u4EF6\u7684\u98CE\u683C\u4E0E Ant Design \u4FDD\u6301\u540C\u6B65\uFF0C\u7EC4\u4EF6\u7684 html \u7ED3\u6784\u548C css \u6837\u5F0F\u4E5F\u4FDD\u6301\u4E00\u81F4\uFF0C\u771F\u6B63\u505A\u5230\u4E86\u6837\u5F0F 0 \u4FEE\u6539\uFF0C\u7EC4\u4EF6 API \u4E5F\u5C3D\u91CF\u4FDD\u6301\u4E86\u4E00\u81F4\u3002
Ant Design Vue \u81F4\u529B\u4E8E\u63D0\u4F9B\u7ED9\u7A0B\u5E8F\u5458\u6109\u60A6\u7684\u5F00\u53D1\u4F53\u9A8C\u3002
\u7279\u522B\u611F\u8C22
Ant Design Team
`,42)]))}const k=s(p,[["render",r]]);export{k as default};