vite-manageweb

Build Setup

# Install dependencies
npm install
npm install --registry=https://registry.npm.taobao.org

# serve with hot reload at localhost:9528
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

vscode eslint settings

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "eslint.autoFixOnSave": true

# ignore line
// eslint-disable-next-line
# ignore file
/* eslint-disable */

本地开发环境连接websocket

# 安装nginx
brew install nginx
# 启动nginx 服务
nginx
# 添加配置文件dove.conf
cp dove.conf /usr/local/etc/nginx/servers/
# 重启nginx
nginx -s reload
# 访问浏览器即可
http://localhost:9530

资源本地化操作

正则表达式匹配中文字符 [\u4e00-\u9fa5]

本地化资源文件

简体中文 @/lang/cn.js

英文 @/lang/en.js

繁体中文 @/lang/tw.js

表格简体 @/lang/table_cn.js

表格英文 @/lang/table_en.js

表格繁体 @/lang/table_tw.js

注意事项

所有文字都要进行国际化处理，要在资源文件对应的Object里事先定义好key:value，命名要规范，见名知意。 在要使用的地方使用 $t('objectName.key')进行调用。单据，单据列表，报表等需要栏位配置的vxe_table表格都需在@src/config对应的js文件里替换掉originTitle属性的value值。看见未翻译的文字请进行翻译。

安装插件

Vscode 安装插件 i18n Ally
配置如下，方便查看文案和提取文案。
  "i18n-ally.localesPaths": [
        "src/lang"
    ],
  "i18n-ally.enabledParsers": [
    "json",
    "js"
    ],
    "i18n-ally.sourceLanguage": "cn",
    "i18n-ally.displayLanguage": "cn",
    "i18n-ally.keystyle": "nested",
    "i18n-ally.annotations": true

使用方法

在对应的多语言文件里先定义好简体资源，借助谷歌翻译，将文本信息转换成繁体和英文，加进对应的多语言文件。

谷歌翻译：https://translate.google.cn/?sl=zh-CN&tl=en&op=translate

安装i18n Ally插件后，选中需要国际化的中文文本，点击左侧的小灯泡替换成对应的$t( )形式。

如果要传递变量，可使用{ } 进行占位，如 daysUsed: '已使用{days}天', 详细请参考vuei18n文档。

如果是可配置的表格，先在@lang对应的表格多语言文件里进行定义，再到@src/config对应的js配置文件里替换掉originTitle属性的value值。vxe-table的国际化需要在main.js文件里进行开启。

VXETable.setup({
  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
  translate(key, args) {
    if (key) {
      return i18n.t(key, args)
    }
    return key
  }
})

命名规范

目前有以下主要部分，后续可再根据需要进行新增。

依据实际情况，父对象里嵌套子对象将不同模块进行区分。表格的字段命名使用后端的变量名，尽可能的复用，如果同个变量名有多个含义，如cus_name可能代表‘客户’ / '供应商' 则使用对应的英文名进行命名 （客户：customer，供应商：supplier）

Object	Description
route	路由
table{ header{ },body{ },footer{ } }	表格（表头，表身，表尾）
slot	页面插槽的文字
toolbar	功能按钮栏组件
button	所有按钮
modal	模态框，使用modal名称进行区分
desktop	桌面相关
company{ sideBar{ },mainBox{ },form{ },table{ } }	公司管理相关（侧边栏，主体区域，表单，表格）
userInfo	个人中心相关
superAdmin	中台相关
message	操作提示信息 success: '成功', error: '失败'，warning: '警告'，info: '提示'
placeholder	文本提示信息 search : 搜索 , enter : 输入， select：选择
basic	基础模块相关
setting	设置模块相关

npm run dev 报错内存溢出javaScript heap out of memory 处理

# 1.全局安装increase-memory-limit
npm install -g increase-memory-limit
# 2.进入工程目录，执行 :
increase-memory-limit