vue-antd-admin框架初探

最近被同事安利了一款后台管理平台框架vue-antd-admin,初识既被这精致、简洁的UI设计惊为天人:多tab切换页面的交互方式、流畅的页面切换效果、化繁为简的UI布局,奈何本人⑤文化,一句"牛X"走天下。迫不及待的star、fork、clone三连,期待揭开它神秘的面纱~

vue-antd-admin是基于antd基础组件开发的,整个框架文档很完善,链接在此,感谢作者的贡献~

目录结构很清晰,如下


├── docs                    # 使用文档

├── public

│  └── favicon.png          # favicon

│  └── index.html          # 入口 HTML

├── src

│  ├── assets              # 本地静态资源

│  ├── components          # 内置通用组件

│  ├── config              # 系统配置

│  ├── layouts              # 通用布局

│  ├── mock                # 本地 mock 数据

│  ├── pages                # 页面组件和通用模板

│  ├── plugins              # vue 插件

│  ├── router              # 路由配置

│  ├── services            # 数据服务模块

│  ├── store                # vuex 状态管理配置

│  ├── theme                # 主题相关

│  ├── utils                # js 工具

│  ├── App.vue              # 应用入口组件

│  ├── bootstrap.js        # 应用启动引导js

│  └── main.js              # 应用入口js

├── package.json            # package.json

├── README.md                # README.md

└── vue.config.js            # vue 配置文件

使用vue就要先关注入口main.js以及App.vue

入口main.js,主要引入插件、初始化路由以及路由守卫、添加请求拦截器


import Vue from 'vue' //引入vue

import App from './App.vue' //引入入口

import {initRouter} from './router' //引入初始化router方法

import './theme/index.less' //引入主题样式

import Antd from 'ant-design-vue' //引入antd

import Viser from 'viser-vue' //引入antv-g2绘制图形

import '@/mock' //引入mock数据

import store from './store' //引入vuex

import 'animate.css/source/animate.css' //引入动画样式

import Plugins from '@/plugins' //引入自定义插件

import {initI18n} from '@/utils/i18n' //引入国际化

import bootstrap from '@/bootstrap' //引入启动引导方法

const router = initRouter(store.state.setting.asyncRoutes) //加载异步路由

const i18n = initI18n('CN', 'US') //初始化国际化语言

Vue.use(Antd) //vue挂载antd

Vue.config.productionTip = false //

Vue.use(Viser) //挂载antv-g2

Vue.use(Plugins) //挂载自定义中间件

bootstrap({router, store, i18n, message: Vue.prototype.$message}) //初始化路由以及路由守卫、axios拦截器

new Vue({

  router,

  store,

  i18n,

  render: h => h(App),

}).$mount('#app') //挂载到dom  

App.vue注释如下,主要使用了antd的ConfigProvider组件做全局配化,共享数据给所有子孙组件。
通过router-view展示对应路由匹配的组件


<template>

  <!-- 提供全局组件可访问数据 -->

  <a-config-provider :locale="locale">

    <router-view/>

  </a-config-provider>

</template>

<script>

export default {

  name: 'App',

  data() {

    return {

      locale: {}

    }

  },

  created () {

    this.setHtmlTitle() //设置头部

    this.setLanguage(this.lang) //设置语言

    enquireScreen(isMobile => this.setDevice(isMobile)) //设置pc/移动模式

  },

  mounted() {

  this.setWeekModeTheme(this.weekMode) //设置色弱模式

  },

  watch: {

    //监听全局语言、模式、主题以及titile变更

  },

  methods: {

  }

}

</script>  

</style>

a-config-provider为antd组件库中的全局配置组件,来看一下它的实现,来人~上代码!

ar ConfigProvider = {
  name: 'AConfigProvider',
  props: {
    getPopupContainer: PropTypes.func,  //弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上
    prefixCls: PropTypes.string, //class前缀
    renderEmpty: PropTypes.func, //自定义组件空状态
    csp: PropTypes.object, //设置 Content Security Policy 配置
    autoInsertSpaceInButton: PropTypes.bool, //设置为 false 时,移除按钮中 2 个汉字之间的空格
    locale: PropTypes.object, //语言包配置
    pageHeader: PropTypes.object, //统一设置 pageHeader 的 ghost
    transformCellText: PropTypes.func //Table 数据渲染前可以再次改变,一般用户空数据的默认配置
  },
  provide: function provide() {
    var _self = this;
    this._proxyVm = new Vue({
      data: function data() {
        return _extends({}, _self.$props, {
          getPrefixCls: _self.getPrefixCls,
          renderEmpty: _self.renderEmptyComponent
        });
      }
    });
    return {
      configProvider: this._proxyVm._data //共享configProvider对象给子孙组件
    };
  },
methods:{}
}

今天的分析就到这里,现有一个全局的概念,下篇我们分析布局以及组件的展示

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,869评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,716评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,223评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,047评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,089评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,839评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,516评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,410评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,920评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,052评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,179评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,868评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,522评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,070评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,186评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,487评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,162评论 2 356

推荐阅读更多精彩内容