使用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";