国际化改造方案
===
```
国际化改造大致分两部分:
(1)antd UI组件国际化
(2)业务文案的国际化需求
```
### 一、antd UI 组件国际化
文档参见【[LocaleProvider 国际化](https://vue.ant.design/components/locale-provider-cn/)】
在项目App.vue页面增加国际化代码
```
<template>
<a-locale-provider :locale="zh_CN">
<App />
</a-locale-provider>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
data() {
return {
zh_CN,
}
}
}
</script>
```
增加国际化设置功能切换locale国际化的类型值
### 二、业务文案的国际化需求
#### (1) 安装 vue-i18n:
```
$ npm install vue-i18n
```
#### (2) 在 src/components/lang/ 中创建语言js,例如 en-US.js 和 zh-CN.js
在 en-US.js 和 zh-CN.js 中分别作了如下配置:
```
// zh-CN.js
export default {
lang: '中文',
}
// en-US.js
export default {
lang: 'English',
}
```
#### (3) 在main.js实例化组件
注意:Vue.use(VueI18n) 要放在实例化之前,不然会报错
```
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 注册i18n实例并引入语言文件,文件格式等下解析
const i18n = new VueI18n({
locale: Vue.ls.get("language", "zh-CN")),
messages: {
'zh-CN': require('@/components/lang/zh-CN.js'),
'en-US': require('@/components/lang/en-US.js')
}
})
//将i18n注入到vue实例中
new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})
```
#### 在组件中这样使用
```
<template>
<div>
{{ $t('lang') }}
</div>
</template>
```
#### 如果想传参,例如zh-CN.js中这样配置:
```
welcome: "你好,{name}"
```
页面组件中这样使用:
```
<template>
<div>
{{ $tc('welcome', {'name':'jeecg' }) }}
</div>
</template>
```
页面输出 : 你好,jeecg
#### 常用方法:
```
$t(path, locale, option) // text 文本替换,locale可单独设置语言,option可传参数替换模板
$tc(path, choice, locale, option) // text+choice 比$t多一个choice,可以选择模板内容(模板内容间用 | 分隔,如 香蕉|苹果|梨,最多只能使用三个选项,下标从0开始,当选项为2个时下标从1开始~~)
$te(path) // text+exist 判断当前语言包中path是否存在
$d(number|Date, path, locale) // date 时间格式化
$n(number, path, locale) // number 数字格式化(货币等)
// 更多细节参考官方文档:https://kazupon.github.io/vue-i18n/api/#vue-injected-methods
```
如果某些js中含有字符需要切换语言(包括rules),需要写在computed中。
```
computed: {
rules1 () {
return {
username: [
{required: true, message: this.$t('username.required'), trigger: 'blur'}
]
}
}
}
```
(3)国际化语言切换实现
```
handleSetLanguage(lang) {
this.$i18n.locale = lang; //改变当前语言
Vue.ls.set("language", lang);//将lang 语言存在localStorage里,main里面就会根据属性值进行判断 locale: Vue.ls.get("language", "zh-CN")
},
```
- 项目介绍
- 新手入门教程
- 开发环境准备
- 基础环境要求
- 基础环境与工具安装
- 开发环境搭建
- 如何启动项目
- 平台技术点
- Maven私服设置
- 切换其他数据库
- Websorm通过SVN下载项目
- docker搭建开发环境
- 前端多环境构建配置2.4+
- 快速开始
- HelloWorld
- 上线发布
- JAR部署方案
- WAR部署方案
- 极简部署方案
- Docker镜像制作
- JAR分离打包
- 开启Nginx压缩
- bak
- 2.3 Docker镜像制作
- JAR分离打包方案二
- 2.3前端配置API地址
- 微服务切换
- 微服务整体解决方案2.4+
- 单体升级为微服务方案2.4+
- 微服务快速调试2.4+
- 微服务熔断/降级/限流2.4+
- 微服务Feign接口调用示例2.4+
- jeecg-boot-starter 2.4+
- xxl-job定时任务集成2.4+
- Redisson分布式锁集成2.4+
- rabitmq消息队列集成2.4+
- Redis缓存集成2.4+
- 消息总线用法2.4+
- jeecg-cloud-module2.4+
- 单体升级为微服务方案2.3
- 系统监控跨域问题修复2.3
- 微服务中新增服务接口2.3
- 微服务上线发布
- 微服务上线部署(Windows)
- 微服务上线部署(Centos)
- 微服务上线部署(Ubuntu)
- docker-compose发布
- 2.3版微服务文档
- 微服务配置中心
- RabbitMq安装教程Win
- 通过docker-compose文件部署微服务项目
- 代码生成器
- 代码生成器简介
- 代码生成器使用教程
- 代码生成器配置文件
- 如何自定义生成器模板
- 弃用GUI模式(不建议使用)
- 代码生成器模板
- 如何使用代码生成器
- JAR方式发布如何使用代码生成器
- 生成代码优化
- Online导入表过滤规则
- 常见问题(代码生成)
- 后端开发技巧
- 常用问题汇总
- 自定义注解用法
- Spring缓存注解@Cacheable
- 字典翻译注解@Dict
- 数据权限注解@PermissionData
- 日志记录注解@AutoLog
- 菜单路由配置
- 菜单配置说明
- 带参数路由菜单
- 路由菜单规则
- 菜单快速SQL
- 聚合路由菜单
- 数据快照功能如何用?
- 快速创建module模块
- 旧:新建maven模块项目?
- 查询过滤器用法
- 系统日志怎么插入?
- 自定义sql分页实现
- 针对敏感数据,加密传递方案
- redis 如何使用?
- 事务如何使用?
- 动态数据源使用
- 定时任务如何开发?
- 系统通知接口
- 消息推送接口
- JeecgBoot连接达梦数据库
- 接口敏感数据安全
- 批量插入效率建议
- 短信接口配置(阿里大鱼短信)
- 自定义注解限制重复提交
- 邮箱配置文档
- 公文发文收文
- WPS配置文档
- 公文发文收文使用手册
- WPS集成代码解读
- 积木报表设计器数据集使用
- 父子编码使用说明
- 我的文档安全配置
- 文档预览
- 在线多数据源
- 导入校验工具类
- druid数据库密码加密
- 系统文件上传
- 统一文件上传规则
- MinIO配置
- 阿里云OSS配置
- UI前端开发技巧
- 如何更改默认主题
- Form表单开发特殊性
- Icon图标扩展方法
- vuex使用详解
- vue路由带参总结
- 全局配置文件
- 列表自定义列实现
- 国际化改造方案
- 常用命令
- 报表开发
- 报表开发技术点
- 自定义报表组件
- 源码解读
- 自定义组件
- 前端技巧
- components包下文件描述
- JDictSelectTag字典标签
- duplicateCheck表单字段重复校验通用JS
- JVxeTable行编辑
- 组件配置文档
- 自定义组件
- 封装自定义组件
- 自定义组件增强
- 使用示例
- 常见问题解答
- JEditableTable帮助文档
- JMultiSelectTag多选组件
- JPopup弹窗选择组件
- JSearchSelectTag字典表的搜索组件
- JSelectDepart部门选择组件
- JSelectMultiUser用户多选组件
- JSelectUserByDep根据部门选择用户
- JTreeDict分类字典树形下拉组件
- JTreeSelect树形下拉框 (异步加载)
- JInput 查询组件
- JCron 帮助文档
- JCategorySelect 帮助文档
- JUpload上传组件
- JImageUpload图片上传组件
- JSuperQuery高级查询组件
- JAreaLinkage省市县三级联动
- JEllipsis超长截取显示
- JDate 日期组件
- JCheckbox组件
- JCodeEditor组件
- JSelectMultiple多选下拉组件
- JTreeSelect树形下拉组件
- JImportModal组件
- JAsyncTreeList异步树表格
- JFormContainer使用文档
- JMarkdownEditor使用文档
- 前端开发坑(一定要注意)
- 按需加载方案
- 按需加载@减小打包
- JeecgBoot实战-按需加载方案
- 表格的换行与不换行
- 旧:表格的换行与不换行
- 主子表子表下拉框、时间框弹框被遮挡优化
- 前端依赖包package.json
- 如何实现多列表单
- 前端字典缓存用法
- 自定义首页
- 门户首页Portal权限控制
- 系统权限用法
- JAVA请求权限控制
- 页面按钮权限用法
- 列表列字段权限控制
- 表单权限
- 显示隐藏控制
- 禁用控制用法一
- 禁用控制用法二
- 子表行字段的禁用和隐藏控制
- 数据权限
- 数据权限规则篇
- 数据权限用法篇
- 编码对接数据权限(未用查询过滤器)
- 权限配置自定义SQL
- 二级部门权限管理
- 填值规则(编码生成)
- 校验规则(高级校验)
- 列表列字段导出权限示例
- 备份
- 通过URL方式配置数据权限
- Online表单
- Online菜单配置
- Online开发初体验
- Online表单配置
- Online表单一对多表单配置
- Online表单删除说明
- Online表单标准字段说明
- Online树列表表单配置
- Online表单配置参数说明
- online 导入导出值转换器
- Online表单填值规则配置
- Online表单排版
- Online树列表表单配置(个性化)
- Online表单查询配置说明
- Online表单使用表单设计器
- Online表单控件
- 下拉框@多选框@单选框
- 下拉多选
- 下拉搜索
- Popup控件
- 富文本控件
- 时间控件
- 用户选择器
- 部门选择器
- 自定义树控件
- 分类字典树控件
- Online之popup使用
- 下拉联动组件
- markdown编辑器
- 省市区组件
- 字段排列顺序调整
- 字段显示隐藏控制
- 字段校验规则使用
- 控件配置Href
- 控件默认值表达式
- 开关控件
- Online权限配置( 新版 20200914)
- 字段权限配置与授权
- 按钮权限配置与授权
- 数据权限配置与授权
- Online权限配置
- 列表字段权限(显示与隐藏)
- 表单字段权限(隐藏和禁用)
- 列表按钮权限(隐藏)
- 列表数据权限
- 树形表单数据权限配置
- 二次开发(在线增强)
- online基础篇-JS增强
- online基础篇-JS增强(表单渲染)
- JS增强 API
- 列表
- 表单
- JS增强 实战示例
- 列表自定义按钮
- 表单自定义按钮 改变控件的值
- 修改控件值【从表】
- 修改控件值【单(主)表】
- online表单JS增强实现下拉联动
- 表单提交前事件
- 页面加载时设置表单默认值
- online基础篇-SQL增强
- online基础篇-自定义按钮
- Online自定义按钮-表达式用法
- online基础篇-java增强
- Online java增强 导入
- Online java增强 导出
- Online java增强 查询
- online升级篇-表单API接口
- online升级篇-扩展控件类型
- edu
- Online表单专题课程
- 备注
- Online表单权限配置按钮/列/表单字段的显示或隐藏
- 列表权限
- 列表字段的显示或隐藏
- 列表操作按钮的显示或隐藏
- 列表自定义按钮的显示或隐藏
- 表单权限
- 表单字段的显示或隐藏
- 表单字段的禁用或可编辑
- Online导出支持图片
- Online表单视图功能
- JVXETable和JEditableTable切换方式
- 通过字段href实现3张表的关联
- 从数据库导入表单配置排除表名
- 表单配置[扩展参数]使用手册
- Online报表
- Online图表
- Online图表配置手册
- 列表数据显示规则
- 组合报表的配置方式
- 如何配置菜单
- 常见问题
- JS增强
- 参数说明
- Online报表
- online报表-使用步骤
- online报表-动态参数
- 如何配置报表菜单
- Online报表权限配置
- Online报表系统变量应用
- 参数说明
- Online报表排序
- 字段href
- 字典配置
- online报表-合计
- online报表-配置分组标题
- 高级实战技巧
- HBuilderX打包APP
- 1.Build-JeecgBoot项目
- 2.HBuilderX 打包APP
- HBuilder打包APP手机端安装配置教程
- Websocket业务对接
- WebSocket的集成
- SAAS多租户用法
- 如何集成积木报表
- 【内测】使用jdk14启动项目
- CAS单点登录
- CAS单点登录服务端准备
- 单点登录流程图
- 单点登录配置说明(2.3.1+)
- archive
- 2.JeecgBoot后端对接CAS步骤
- 3.JeecgBoot前端项目对接CAS步骤(2.3.0)
- 表单设计器
- 介绍
- 基础操作
- 配置字段属性
- 配置表单属性
- 配置到菜单
- 移动表单设计
- 表单多视图(移动)
- 表单组件
- 基础字段
- 单选、多选、下拉框
- 日期、时间选择器
- 高级组件
- 文本
- 按钮
- 分隔符
- 文件上传和图片上传
- 布局组件
- Tabs
- 卡片
- 栅格布局
- JEECG字段
- 设计子表
- 表字典(POPUP/下拉)
- 用户组件、部门组件
- 高级操作
- JS增强
- 全局JS增强
- 按钮JS增强
- JS增强示例
- CSS增强
- 表单增强
- 自定义接收URL
- 外部JS\CSS增强
- 控件取值
- 默认值表达式
- 远程API取值
- 填值规则
- 数据绑定映射
- 业务场景
- 远端选项数据
- 高级查询
- Elasticsearch安装与配置
- 高级查询界面
- 权限配置
- 表单字段权限
- 列表数据权限
- 列表按钮权限
- 角色授权
- 路由配置
- 表单对外接口
- 二次开发
- 自定义新控件
- 上传配置(七牛配置)
- 上传云存储自定义2.4+
- 旧:基础操作手册
- 旧:高级操作手册
- AutoPOI(Excel工具)
- 快速文档
- 单表数据导出多表头示例
- 单表数据多表头导入注意
- 导出自定义选择列导出
- @excel注解使用
- excel根据模板导出
- 一对多导出needMerge
- 第三方登录
- 企业微信配置
- 钉钉配置
- 企业微信集成方案
- APP开发
- 后台推送消息给移动端
- 小结
- 编码规范
- 代码规范
- 建表规范
- 个人备忘录
- 小白实战课程
- 任务节点直接关联多节点分支
- 使用排他网管的分支
- 并行网管分支
- 任务节点人员配置表达式使用
- 会签属性循环集合表达式使用
- 流程监听
- 节点配置地址
- 多数据源使用
- 自定义开发流程小结
- 登录时不选择部门不能进入主页面
- docker安装中文字体
- cloud system api
- jvxe升级 - LOWCOD-812
- cloud 跨域问题
- online同步数据库 问题
- online自动测试
- jeecg-uniapp开发
- 开发环境搭建
- 项目简介
- 打包项目
- APP打包
- 微信小程序打包
- H5打包
- 小程序发布
- API接口配置
- uniapp推送
- 后台定时unipush推送配置
- FQA
- 数据库兼容问题
- postgres int类型 实体布尔类型插入数据失败
- docker制作达梦数据库镜像