vue-ant-admin后台管理系统
⼀、前⾔
前⾯我们使⽤了+element UI做的类似于⼈⼈开源的后台管理系统，朋友推荐了⼀款vue+AntDesign版本的后台管理系统模板，这个可以实现服务于企业级别的后台系统。各项功能和界⾯的给⼈⼀种全新的感觉。下⾯我们⼀起来学习⼀哈！
⼆、介绍vue-ant
效果：
组件：
⽬前以及可以⽀持vue3.0。
安装：
1
2 npm install ant-design-vue --save
引⼊使⽤：
（1）全部引⼊：main.js⽂件中引⼊，任意页⾯直接可以拿来即⽤：
1import Antd from 'ant-design-vue'
2import 'ant-design-vue/dist/antd.css'
3Vue.use(Antd)
页⾯使⽤：
1<template>
2  <a-card class="result-error" :bordered="false">
3    <a-form layout="inline">
4      <a-form-item label="模板名称">
5        <a-input
6          v-model="dataForm.name"
7          allowClear
8          placeholder="请输⼊模板名称"
9        />
10      </a-form-item>
11      <a-form-item label="模板类型">
12        <a-select
13          v-model="pe"
14          mode="multiple"
15          placeholder="请选择模板类型"
16         
17          @change="searchQuery"
18        >
19          <a-select-option v-for="(item, index) in typeList" :key="index">
20            {{ item.label }}
21          </a-select-option>
22        </a-select>
23      </a-form-item>
24      <a-form-item >
25        <a-button type="primary" @click="searchQuery" icon="search"
26          >查询</a-button
27        >
28        <a-button
29         
30          type="primary"
31          @click="handleAddOrUpdate()"
32          icon="plus-circle"
33          >新增
34        </a-button>
35        <a-button @click="handleReset" icon="reload"
36          >重置</a-button
37        >
38        <a-button
39          key="delete"
40          type="danger"
41         
42          icon="delete"
43          @click.stop="deleteRow()"
44        >
45删除
46        </a-button>
47      </a-form-item>
48    </a-form>
49  </a-card>
50</template>
51
vue element admin52//下⾯绑定的数据我就不加了，只是参考学习怎么拿来即⽤
（2）部分引⼊：如果是页⾯中使⽤vue-ant design(以下我们简称“vue-antd”) main.js:
1import { Button } from "ant-design-vue";
2import { Table } from "ant-design-vue";
3
4Vueponent(Button.name, Button)
5Vueponent(Table.name, Table)
(3)按需引⼊：使⽤babel-plugin-import进⾏按需加载，
先安装
npm i babel-plugin-import --save-dev
后配置
2    presets: [
3        '@vue/cli-plugin-babel/preset'
4    ],
5    plugins: [
6        [
7            "import",
8            {libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}
9        ]
10    ]
11}
需要开启javascriptEnabled，不然会报错
vue-cli3.0+解决办法是：新建fig.js⽂件，写⼊：
2    css: {
3        loaderOptions: {
4            less: {
5                javascriptEnabled: true
6            }
7        }
8    }
9}
最后组件中使⽤：
1//main.js
2import { Button } from 'ant-design-vue';
3Vue.use(Button);
<a-button type="primary">请点击美⼥</a-button>
三、介绍vue-ant-admin
效果展⽰：
这个⼀定要多看⽂档，搞不定的时候先看看⽂档，⽂档没有的那就需要去查阅和⾃⼰实现了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。