系统参数配置

  1. - config / 配置
  2.   - router-config / 路由配置
  3.   - heyui-config / heyui配置
  4.   - dict-config / 字典配置
  5.   - autocomplete-config / autocomplete配置
  6.   - category-config / category配置
  7.   - tree-config / 树配置
  8.   - menu-config / 系统菜单配置

heyui配置

  2. // 定义系统的字典
  3. const staticDict = dictConfig();
  4. Object.keys(staticDict).forEach((key) => {
  5.   HeyUI.addDict(key, staticDict[key])
  6. });
  8. // 定义全局的字典结构，请根据系统的设计设置
  9. HeyUI.config('dict.keyName', "key");
  10. HeyUI.config('dict.titleName', "title");
  12. // 设置系统中的 autocomplete, tree, category 配置，系统中可以直接使用config引用
  13. HeyUI.config("autocomplete.configs", autocompleteConfig());
  14. HeyUI.config("tree.configs", treeConfig());
  15. HeyUI.config("category.configs", categoryConfig());
  17. // 定义 menu 组件的基础参数
  18. HeyUI.config('menu', {
  19.   keyName: 'key',
  20.   titleName: 'title',
  21.   childrenName: 'children'
  22. });

tree-config, menu-config, autocomplete-config, category-config 请参考 heyui 官方文档。

路由配置

路由使用的是官方的： vue-router

vue-router 相关文档：https://router.vuejs.org/zh

Router定义

路由主要是定义系统中的所有router，目前系统中定义的都是异步加载的，建议系统主要的页面直接引用。

  1. import Login from 'components/home/index';
  3. {
  4.   path: '/home',
  5.   name: 'Home',
  6.   // 异步加载
  7.   component: (resolve) => require(['components/home/index'], resolve),
  8.   // 直接引用
  9.   component: Login,
  10.   meta: {title: '首页', icon: 'icon-monitor'}
  11. }

Router 事件定义

  1. router.beforeEach((to, from, next) => {
  2.   HeyUI.$LoadingBar.start();
  3.   // 自定义title，根据 router 中定义的meta 来更新
  4.   if (to.meta && to.meta.title) {
  5.     document.title = to.meta.title + ' - 管理应用';
  6.   } else {
  7.     document.title = '管理系统';
  8.   }
  9.   next();
  10. })
  11. router.afterEach(() => {
  12.   HeyUI.$LoadingBar.success();
  13.   // 页面的滚动置顶
  14.   document.documentElement.scrollTop = 0;
  15.   document.body.scrollTop = 0;
  16.   // baidu 统计，如果有自己的统计，请至index.html修改至自己的埋点
  17.   if( window._hmt) {
  18.     window._hmt.push(['_trackPageview', window.location.pathname]);
  19.   }
  20. });

配合webpack

  1. devServer: {
  2.   // 需要开启historyApiFallback
  3.   historyApiFallback: true
  4. },