# vue-antd-admin

**Repository Path**: onlymry/vue-antd-admin

## Basic Information

- **Project Name**: vue-antd-admin
- **Description**: 基于vue+antdUI的管理系统前端模板。不再维护，只维护ts版本了
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: http://antd.admin.onlyylt.top/
- **GVP Project**: No

## Statistics

- **Stars**: 21
- **Forks**: 1
- **Created**: 2020-06-01
- **Last Updated**: 2022-08-04

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

# 基于vue+antdUI的管理系统前端模板

- PS:master分支是落后于dev分支的，当版本比较稳定没有重大改动的时候，dev分支会同步master
- 我们不是代码的创造者，我们只是代码的搬运工
- ts版本请到:[ts版本管理模板](https://gitee.com/onlymry/v-antd-admin)
- 当前预览的是ts版本

## 运行

```bash
git clone https://gitee.com/onlymry/vue-antd-admin.git
```

```bash
$yarn/cnpm/npm i && yarn/cnpm/npm run serve
```

## 预览

[预览地址](http://antd.admin.onlyylt.top/)
[github地址](https://github.com/bossbaba/vue-antd-admin-template)


[demo1](http://demo1.antd.admin.onlyylt.top/)

>说明：github地址慢于gitee地址

## 使用

### 菜单请到`config/config.js`里面配置,如

```js
    {
      key: "home",
      title: "主页",
      icon: "user",
      system:'dev',
      children: [
        {
          key: "home",
          title: "主页"
        }
      ]
    },
    {
      key: "components",
      title: "组件",
      icon: "user",
      system:'default',
      children: [
        {
          key: "charts",
          title: "图表"
        }
      ]
    }
```

### 菜单和路由是相互依赖的

```js
    {
        path: '/about',
        name: 'About',
        component: () => import('../antdviews/About.vue')
    },
```

## 依赖

|名称|依赖|功能|
--|:--:|--:
|highcharts|yarn add / npm i / cnpm i  highcharts |图表|
|v-charts|yarn add / npm i / cnpm i  echarts  v-charts |图表|
|g2|yarn add / npm i / cnpm i  @antv/g2 |图表|
|xlsx|yarn add / npm i / cnpm i xlsx |execl|
|clipboard|yarn add / npm i / cnpm i clipboard |文字拷贝|
|lodash|yarn add / npm i / cnpm i lodash |实用工具库|
|wangeditor|yarn add / npm i / cnpm i  wangeditor  cos-js-sdk-v5 |富文本编辑|
|axios|yarn add / npm i / cnpm i axios qs|ajax请求|

## 计划

1. 先把Antd组件的示例写入到系统中
1. 下一步准备集成常用功能组件
1. 现在我们已经集成了富文本，地图，execl，lodash，大数据屏幕等插件
1. 下一步，我们将集成中后台常用的功能

## 动态加载的SDK

|名称|url|功能|
--|:--:|--:
|百度地图GL|`https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${你的apikey}&callback=initialize`|百度地图|
|腾讯地图GL地图SDK|`https://map.qq.com/api/gljs?v=1.exp&key=${你的apikey}&callback=init`|腾讯地图|
|高德地图|`https://webapi.amap.com/maps?v=1.4.15&key=${你的apikey}`|高德地图|

### 动态引入script函数

```js
 loadScript(callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `这是你的url`;

      document.body.appendChild(script);
      if (script.readyState) {
        //IE
        //这里只有反人类设计的IE才有
        script.onreadystatechange = function() {
          if (
            script.readyState == "complete" ||
            script.readyState == "loaded"
          ) {
            script.onreadystatechange = null;
            //callback&&callback()是判断传入的回调函数是不是空的如果是空的就不执行，如果不是空的就执行
            callback && callback();
          }
        };
      } else {
        //非IE
        script.onload = function() {
          callback && callback();
        };
      }
    }
  },
```

### ajax请求示例

> ajax请求使用了`axios`，在`src/tools/http.js`定义了axios的请求配置，里面注释掉的代码是平常项目里的一些操作。

1. demo：

```js
<template>
  <div>
    <div id="demo"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {
    // 在mounted里面调用ajax请求
    this.getData();
    this.postData();
  },
  methods:{
    getData(){
      this.$http.get(url,requestArguments).then(res=>{
        console.log(res);
      });
    },
    postData(){
      this.$http.post(url,requestArguments).then(res=>{
        console.log(res);
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
```

## 提交规范

```bash
feat:新增功能
fix:修复bug
docs:增加文档
style:代码格式优化（不影响代码运行的变动）
test:增加测试
refactor:重构代码
chore:构建过程或者辅助工具的变动
```