使用ant-design-vue开发后台管理系统（一、环境配置及项目创建）

简介

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的 UI 组件库，其组件功能丰富多样使用简单，开发成本相对来说较低；前提是需要对WEB前端知识以及vue开发有一定的了解，本文开发使用的是vue3.2.31+ant-design-vue3.2.0；本文将对整个开发过程进行全方位记录与介绍。

vue参考文档：Vue.js

ant-design-cue参考文档：https://www.antdv.com/docs/vue/introduce-cn

环境配置以及项目创建

我使用的手脚架工具是vue官方提供的vue-cli，同时你的开发电脑需要安装node环境，本文将不做介绍，安装教程可自行查阅node安装教程，本次开发使用全程使用npm包管理，npm因网络问题可能会出现下载失败等情况，推荐将npm设置为淘宝提供的镜像地址

1、npm配置

  1.在命令行工具中输入

npm config set  https://registry.npmmirror.com

  2.检查配置信息

npm config get registry

出现该信息代表设置成功 

2、安装手脚架工具

  全局安装vue-cli

$ npm install -g @vue/cli

3、创建一个vue项目

vue create ant_design_vue_demo

 出现如下配置信息界面

 提示选取一个 preset，无需特殊配置，直接回车使用默认配置即可。

---

 待创建完成即可生成一个ant_design_vue_demo的文件夹

 我们的业务代码将在src文件夹下开发

4、安装ant-design-vue组件

 1.进入项目ant_design_vue_demo的文件夹根目录

cd ./ant_design_vue_demo

 2.利用npm安装组件 

npm i --save ant-design-vue

 5、使用ant-design-vue

  1.在main.js中全局注册ant-design-vue

import { createApp } from 'vue'
// 引入组件
import Antd from 'ant-design-vue';
// 引入样式文件
import 'ant-design-vue/dist/antd.css';
import App from './App.vue'

const app = createApp(App);

// vue注册Antd并挂载应用
app.use(Antd).mount('#app');

  2. 使用ant-design-vue组件（以为登陆表单为例），在app.vue中编辑代码

  3.启动预览以及构建

  在命令行中输入（支持热更新）

npm run serve

  即可在浏览器中输入地址浏览：http://localhost:8080/ 

---

  在命令行中输入构建命令即可打包输出

npm run build

 最终的文件将输出在dist文件夹内 

 至此本节完，后续将继续更新。