使用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中编辑代码

<template>
    <a-row justify="center" class='wrapper'>
        <a-col :xs="20" :sm="11" :md="9" :lg="7" :xl="5">
            <a-divider />
            <a-form 
               :model="formState" 
               name="basic"
               autocomplete="off"
               @finish="onFinish"
               @finishFailed="onFinishFailed"
               class='form'>
                <a-form-item name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
                    <a-input v-model:value="formState.username" placeholder='用户名' size="large" allow-clear>
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
                    <a-input-password v-model:value="formState.password" placeholder='密码' size="large">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item name="remember">
                    <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" :loading="loading" html-type="submit" block size="large">登录</a-button>
                </a-form-item>
            </a-form>
        </a-col>
    </a-row>
</template>
<script>
import { reactive } from 'vue'
// 引入图标组件  
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';

export default {
    name: 'App',
    // 注册组件
    components: {
        UserOutlined,
        LockOutlined
    },
    setup() {
        const formState = reactive({
            username: '',
            password: '',
            remember: true,
        });
        const methods = {
            onFinish(values) {
                console.log('Success:', values);
            },
            onFinishFailed(errorInfo) {
                console.log('Failed:', errorInfo);
            },
        }
        return {
            formState,
            ...methods
        }
    }
}
</script>
<style>
</style>

  3.启动预览以及构建

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

npm run serve

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

---

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

npm run build

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

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