使用vue-cli構建項目並且引入antd組件

　　先使用npm安裝cli

$ npm install -g @vue/cli

　　創建項目

vue create antd-demo

　　選擇預設

? Please pick a preset: (Use arrow keys)
> preset01 ([Vue 3] babel, router, vuex, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

　　上面第一條是我之前構建vue項目時保存的配置模板，這里我們選擇最后一項Manually select features手動選擇安裝配置自己所需要的東西。

? Check the features needed for your project:
 (*) Choose Vue version  //選擇vue版本
 (*) Babel     //將es6轉化成兼容的js
 ( ) TypeScript   //支持使用 TypeScript 語法來編寫代碼
 ( ) Progressive Web App (PWA) Support   
 (*) Router   //安裝router
 (*) Vuex     //安裝vuex
 (*) CSS Pre-processors //css預處理器
>(*) Linter / Formatter  //語法檢測
 ( ) Unit Testing  //單元測試
 ( ) E2E Testing  //端到端

　　插件選擇根據自己的個人情況選擇即可。

　　選擇自己所需要的vue版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

　　是否使用路由的history模式，這個也是根據自己情況

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

　　選擇一個css預處理器，按需選擇

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

　　選擇一個編碼規則，一般會選擇第一種或者第四種

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

　　代碼規則檢測方式，一般會選擇保存就檢測

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

　　Babel, ESLint 配置的存放位置，放在獨立文件還是package.json里，我選擇在專用的配置文件中

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

　　是否保存這次的配置，保存后下次構建項目的時候就可以直接用這次的配置來構建項目

? Save this as a preset for future projects? (y/N)

　進入項目啟動，我的項目使用的是yarn，也可以用npm

$ cd antd-demo
$ yarn serve  //npm run serve　

　　在瀏覽器打開http://localhost:8080/ 就可以訪問了

 

　　使用antd組件

$ yarn add ant-design-vue 
//$ npm i --save ant-design-vue

　　在src/main.js中引入，樣式文件需要單獨引入

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";