<article class="markdown" data-v-608e4900="">
    <h1 id="快速上手">快速上手</h1>
    <p>Ant Design Vue 致力于提供给程序员<strong>愉悦</strong>的开发体验。</p>
    <blockquote>
        <p>在开始之前，推荐先学习 <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 和 <a href="http://babeljs.io/docs/learn-es2015/" target="_blank" rel="noopener noreferrer">ES2015</a>，并正确安装和配置了 <a href="https://nodejs.org/" target="_blank"
                rel="noopener noreferrer">Node.js</a> v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。</p>
    </blockquote>
    </ul>
    <h2 id="引入-alp-ui">引入 alp-ui</h2>
    <h3 id="_1-安装脚手架工具">1. 安装脚手架工具</h3>
    <p><a href="https://github.com/vuejs/vue-cli" target="_blank" rel="noopener noreferrer">vue-cli</a></p>
    <pre class="language-bash"><code>$ <span class="token function">npm</span> <span class="token function">install</span> -g @vue/cli
<span class="token comment"># OR</span>
$ <span class="token function">yarn</span> global <span class="token function">add</span> @vue/cli
</code></pre>
    <h3 id="_2-创建一个项目">2. 创建一个项目</h3>
    <p>使用命令行进行初始化。</p>
    <pre class="language-bash"><code>$ vue create alp-ui-demo
</code></pre>
    <p>并配置项目。</p>
    <p>若安装缓慢报错，可尝试用 <code>cnpm</code> 或别的镜像源自行安装：<code>rm -rf node_modules &amp;&amp; cnpm install</code>。</p>
    <h3 id="_3-使用组件">3. 使用组件</h3>
    <pre class="language-bash"><code>$ <span class="token function">npm</span> i --save alp-ui
</code></pre>
    <p><strong>完整引入</strong></p>
    <pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> AlpUI <span class="token keyword">from</span> <span class="token string">'alp-ui'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'alp-ui/alp-ui.min.css'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>AlpUI<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
    