element-plus/DOCS en-US43.db2a368e81c0380a78a4.js

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[39],{

/***/ 702:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
var vue_esm_browser = __webpack_require__(0);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/en-US/quickstart.md?vue&type=template&id=fd77bb72

var _hoisted_1 = {
  class: "content element-doc"
};

var _hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h2 id=\"quick-start\"><a class=\"header-anchor\" href=\"#quick-start\">¶</a> Quick start</h2><p>This part walks you through the process of using Element Plus in a webpack project.</p><h3 id=\"use-vue-cli-4.5\"><a class=\"header-anchor\" href=\"#use-vue-cli-4.5\">¶</a> Use vue-cli@4.5</h3><p>We provide an <a href=\"https://github.com/element-plus/vue-cli-plugin-element-plus\">Element Plus plugin</a> for vue-cli@4.5, which you can use to quickly build an Element-based project.</p><h3 id=\"use-starter-kit\"><a class=\"header-anchor\" href=\"#use-starter-kit\">¶</a> Use Starter Kit</h3><p>We provide a general <a href=\"https://github.com/element-plus/element-plus-starter\">project template</a> for you, and also a Vite <a href=\"https://github.com/element-plus/element-plus-vite-starter\">template</a>. For Laravel users, we have a <a href=\"https://github.com/element-plus/element-plus-in-laravel-starter\">template</a> here. You can download and use them directly.</p><p>If you prefer not to use them, please read the following.</p><h3 id=\"import-element-plus\"><a class=\"header-anchor\" href=\"#import-element-plus\">¶</a> Import Element Plus</h3><p>You can import ElementPlus entirely, or just import what you need. Let&#39;s start with fully import.</p><h4 id=\"fully-import\"><a class=\"header-anchor\" href=\"#fully-import\">¶</a> Fully import</h4><p>In main.js:</p><pre><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import</span> { createApp } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;vue&#39;</span>\n<span class=\"hljs-keyword\">import</span> ElementPlus <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;element-plus&#39;</span>;\n<span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">&#39;element-plus/lib/theme-chalk/index.css&#39;</span>;\n<span class=\"hljs-keyword\">import</span> App <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;./App.vue&#39;</span>;\n\n<span class=\"hljs-keyword\">const</span> app = createApp(App)\napp.use(ElementPlus)\napp.mount(<span class=\"hljs-string\">&#39;#app&#39;</span>)\n</code></pre><p>The above imports Element Plus entirely. Note that CSS file needs to be imported separately.</p><h4 id=\"on-demand\"><a class=\"header-anchor\" href=\"#on-demand\">¶</a> On demand</h4><p>With the help of <a href=\"https://github.com/QingWei-Li/babel-plugin-component\">babel-plugin-component</a>, we can import components we actually need, making the project smaller than otherwise.</p><p>First, install babel-plugin-component:</p><pre><code class=\"hljs language-bash\">npm install babel-plugin-component -D\n</code></pre><p>Then edit .babelrc:</p><pre><code class=\"hljs language-json\">{\n  <span class=\"hljs-attr\">&quot;plugins&quot;</span>: [\n    [\n      <span class=\"hljs-string\">&quot;component&quot;</span>,\n      {\n        <span class=\"hljs-attr\">&quot;libraryName&quot;</span>: <span class=\"hljs-string\">&quot;element-plus&quot;</span>,\n        <span class=\"hljs-attr\">&quot;styleLibraryName&quot;</span>: <span class=\"hljs-string\">&quot;theme-chalk&quot;</span>\n      }\n    ]\n  ]\n}\n</code></pre><p>Next, if you need Button and Select, edit main.js:</p><pre><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import</span> { createApp } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;vue&#39;</span>\n<span class=\"hljs-keyword\">import</span> { ElButton, ElSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;element-plus&#39;</span>;\n<span class=\"hljs-keyword\">import</span> App <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;./App.vue&#39;</span>;\n\n<span class=\"hljs-keyword\">const</span> app = createApp(App)\napp.component(ElButton.name, ElButton);\napp.component(ElSelect.name, ElSelect);\n\n<span class=\"hljs-comment\">/* or\n * app.use(ElButton)\n * app.use(ElSelect)\n */</span>\n\napp.mount(<span class=\"hljs-string\">&#39;#app&#39;</span>)\n</code></pre><p>Full example (Component list <a href=\"https://github.com/element-plus/element-plus/tree/dev/packages\">reference</a>)</p><pre><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import</span> { createApp } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;vue&#39;</span>\n<span class=\"hljs-keyword\">import</span> App <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;./App.vue&#39;</span>;\n<span class=\"hljs-keyword\">import</span> {\n  ElAlert,\n  ElAside,\n  ElAutocomplete,\n  ElAvatar,\n  ElBacktop,\n  ElBadge,\n  ElBreadcrumb,\n  ElBreadcrumbItem,\n  ElButton,\n  ElButtonGroup,\n  ElCalendar,\n  ElCard,\n  ElCarousel,\n  ElCarouselItem,\n  ElCascader,\n  ElCascaderPanel,\n  ElCheckbox,\n  ElCheckboxButton,\n  ElCheckboxGroup,\n  ElCol,\n  ElCollapse,\n  ElCollapseItem,\n  ElCollapseTransition,\n  ElColorPicker,\n  ElContainer,\n  ElDatePicker,\n  ElDialog,\n  ElDivider,\n  ElDrawer,\n  ElDropdown,\n  ElDropdownItem,\n  ElDropdownMenu,\n  ElFooter,\n  ElForm,\n  ElFormItem,\n  ElHeader,\n  ElIcon,\n  ElImage,\n  ElInput,\n  ElInputNumber,\n  ElLink,\n  ElMain,\n  ElMenu,\n  ElMenuItem,\n  ElMenuItemGroup,\n  ElOption,\n  ElOptionGroup,\n  ElPageHeader,\n  ElPagination,\n  ElPopconfirm,\n  ElPopover,\n  ElPopper,\n  ElProgress,\n  ElRadio,\n  ElRadioButton,\n  ElRadioGroup,\n  ElRate,\n  ElRow,\n  ElScrollBar,\n  ElSelect,\n  ElSlider,\n  ElStep,\n  ElSteps,\n  ElSubmenu,\n  ElSwitch,\n  ElTabPane,\n  ElTable,\n  ElTableColumn,\n  ElTimeline,\n  ElTimelineItem,\n  ElTooltip,\n  ElTransfer,\n  ElTree,\n  ElUpload,\n  ElInfiniteScroll,\n  ElLoading,\n  ElMessage,\n  ElMessageBox,\n  ElNotification,\n} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;element-plus&#39;</span>;\n\n<span class=\"hljs-keyword\">const</span> components = [\n  ElAlert,\n  ElAside,\n  ElAutocomplete,\n  ElAvatar,\n  ElBacktop,\n  ElBadge,\n  ElBreadcrumb,\n  ElBreadcrumbItem,\n  ElButton,\n  ElButtonGroup,\n  ElCalendar,\n  ElCard,\n  ElCarousel,\n  ElCarouselItem,\n  ElCascader,\n  ElCascaderPanel,\n  ElCheckbox,\n  ElCheckboxButton,\n  ElCheckboxGroup,\n  ElCol,\n  ElCollapse,\n  ElCollapseItem,\n  ElCollapseTransition,\n  ElColorPicker,\n  ElContainer,\n  ElDatePicker,\n  ElDialog,\n  ElDivider,\n  ElDrawer,\n  ElDropdown,\n  ElDropdownItem,\n  ElDropdownMenu,\n  ElFooter,\n  ElForm,\n  ElFormItem,\n  ElHeader,\n  ElIcon,\n  ElImage,\n  ElInput,\n  ElInputNumber,\n  ElLink,\n  ElMain,\n  ElMenu,\n  ElMenuItem,\n  ElMenuItemGroup,\n  ElOption,\n  ElOptionGroup,\n  ElPageHeader,\n  ElPagination,\n  ElPopconfirm,\n  ElPopover,\n  ElPopper,\n  ElProgress,\n  ElRadio,\n  ElRadioButton,\n  ElRadioGroup,\n  ElRate,\n  ElRow,\n  ElScrollBar,\n  ElSelect,\n  ElSlider,\n  ElStep,\n  ElSteps,\n  ElSubmenu,\n  ElSwitch,\n  ElTabPane,\n  ElTable,\n  ElTableColumn,\n  ElTabs,\n  ElTag,\n  ElTimePicker,\n  ElTimeSelect,\n  ElTimeline,\n  ElTimelineItem,\n  ElTooltip,\n  ElTransfer,\n  ElTree,\n  ElUpload,\n]\n\n<span class=\"hljs-keyword\">const</span> plugins = [\n  ElInfiniteScroll,\n  ElLoading,\n  ElMessage,\n  ElMessageBox,\n  ElNotification,\n]\n\n<span class=\"hljs-keyword\">const</span> app = createApp(App)\n\ncomponents.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">component</span> =&gt;</span> {\n  app.component(component.name, component)\n})\n\nplugins.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">plugin</span> =&gt;</span> {\n  app.use(plugin)\n})\n</code></pre><h3 id=\"global-config\"><a class=\"header-anchor\" href=\"#global-config\">¶</a> Global config</h3><p>When importing Element, you can define a global config object. For now this object has two properties: <code>size</code> and <code>zIndex</code>. The property <code>size</code> sets the default size for all components and the property <code>zIndex</code> sets the initial z-index (default: 2000) for modal boxes:</p><p>Fully import Element：</p><pre><code class=\"hljs language-js\"><span class=\"hljs-keyword\">import</span> { createApp } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;vue&#39;</span>\n<span class=\"hljs-keyword\">import</span> ElementPlus <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;element-plus&#39;</span>;\n<span class=\"hljs-keyword\">import</span> App <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;./App.vue&#39;</span>;\n\n<span class=\"hljs-keyword\">const</span> app = createApp(App)\napp.use(ElementPlus, { <span class=\"hljs-attr\">size</span>: <span class=\"hljs-string\">&#39;small&#39;</span>, <span class=\"hljs-attr\">zIndex</span>: <span class=\"hljs-number\">3000</span> });\n</code></pre><p>Partial import Element：</p><pre><code class=\"hljs language-js\"><span class=\"hljs-keyword\">import</span> { createApp } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;vue&#39;</span>\n<span class=\"hljs-keyword\">import</span> { ElButton } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;element-plus&#39;</span>;\n<span class=\"hljs-keyword\">import</span> App <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#39;./App.vue&#39;</span>;\n\n<span class=\"hljs-keyword\">const</span> app = createApp(App)\napp.config.globalProperties.$ELEMENT = option\napp.use(ElButton);\n</code></pre><p>With the above config, the default size of all components that have size attribute will be &#39;small&#39;, and the initial z-index of modal boxes is 3000.</p><h3 id=\"start-coding\"><a class=\"header-anchor\" href=\"#start-coding\">¶</a> Start coding</h3><p>Now you have implemented Vue and Element Plus to your project, and it&#39;s time to write your code. Please refer to each component&#39;s documentation to learn how to use them.</p><h3 id=\"use-nuxt.js\"><a class=\"header-anchor\" href=\"#use-nuxt.js\">¶</a> Use Nuxt.js</h3><p>We can also start a project using <a href=\"https://nuxtjs.org/\">Nuxt.js</a>:</p><div class=\"glitch-embed-wrap\" style=\"height:420px;width:100%;\"><iframe src=\"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&amp;previewSize=0&amp;attributionHidden=true\" alt=\"nuxt-with-element on glitch\" style=\"height:100%;width:100%;border:0;\"></iframe></div>", 35);

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", _hoisted_1, [_hoisted_2]);
}
// CONCATENATED MODULE: ./website/docs/en-US/quickstart.md?vue&type=template&id=fd77bb72

// CONCATENATED MODULE: ./website/docs/en-US/quickstart.md

const script = {}
script.render = render

/* harmony default export */ var quickstart = __webpack_exports__["default"] = (script);

/***/ })

}]);