1 line
12 KiB
JavaScript
1 line
12 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{1198:function(s,t,a){},1291:function(s,t,a){"use strict";var e=a(1198);a.n(e).a},1483:function(s,t,a){"use strict";a.r(t);var e=function(){var s=this.$createElement;this._self._c;return this._m(0)};e._withStripped=!0;a(1291);var r=a(31),v=Object(r.a)({},e,[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("h1",[s._v("Ant Design of Vue")]),s._v(" "),a("p",[s._v("这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。")]),s._v(" "),a("div",{staticClass:"pic-plus"},[a("img",{attrs:{width:"150",src:"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"}}),s._v(" "),a("span",[s._v("+")]),s._v(" "),a("img",{attrs:{width:"160",src:"https://cn.vuejs.org/images/logo.png"}})]),s._v(" "),a("h2",{attrs:{id:"特性"}},[s._v("特性 "),a("a",{staticClass:"anchor",attrs:{href:"#特性"}},[s._v("#")])]),s._v(" "),a("ul",[a("li",[s._v("提炼自企业级中后台产品的交互语言和视觉风格。")]),s._v(" "),a("li",[s._v("开箱即用的高质量 Vue 组件。")]),s._v(" "),a("li",[s._v("共享"),a("a",{attrs:{href:"http://ant-design.gitee.io/docs/spec/introduce-cn"}},[s._v("Ant Design of React")]),s._v("设计工具体系。")])]),s._v(" "),a("h2",{attrs:{id:"支持环境"}},[s._v("支持环境 "),a("a",{staticClass:"anchor",attrs:{href:"#支持环境"}},[s._v("#")])]),s._v(" "),a("ul",[a("li",[s._v("现代浏览器和 IE9 及以上(需要 "),a("a",{attrs:{href:"https://www.antdv.com/docs/vue/getting-started-cn/#%E5%85%BC%E5%AE%B9%E6%80%A7"}},[s._v("polyfills")]),s._v(")。")]),s._v(" "),a("li",[s._v("支持服务端渲染。")])]),s._v(" "),a("h2",{attrs:{id:"版本"}},[s._v("版本 "),a("a",{staticClass:"anchor",attrs:{href:"#版本"}},[s._v("#")])]),s._v(" "),a("ul",[a("li",[s._v("稳定版:"),a("a",{attrs:{href:"https://www.npmjs.org/package/ant-design-vue"}},[a("img",{attrs:{src:"https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square",alt:"npm package"}})])])]),s._v(" "),a("p",[s._v("你可以订阅:https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。")]),s._v(" "),a("h2",{attrs:{id:"安装"}},[s._v("安装 "),a("a",{staticClass:"anchor",attrs:{href:"#安装"}},[s._v("#")])]),s._v(" "),a("h3",{attrs:{id:"使用-npm-或-yarn-安装"}},[s._v("使用 npm 或 yarn 安装 "),a("a",{staticClass:"anchor",attrs:{href:"#使用-npm-或-yarn-安装"}},[s._v("#")])]),s._v(" "),a("p",[a("strong",[s._v("我们推荐使用 npm 或 yarn 的方式进行开发")]),s._v(",不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[s._v("$ npm install ant-design-vue --save\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[s._v("$ yarn add ant-design-vue\n")])]),s._v(" "),a("p",[s._v("如果你的网络环境不佳,推荐使用 "),a("a",{attrs:{href:"https://github.com/cnpm/cnpm"}},[s._v("cnpm")]),s._v("。")]),s._v(" "),a("blockquote",[a("p",[a("strong",[s._v("组件库使用了 vue 的新特性"),a("code",{pre:!0},[s._v("slot-scope")]),s._v("(2.5.0 新增), "),a("code",{pre:!0},[s._v("provide / inject")]),s._v("(2.2.0 新增)")])])]),s._v(" "),a("h3",{attrs:{id:"浏览器引入"}},[s._v("浏览器引入 "),a("a",{staticClass:"anchor",attrs:{href:"#浏览器引入"}},[s._v("#")])]),s._v(" "),a("p",[s._v("在浏览器中使用 "),a("code",{pre:!0},[s._v("script")]),s._v(" 和 "),a("code",{pre:!0},[s._v("link")]),s._v(" 标签直接引入文件,并使用全局变量 "),a("code",{pre:!0},[s._v("antd")]),s._v("。")]),s._v(" "),a("p",[s._v("我们在 npm 发布包内的 "),a("code",{pre:!0},[s._v("ant-design-vue/dist")]),s._v(" 目录下提供了 "),a("code",{pre:!0},[s._v("antd.js")]),s._v(" "),a("code",{pre:!0},[s._v("antd.css")]),s._v(" 以及 "),a("code",{pre:!0},[s._v("antd.min.js")]),s._v(" "),a("code",{pre:!0},[s._v("antd.min.css")]),s._v("。你也可以通过 "),a("a",{attrs:{href:"https://www.jsdelivr.com/package/npm/ant-design-vue"}},[a("img",{attrs:{src:"https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge",alt:"jsdelivr"}})]),s._v(" 或 "),a("a",{attrs:{href:"https://unpkg.com/ant-design-vue/dist/"}},[s._v("UNPKG")]),s._v(" 进行下载。")]),s._v(" "),a("blockquote",[a("p",[a("strong",[s._v("强烈不推荐使用已构建文件")]),s._v(",这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。")])]),s._v(" "),a("blockquote",[a("p",[s._v("注意:引入 antd.js 前你需要自行引入 "),a("a",{attrs:{href:"http://momentjs.com/"}},[s._v("moment")]),s._v("。")])]),s._v(" "),a("h2",{attrs:{id:"示例"}},[s._v("示例 "),a("a",{staticClass:"anchor",attrs:{href:"#示例"}},[s._v("#")])]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { DatePicker } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue'")]),s._v(";\nVue.use(DatePicker);\n")])]),s._v(" "),a("p",[s._v("引入样式:")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue/dist/antd.css'")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// or 'ant-design-vue/dist/antd.less'")]),s._v("\n")])]),s._v(" "),a("h3",{attrs:{id:"按需加载"}},[s._v("按需加载 "),a("a",{staticClass:"anchor",attrs:{href:"#按需加载"}},[s._v("#")])]),s._v(" "),a("p",[s._v("下面两种方式都可以只加载用到的组件。")]),s._v(" "),a("ul",[a("li",[a("p",[s._v("使用 "),a("a",{attrs:{href:"https://github.com/ant-design/babel-plugin-import"}},[s._v("babel-plugin-import")]),s._v("(推荐)。")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// .babelrc or babel-loader option")]),s._v("\n{\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"plugins"')]),s._v(": [\n ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"import"')]),s._v(", { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"libraryName"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ant-design-vue"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"libraryDirectory"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"es"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"style"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"css"')]),s._v(" }] "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// `style: true` 会加载 less 文件")]),s._v("\n ]\n}\n")])]),s._v(" "),a("blockquote",[a("p",[s._v("注意:webpack 1 无需设置 "),a("code",{pre:!0},[s._v("libraryDirectory")]),s._v("。")])]),s._v(" "),a("p",[s._v("然后只需从 ant-design-vue 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// babel-plugin-import 会帮助你加载 JS 和 CSS")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { DatePicker } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue'")]),s._v(";\n")])])]),s._v(" "),a("li",[a("p",[s._v("手动引入")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue/lib/date-picker'")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 加载 JS")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue/lib/date-picker/style/css'")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 加载 CSS")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// import 'ant-design-vue/lib/date-picker/style'; // 加载 LESS")]),s._v("\n")])])])]),s._v(" "),a("h2",{attrs:{id:"链接"}},[s._v("链接 "),a("a",{staticClass:"anchor",attrs:{href:"#链接"}},[s._v("#")])]),s._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://www.antdv.com/"}},[s._v("首页")])]),s._v(" "),a("li",[a("a",{attrs:{href:"https://ant.design/"}},[s._v("Ant Design Of React")])]),s._v(" "),a("li",[a("a",{attrs:{href:"https://www.antdv.com/docs/vue/introduce-cn"}},[s._v("组件库")])]),s._v(" "),a("li",[a("a",{attrs:{href:"/docs/vue/changelog-cn"}},[s._v("更新日志")])]),s._v(" "),a("li",[a("a",{attrs:{href:"https://codesandbox.io/s/2wpk21kzvr"}},[s._v("CodeSandbox 模板")]),s._v(" for bug reports")]),s._v(" "),a("li",[a("a",{attrs:{href:"/docs/vue/customize-theme-cn"}},[s._v("定制主题")])]),s._v(" "),a("li",[a("a",{attrs:{href:"/docs/vue/faq-cn"}},[s._v("常见问题")])]),s._v(" "),a("li",[a("a",{attrs:{href:"/docs/vue/sponsor-cn"}},[s._v("支持我们")])]),s._v(" "),a("li",[a("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue-awesome"}},[s._v("Awesome Ant Design")])])]),s._v(" "),a("h2",{attrs:{id:"如何贡献"}},[s._v("如何贡献 "),a("a",{staticClass:"anchor",attrs:{href:"#如何贡献"}},[s._v("#")])]),s._v(" "),a("p",[s._v("如果你希望参与贡献,欢迎 "),a("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue/pulls"}},[s._v("Pull Request")]),s._v(",或给我们 "),a("a",{attrs:{href:"https://vuecomponent.github.io/issue-helper/"}},[s._v("报告 Bug")]),s._v("("),a("a",{attrs:{href:"http://ant-design-vue.gitee.io/issue-helper/"}},[s._v("国内镜像")]),s._v(")。")]),s._v(" "),a("blockquote",[a("p",[s._v("强烈推荐阅读 "),a("a",{attrs:{href:"https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way"}},[s._v("《提问的智慧》")]),s._v("、"),a("a",{attrs:{href:"https://github.com/seajs/seajs/issues/545"}},[s._v("《如何向开源社区提问题》")]),s._v(" 和 "),a("a",{attrs:{href:"http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html"}},[s._v("《如何有效地报告 Bug》")]),s._v("、"),a("a",{attrs:{href:"https://zhuanlan.zhihu.com/p/25795393"}},[s._v("《如何向开源项目提交无法解答的问题》")]),s._v(",更好的问题更容易获得帮助。")])]),s._v(" "),a("h2",{attrs:{id:"关于-ant-design-vue"}},[s._v("关于 ant-design-vue "),a("a",{staticClass:"anchor",attrs:{href:"#关于-ant-design-vue"}},[s._v("#")])]),s._v(" "),a("p",[s._v("众所周知,Ant Design 作为一门设计语言面世,经历过多年的迭代和积累,它对 UI 的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是 React 开发者手中的神兵利器。希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。")]),s._v(" "),a("p",[s._v("ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。")]),s._v(" "),a("p",[s._v("Ant Design Vue 致力于提供给程序员"),a("strong",[s._v("愉悦")]),s._v("的开发体验。")]),s._v(" "),a("h2",{attrs:{id:"特别感谢"}},[s._v("特别感谢 "),a("a",{staticClass:"anchor",attrs:{href:"#特别感谢"}},[s._v("#")])]),s._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt"}},[s._v("Ant Design Team")])])])}],!1,null,null,null);v.options.__file="docs/vue/introduce.zh-CN.md";t.default=v.exports}}]); |