(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{1478:function(s,t,e){"use strict";e.r(t);var a=function(){var s=this.$createElement;this._self._c;return this._m(0)};a._withStripped=!0;var r=e(31),n=Object(r.a)({},a,[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[e("h1",[s._v("Getting Started")]),s._v(" "),e("p",[s._v("Ant Design Vue is dedicated to providing a "),e("strong",[s._v("good development experience")]),s._v(" for programmers. Make sure that you had installed "),e("a",{attrs:{href:"https://nodejs.org/"}},[s._v("Node.js")]),s._v("(> v8.9) correctly.")]),s._v(" "),e("blockquote",[e("p",[s._v("Before delving into Ant Design Vue, a good knowledge base of "),e("a",{attrs:{href:"https://cn.vuejs.org/"}},[s._v("Vue")]),s._v(" and "),e("a",{attrs:{href:"http://babeljs.io/docs/learn-es2015/"}},[s._v("JavaScript ES2015")]),s._v(" is needed.")])]),s._v(" "),e("h2",{attrs:{id:"Use-vue-cli@3"}},[s._v("Use vue-cli@3 "),e("a",{staticClass:"anchor",attrs:{href:"#Use-vue-cli@3"}},[s._v("#")])]),s._v(" "),e("p",[s._v("We provide an "),e("a",{attrs:{href:"https://github.com/vueComponent/vue-cli-plugin-ant-design"}},[s._v("Ant Design Vue")]),s._v(" plugin for vue-cli@3, which you can use to quickly build an Ant Design Vue-based project.")]),s._v(" "),e("h2",{attrs:{id:"Playground"}},[s._v("Playground "),e("a",{staticClass:"anchor",attrs:{href:"#Playground"}},[s._v("#")])]),s._v(" "),e("p",[s._v("The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug.")]),s._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://codesandbox.io/s/2wpk21kzvr"}},[e("img",{attrs:{src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"Vue Antd Template"}})])])]),s._v(" "),e("h2",{attrs:{id:"Import-ant-design-vue"}},[s._v("Import ant-design-vue "),e("a",{staticClass:"anchor",attrs:{href:"#Import-ant-design-vue"}},[s._v("#")])]),s._v(" "),e("h3",{attrs:{id:"1.-Installation"}},[s._v("1. Installation "),e("a",{staticClass:"anchor",attrs:{href:"#1.-Installation"}},[s._v("#")])]),s._v(" "),e("p",[e("a",{attrs:{href:"https://github.com/vuejs/vue-cli"}},[s._v("vue-cli")])]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[s._v("$ npm install -g @vue/cli\n"),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("# OR")]),s._v("\n$ yarn global add @vue/cli\n")])]),s._v(" "),e("h3",{attrs:{id:"2.-Create-a-New-Project"}},[s._v("2. Create a New Project "),e("a",{staticClass:"anchor",attrs:{href:"#2.-Create-a-New-Project"}},[s._v("#")])]),s._v(" "),e("p",[s._v("A new project can be created using CLI tools.")]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[s._v("$ vue create antd-demo\n")])]),s._v(" "),e("p",[s._v("And, setup your vue project configuration.")]),s._v(" "),e("h3",{attrs:{id:"3.-Use-antd's-Components"}},[s._v("3. Use antd's Components "),e("a",{staticClass:"anchor",attrs:{href:"#3.-Use-antd's-Components"}},[s._v("#")])]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[s._v("$ npm i --save ant-design-vue\n")])]),s._v(" "),e("p",[e("strong",[s._v("Fully import")])]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Antd "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue'")]),s._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./App'")]),s._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue/dist/antd.css'")]),s._v(";\nVue.config.productionTip = "),e("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n\nVue.use(Antd);\n\n"),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-new */")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(": { App },\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("template")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'<App/>'")]),s._v(",\n});\n")])]),s._v(" "),e("p",[s._v("The above imports Antd entirely. Note that CSS file needs to be imported separately.")]),s._v(" "),e("p",[e("strong",[s._v("Only import the components you need")])]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, message } "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue'")]),s._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./App'")]),s._v(";\n\nVue.config.productionTip = "),e("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n\n"),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* v1.1.2 */")]),s._v("\nVue.component(Button.name, Button);\nVue.component(Button.Group.name, Button.Group);\n\n"),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* v1.1.3+ Automatically register components under Button, such as Button.Group */")]),s._v("\nVue.use(Button);\n\nVue.prototype.$message = message;\n\n"),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-new */")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(": { App },\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("template")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'<App/>'")]),s._v(",\n});\n")])]),s._v(" "),e("blockquote",[e("p",[s._v("All the components in antd are listed in the sidebar.")])]),s._v(" "),e("h3",{attrs:{id:"4.-Component-list"}},[s._v("4. Component list "),e("a",{staticClass:"anchor",attrs:{href:"#4.-Component-list"}},[s._v("#")])]),s._v(" "),e("p",[e("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js"}},[s._v("Component list")])]),s._v(" "),e("h2",{attrs:{id:"Compatibility"}},[s._v("Compatibility "),e("a",{staticClass:"anchor",attrs:{href:"#Compatibility"}},[s._v("#")])]),s._v(" "),e("p",[s._v("Ant Design Vue supports all the modern browsers and IE9+.")]),s._v(" "),e("p",[s._v("You need to provide "),e("a",{attrs:{href:"https://github.com/es-shims/es5-shim"}},[s._v("es5-shim")]),s._v(" and "),e("a",{attrs:{href:"https://github.com/paulmillr/es6-shim"}},[s._v("es6-shim")]),s._v(" and other polyfills for IE browsers.")]),s._v(" "),e("p",[s._v("If you are using babel, we strongly recommend using "),e("a",{attrs:{href:"https://babeljs.io/docs/usage/polyfill/"}},[s._v("babel-polyfill")]),s._v(" and "),e("a",{attrs:{href:"https://babeljs.io/docs/plugins/transform-runtime/"}},[s._v("babel-plugin-transform-runtime")]),s._v(" instead of those two shims.")]),s._v(" "),e("blockquote",[e("p",[s._v("Please avoid using both the babel and shim methods at the same time.")])]),s._v(" "),e("h2",{attrs:{id:"Import-on-Demand"}},[s._v("Import on Demand "),e("a",{staticClass:"anchor",attrs:{href:"#Import-on-Demand"}},[s._v("#")])]),s._v(" "),e("p",[s._v("If you see logs like below screenshot, you might be importing all components by writing "),e("code",{pre:!0},[s._v("import { Button } from 'ant-design-vue';")]),s._v(". This will affect your app's network performance.")]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":""}},[s._v("You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.\n")])]),s._v(" "),e("blockquote",[e("p",[e("img",{attrs:{src:"https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png",alt:""}})])]),s._v(" "),e("p",[s._v("However, we can import individual components on demand:")]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Button "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue/lib/button'")]),s._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue/lib/button/style'")]),s._v("; "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// or ant-design-vue/lib/button/style/css for css format file")]),s._v("\n")])]),s._v(" "),e("p",[s._v("We strongly recommend using "),e("a",{attrs:{href:"https://github.com/ant-design/babel-plugin-import"}},[s._v("babel-plugin-import")]),s._v(", which can convert the following code to the 'antd/lib/xxx' way:")]),s._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ant-design-vue'")]),s._v(";\n")])]),s._v(" "),e("p",[s._v("And this plugin can load styles too, read "),e("a",{attrs:{href:"https://github.com/ant-design/babel-plugin-import#usage"}},[s._v("usage")]),s._v(" for more details.")]),s._v(" "),e("blockquote",[e("p",[s._v("FYI, babel-plugin-import's "),e("code",{pre:!0},[s._v("style")]),s._v(" option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via "),e("code",{pre:!0},[s._v("import 'ant-design-vue/dist/antd.css'")]),s._v(" and override the global reset styles.")])]),s._v(" "),e("h2",{attrs:{id:"Customization"}},[s._v("Customization "),e("a",{staticClass:"anchor",attrs:{href:"#Customization"}},[s._v("#")])]),s._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"/docs/vue/customize-theme"}},[s._v("Customize Theme")])]),s._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont"}},[s._v("Local Iconfont")])])]),s._v(" "),e("h2",{attrs:{id:"Tips"}},[s._v("Tips "),e("a",{staticClass:"anchor",attrs:{href:"#Tips"}},[s._v("#")])]),s._v(" "),e("ul",[e("li",[s._v("You can use any "),e("code",{pre:!0},[s._v("npm")]),s._v(" modules.")]),s._v(" "),e("li",[s._v("Although Vue's official recommended template to write components, JSX is a better choice for complex components.")])])])}],!1,null,null,null);n.options.__file="docs/vue/getting-started.en-US.md";t.default=n.exports}}]);