前端性能优化五十六：vite自动加载

最新推荐文章于 2024-09-16 06:30:00 发布

Sunny_媛

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量129

点赞数 1

文章标签：前端 javascript 开发语言系统架构性能优化软件工程架构

本文链接：https://blog.csdn.net/m0_68635815/article/details/136104373

版权

类似于Vue DevTools的Open component in editor功能

1. 实现思路:

①. Open IDE:打开编辑器功能

②. Web层:提供该功能所需的页面元素及交互功能

③. Server层:用户交互时传递数据到Server层,由Server层调用Open IDE功能

④. DOM -> Vue SFC映射关系:告诉OPen IDE打开哪个文件并定位到对应的行列

(1). 中英文互换:

basic.ts:

export default {
  okText: 'OK',
  closeText: 'Close',
  ......
};

export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {
  const obj: Recordable = {};

  Object.keys(langs).forEach((key) => {
    const langFileModule = langs[key].default;
    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');
    const lastIndex = fileName.lastIndexOf('.');
    fileName = fileName.substring(0, lastIndex);
    const keyList = fileName.split('/');
    const moduleName = keyList.shift();
    const objKey = keyList.join('.');

    if (moduleName) {
      if (objKey) {
        set(obj, moduleName, obj[moduleName] || {});
        set(obj[moduleName], objKey, langFileModule);
      } else {
        set(obj, moduleName, langFileModule || {});
      }
    }
  });
  return obj;
}

import antdLocale from 'ant-design-vue/es/locale/en_US';

const modules = import.meta.globEager('./en/**/*.ts');
export default {
  message: {
    ...genMessage(modules, 'en'),
    antdLocale,
  }
}