Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案

在「src/store/modules/user.ts」下

// 获取用户信息
    GetInfo() {
      const that = this;
      return new Promise((resolve, reject) => {
        getUserInfo(that.getToken)
          .then((res) => {
            const result = res;
            if(result.status === 200){
              const permissionsList =[
                  {
                      "label": "主控台",
                      "value": "dashboard_console"
                  },
                  {
                      "label": "工作台",
                      "value": "dashboard_workplace"
                  },
              ]
              that.setPermissions(permissionsList);
              that.setUserInfo(result);
            }else{
              reject(new Error('getInfo: permissionsList must be a non-null array !'));
            }
            that.setAvatar(result.data.name)
            resolve(res)
            /**
            if (result.permissions && result.permissions.length) {
              const permissionsList = result.permissions;
              that.setPermissions(permissionsList);
              that.setUserInfo(result);
            } else {
              reject(new Error('getInfo: permissionsList must be a non-null array !'));
            }
            that.setAvatar(result.avatar);
            resolve(res);
             */
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

但是动态路由注册时，依旧不能注册「dashboard」的菜单和页面。

我注意到一个辅助的appProvider用于在程序初始化时将$message和$dialog注意到window对象中，便于供Axios使用。 但其实有更为方便的实现方式：使用mitt（实际已经引入未用到）。 mitt引入的对象同样是全局对象，并且listener可以延迟定义，定义在任何位置。

方法如下：首先定义一个全局bus对象（eventbus.ts）

import mitt from 'mitt';
export const bus = mitt();

在http中引入并使用该对象

import { bus } from '@/utils/eventbus';
...
bus.emit('error', 'error message');
bus.emit('modal', { 
    msg: 'anything to show',
    ...
});

在引入NMessageProvider和NDialogProvider后的任何地方（例如MessageContent.vue中）监听事件：

import { bus } from '@/utils/eventbus';
...
const Message = useMessage();
bus.on('error', (msg: string) => Message.error(msg));
bus.on('modal', (e: any) => ...);

这样就可以去掉window注入、appProvider等附加机制，逻辑上更为清晰。 以上思路供参考。

在axios中，作者使用了 const { $dialog: Modal, $message: Message } = window; 但是window的Message赋值，是在Application组件中使用，Application组件又是在App.vue中才调用，导致Message对象，在没有进入到App.vue时候（也就比如在登录界面中就触发调用）就不生效。

发现报错 Component name “index” should always be multi-word（组件名称 index 应有多个字组成),要求驼峰命名的格式，改成驼峰结构后报错消失 @8版本中新增了不少的规则，第一条就是 ‘vue/multi-word-component-names’: ‘error’, 所有 index.vue 会报错。 解决方法： 按照规则 使用驼峰命名 AppHeader.vue

如果你不习惯如此，在 .eslintrc.js 文件中将其屏蔽掉

'vue/multi-word-component-names': 'off'

Header/index.vue

// 移除标签页
localStorage.removeItem(TABS_ROUTES); // 且存储用storage实例 这边却用原生localStorage 不规范

TagsView/index.vue

// 在页面关闭或刷新之前，保存数据
window.addEventListener('beforeunload', () => {
  storage.set(TABS_ROUTES, JSON.stringify(tabsList.value));
});

思路1: 登出时清空useTabsViewStore里的tabList,而不是进行storage的removeItem 思路2: 删除页面关闭刷新保存数据，而是在useTabsViewStore的tabList内部发生变化时进行存储

This UX Framework is awesome. It would be great to have an English-first approach. Today, even the demo is not usable for most people from outside China.

On each page, when reloading the page with the Reload button on Top Bar or on each tab, the result is the same:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:8191:16)
    at move (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:5123:9)
    at move (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:5096:7)
    at activeBranch.transition.afterLeave (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:2338:15)
    at performRemove (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:5210:20)
    at el._leaveCb (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:2850:9)
    at finishLeave (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7792:13)
    at resolve2 (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7822:30)
    at whenTransitionEnds (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7903:12)
    at http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7830:11

Only when click CTRL+F5 the page will display.