vue-ant-admin后台管理系统

一、前言

前面我们使用了vue+element UI做的类似于人人开源的后台管理系统，朋友推荐了一款vue+AntDesign版本的后台管理系统模板，这个可以实现服务于企业级别的后台系统。各项功能和界面的给人一种全新的感觉。下面我们一起来学习一哈！

二、介绍vue-ant

效果：

文档地址：​​https://www.antdv.com/docs/vue/introduce-cn/​​

源码地址：​​https://github.com/vueComponent/ant-design-vue/​​

组件类型：

目前以及可以支持vue3.0。

安装：

npm install ant-design-vue --save

引入使用：

（1）全部引入：main.js文件中引入，任意页面直接可以拿来即用：

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

    页面使用：

<template>
  <a-card class="result-error" :bordered="false">
    <a-form layout="inline">
      <a-form-item label="模板名称">
        <a-input
          v-model="dataForm.name"
          allowClear
          placeholder="请输入模板名称"
        />
      </a-form-item>
      <a-form-item label="模板类型">
        <a-select
          v-model="dataForm.type"
          mode="multiple"
          placeholder="请选择模板类型"
          style="width: 200px"
          @change="searchQuery"
        >
          <a-select-option v-for="(item, index) in typeList" :key="index">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item style="margin-left: 20px">
        <a-button type="primary" @click="searchQuery" icon="search"
          >查询</a-button
        >
        <a-button
          style="margin-left: 8px"
          type="primary"
          @click="handleAddOrUpdate()"
          icon="plus-circle"
          >新增
        </a-button>
        <a-button style="margin-left: 8px" @click="handleReset" icon="reload"
          >重置</a-button
        >
        <a-button
          key="delete"
          type="danger"
          style="margin-left: 8px"
          icon="delete"
          @click.stop="deleteRow()"
        >
          删除
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

//下面绑定的数据我就不加了，只是参考学习怎么拿来即用

（2）部分引入：如果是页面中使用vue-ant design(以下我们简称“vue-antd”)

main.js:

import { Button } from "ant-design-vue";
import { Table } from "ant-design-vue";

Vue.component(Button.name, Button)
Vue.component(Table.name, Table)

(3)按需引入：使用​​babel-plugin-import​​进行按需加载，

先安装

npm i babel-plugin-import --save-dev

后配置

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}
        ]
    ]
}

 需要开启javascriptEnabled,不然会报错

vue-cli3.0+解决办法是：新建​​vue.config.js​​文件，写入：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}

最后组件中使用：

//main.js
import { Button } from 'ant-design-vue';
Vue.use(Button);

<a-button type="primary">请点击美女</a-button>

三、介绍vue-ant-admin

效果展示：

演示地址：​​https://iczer.gitee.io/vue-antd-admin​​

文档地址：​​https://iczer.gitee.io/vue-antd-admin-docs/start/use.html​​

源码地址：​​https://github.com/iczer/vue-antd-admin​​（网上还有一个相似度极高的，自己可以看看）

四、上手使用：

这个一定要多看文档，搞不定的时候先看看文档，文档没有的那就需要去查阅和自己实现了。