安裝和初始化
一、我們需要在命令行中首先安裝 cnpm或 yarn包，安裝過程中你可以用npm或cnpm或 yarn。
npm install -g cnpm --registry=https://registry.npm.taobao.org
或
npm install -g yarn --registry=https://registry.npm.taobao.org
npm或cnpm或 yarn三者區別（科普下）
- npm安裝插件是從國外服務器下載，npm的服務器在外國受網絡影響大，可能出現異常，或安裝失敗。
- cnpm這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘量與官方服務同步。”這就是cnpm由來。下載速度比npm快。
- yarn像npm一樣，yarn使用本地緩存。與npm不同的是，yarn無需互聯網連接就能安裝本地緩存的依賴項，它提供了離線模式。下載速度更快。
二、cnpm或yarn安裝 vue-cli 工具
npm install -g @vue/cli
OR
yarn global add @vue/cli
三、新建一個vue項目。
vue create antd-demo
並配置項目。
工具會自動初始化一個腳手架並安裝 Vue 項目的各種必要依賴,如果安裝失敗，請刪除跟目錄所有node_modules文件夾，重新cnpm i或yarn install
然後我們進入項目並啓動。
cd antd-demo
cnpm start
此時瀏覽器會訪問 http://localhost:8080，看到 Welcome to Your Vue.js App 的界面就算成功了。
引入 antd
這是 vue-cli 生成的默認目錄結構。
├── README.md
├── babel.config
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.js
└── yarn.lock
現在從 yarn 或 npm 安裝並引入 ant-design-vue。
yarn add ant-design-vue
修改 src/main.js，引入 antd 的按鈕組件以及全部樣式文件。
import Vue from "vue";
import Button from "ant-design-vue/lib/button";
import "ant-design-vue/dist/antd.css";
import App from "./App";
Vue.component(Button.name, Button);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
修改 src/App.vue的 template 內容。
<template>
<div id="app">
<img src="./assets/logo.png">
<a-button type="primary">Button></a-button>
</div>
</template>
好了，現在你應該能看到頁面上已經有了 antd 的藍色按鈕組件，接下來就可以繼續選用其他組件開發應用了。其他開發流程你可以參考 vue-cli 的官方文檔。