master

分支 (1)

管理

管理

master

element-ui-pro-docs
/
quickstart.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>快速开始 | Element UI Pro</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="stylesheet" href="/element-ui-pro-docs/styles/index.css">
    <meta name="description" content="This is a reference documents for element-ui-pro components library">

    <link rel="preload" href="/element-ui-pro-docs/assets/css/0.styles.ee66f9ee.css" as="style"><link rel="preload" href="/element-ui-pro-docs/assets/js/app.c11ec355.js" as="script"><link rel="preload" href="/element-ui-pro-docs/assets/js/2.18513edf.js" as="script"><link rel="preload" href="/element-ui-pro-docs/assets/js/1.a172dfbb.js" as="script"><link rel="preload" href="/element-ui-pro-docs/assets/js/113.1bd60de7.js" as="script"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/10.551c1b9d.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/100.bc4875f2.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/101.ebfda777.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/102.063d5a69.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/103.583a7da0.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/104.f0ffc100.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/105.186c9801.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/106.5a8283fb.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/107.a6b0d503.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/108.75400023.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/109.ae8b14b9.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/11.2c14d6fc.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/110.62f5db51.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/111.1c0c87cb.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/112.a559a21e.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/114.a1bbb21d.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/12.9f578393.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/13.4390b078.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/14.7e47f23c.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/15.f2c0bad9.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/16.4dbfab34.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/17.5aba783e.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/18.10695feb.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/19.05f750ca.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/20.2a742cdd.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/21.5d0d875f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/22.ece13557.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/23.332c9850.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/24.13ddd491.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/25.6a8102d2.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/26.043796e7.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/27.4f5490bc.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/28.6ded72e1.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/29.8108f970.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/3.715b610e.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/30.62f05c26.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/31.39d3bc29.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/32.8b9bf1a9.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/33.eb9b8246.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/34.21ba0ff9.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/35.d6bdfa6b.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/36.e16a4cb9.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/37.5ef121c1.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/38.8530f592.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/39.ab39e274.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/4.857d612a.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/40.21340e56.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/41.9bf6110f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/42.c7665123.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/43.8a2c55bb.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/44.ff5586bb.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/45.e2c3864a.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/46.6e868733.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/47.fa40fc70.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/48.8948181b.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/49.354d02de.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/5.fe1d3a4e.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/50.43b55983.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/51.c176cd59.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/52.2bc0f9cc.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/53.9afea1b9.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/54.f82853c3.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/55.dc99bfd2.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/56.fa70ac2f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/57.a2625e07.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/58.424ae83b.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/59.8749985c.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/6.0f8d3dc8.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/60.eab5a7d2.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/61.95b89f9f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/62.cd165f20.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/63.aac0b61c.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/64.62efec3c.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/65.25e21939.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/66.c51e39e8.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/67.2ad64351.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/68.e6cdc4d8.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/69.9e06edab.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/7.2d51e646.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/70.8fd00c9b.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/71.fafac741.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/72.a8189d2a.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/73.10a8ff13.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/74.1a5a10c3.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/75.ba72f400.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/76.b741678b.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/77.ce47145f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/78.6e2a84d4.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/79.8b71a770.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/80.d9861b51.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/81.de8aedf4.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/82.76962d2f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/83.1cb54986.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/84.e81addc3.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/85.2d3f55d2.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/86.fafe93fa.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/87.ee597443.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/88.3ba1601f.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/89.c1138568.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/90.9b83fa45.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/91.e5c6dfdf.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/92.101e4a2b.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/93.48272e26.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/94.3799fb62.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/95.5f050986.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/96.95ec3cb6.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/97.aed8ad8a.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/98.181704ee.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/99.bf886d58.js"><link rel="prefetch" href="/element-ui-pro-docs/assets/js/vendors~docsearch.cca7898e.js">
    <link rel="stylesheet" href="/element-ui-pro-docs/assets/css/0.styles.ee66f9ee.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/element-ui-pro-docs/" class="home-link router-link-active"><!----> <span class="site-name">Element UI Pro</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/element-ui-pro-docs/" class="nav-link">
  首页
</a></div><div class="nav-item"><a href="/element-ui-pro-docs/quickstart.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  文档
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/element-ui-pro-docs/" class="nav-link">
  首页
</a></div><div class="nav-item"><a href="/element-ui-pro-docs/quickstart.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  文档
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/element-ui-pro-docs/quickstart.html" aria-current="page" class="active sidebar-link">快速开始</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>容器组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/element-ui-pro-docs/container/space.html" class="sidebar-link">Space 内容间距</a></li><li><a href="/element-ui-pro-docs/container/layout.html" class="sidebar-link">Layout 页面布局</a></li><li><a href="/element-ui-pro-docs/container/frame.html" class="sidebar-link">Frame 面板分割</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>表单组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/element-ui-pro-docs/form/form.html" class="sidebar-link">Form 数据表单</a></li><li><a href="/element-ui-pro-docs/form/search-form.html" class="sidebar-link">SearchForm 查询表单</a></li><li><a href="/element-ui-pro-docs/form/modal-form.html" class="sidebar-link">ModalForm 模态框表单</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>数据展示</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/element-ui-pro-docs/display/table.html" class="sidebar-link">Table 数据表格</a></li><li><a href="/element-ui-pro-docs/display/sort-table.html" class="sidebar-link">SortTable 排序表格</a></li><li><a href="/element-ui-pro-docs/display/list.html" class="sidebar-link">List 数据列表</a></li><li><a href="/element-ui-pro-docs/display/sort-list.html" class="sidebar-link">SortList 排序列表</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其他组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/element-ui-pro-docs/other/modal.html" class="sidebar-link">Modal 模态框</a></li><li><a href="/element-ui-pro-docs/other/drawer.html" class="sidebar-link">Drawer 抽屉</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="快速开始"><a href="#快速开始" class="header-anchor">#</a> 快速开始</h1> <h2 id="环境说明"><a href="#环境说明" class="header-anchor">#</a> 环境说明</h2> <ol><li>vue 版本：2.x</li> <li>element-ui 版本：2.x</li></ol> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>npm i element-ui -s
npm i @easyui/element-ui-pro -s
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="全量引入"><a href="#全量引入" class="header-anchor">#</a> 全量引入</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ElementUI <span class="token keyword">from</span> <span class="token string">&quot;element-ui&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ElementUIPro <span class="token keyword">from</span> <span class="token string">&quot;@easyui/element-ui-pro&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;element-ui/lib/theme-chalk/index.css&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App.vue&quot;</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementUI<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 全量引入 ElementUIPro 组件</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementUIPro<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="按需引入"><a href="#按需引入" class="header-anchor">#</a> 按需引入</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>import Vue from &quot;vue&quot;;
import ElementUI from &quot;element-ui&quot;;
import {
  SSpace,
  SLayout,
  SLayoutMain,
  SLayoutSide,
  SFrame,
  SFramePane,
  SForm,
  SFormItem,
  SSearchForm,
  SModalForm,
  SList,
  SListItem,
  SSortList,
  STable,
  SSortTable,
  SModal,
  SDrawer
} from &quot;@easyui/element-ui-pro&quot;;
import &quot;element-ui/lib/theme-chalk/index.css&quot;;
import App from &quot;./App.vue&quot;;

Vue.use(ElementUI);
// 按需引入 ElementUIPro 组件
Vue.use(SSpace);
Vue.use(SLayout);
Vue.use(SLayoutMain);
Vue.use(SLayoutSide);
Vue.use(SFrame);
Vue.use(SFramePane);
Vue.use(SForm);
Vue.use(SFormItem);
Vue.use(SSearchForm);
Vue.use(SModalForm);
Vue.use(SList);
Vue.use(SListItem);
Vue.use(SSortList);
Vue.use(STable);
Vue.use(SSortTable);
Vue.use(SModal);
Vue.use(SDrawer);

new Vue({
  render: h =&gt; h(App)
}).$mount(&quot;#app&quot;);
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/element-ui-pro-docs/container/space.html">
        Space 内容间距
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/element-ui-pro-docs/assets/js/app.c11ec355.js" defer></script><script src="/element-ui-pro-docs/assets/js/2.18513edf.js" defer></script><script src="/element-ui-pro-docs/assets/js/1.a172dfbb.js" defer></script><script src="/element-ui-pro-docs/assets/js/113.1bd60de7.js" defer></script>
  </body>
</html>