最近被同事安利了一款后台管理平台框架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:{}
}
今天的分析就到这里，现有一个全局的概念，下篇我们分析布局以及组件的展示
