基于vue-i18n生态的一系列工具插件

Overview

@kuaizi/i18n

作为一个具有国际业务的Sass供应商,多语言是最基本的刚需,如何方便保持页面维护和支持多语言,由最初的直接用中文作为key值思路,@veici 最早实现的 i18n-placeholder-loader,衍生去整合我们的多语言工具链

包含的工具:

  • i18n-loader
  • vue-cli-plugin-i18n
  • webpack-plugin-i18n
  • i18n-cli
  • vue-i18n-helper

vue-i18n-loader

参考 i18n-placeholder-loader

自动替换占位符

使用文档

vue-cli-plugin-i18n

vue-cli3.x插件,注入配置 i18n-loader

使用文档

webpack-plugin-i18n

i18n-loader的插件版本,在build才替换

使用文档

i18n-cli

提供一键翻译 excel 文件

使用文档

vue-i18n-helper

提供i18n扩展的vscode快捷键

使用文档

Test 自动化测试

# 测试全部包
> yarn test

# 测试一个模块
> yarn test i18n-loader

# 测试多个模块
> yarn test i18n-loader,i18n-cli

publish

# 打版本
> npx lerna version prerelease --amend --conventional-commits
# 发布
> npx lerna publish --force-publish --yes --no-git-tag-version
# 预发版
> npx lerna publish --canary --force-publish --yes --no-git-tag-version
# 发布下一个版本
> npx lerna publish --dist-tag next --force-publish --yes
You might also like...
Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)

vue-cron-generator a project using vue,element-ui to generate cron expression 中文 Online demo Used by 👉 Attemper: A distributed,multi-tenancy,job-flow

Vue JSON form - 基于vue 通过 json 呈现视图

Vue JSON form 通过 JSON 呈现任何组件与定义脚本的实现 使用任何 Vue 组件或 html 元素构建视图 开发 vue 项目时,可能会遇到以下需求场景 界面以及交互行为需要通过配置动态呈现 定义的配置需要进行存储和读取 配置需要通过可视化界面进行编辑 普通 JSON 数据虽然可以描

Comments
  • [enhancement] cursor select the key

    [enhancement] cursor select the key

    Hello,

    One suggestion (ask of enhancement), is it possible to select the key in the editor after the shortcut CTRL + T ?

    It will help to :

    • copy / paste the inital value or
    • change the key used for the translation
    enhancement 
    opened by rdhainaut 7
  • [Enhancement Request] Handle key levels with the command @kuaizi: $i (CTRL + i)

    [Enhancement Request] Handle key levels with the command @kuaizi: $i (CTRL + i)

    Firstly, thanks for your work. The extension is great and enhance a lot the experience with vue i18n.

    I would like to know if you could generate expanded translation from 'key.levels' with @kuaizi: $i command (CTRL + i) ?

    Indeed, I organize some translations keys in levels (example: $t('meta.title'), $t('meta.description')) Then i use the magic 'CTRL + i' to auto generate vue i18n translations keys but the the key is flatten. I would like that the auto generated translation to be expanded in <i18n> tag Note: I use the "." (dot) as level separator

    <template>
          <table>
            <tr>
              <th>title</th>
              <td>{{ $t('meta.title') }}</td>
            </tr>
            <tr>
              <th>desciption</th>
              <td>{{ $t('meta.description') }}</td>
            </tr>
          </table>
    </template>
    
    <i18n>
    {
      "en": {
        "meta.description": "" // [Actual behavior: flatten] Key generated after CTRL + i command,
        "meta": {
          "title": "Kuaizi i18n plugin", // [Enhancement request: expanded] Key with 2 levels after CTRL + i command
        }
      },
      "fr": {
        "meta.description": "",
        "meta": {
          "title": "Kuaizi i18n module d'extension"
        }
      }
    }
    </i18n>
    
    
    opened by rdhainaut 1
Owner
Kuaizi ᴬᴵ
筷子前端
Kuaizi ᴬᴵ
基于Vue+Vuex+iView的电子商城网站

MALL-VUE This is a front-end project of an e-commerce website based on VUE + VUEX + iView UI, and the version that combines with the backend API serve

Gavin 1.2k Dec 29, 2022
A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.

Barrage plugin for Vue.js. Overview • Overview • Demo • Installation • Usage • Plug Options • Roadmap Introduction Baberrage is one of the popular com

SevensChan 365 Dec 19, 2022
该项目为电商后台管理系统的前端项目,基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、内容管理、统计报表、权限管理、物流管理、设置等功能。

vue_shop Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

null 16 Apr 10, 2022
基于vue-element-admin做的一个企业OA管理系统

vue-admin-template 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。 线上地址 国内访问 目前版本为 v4.0+ 基于 vue-cl

FatShady 16 Mar 28, 2022
基于vue.js开发的假面骑士后台管理系统

基于vue.js开发的假面骑士后台管理系统

null 3 Aug 11, 2021
采用Vue3 + Element Plus 搭建的后台管理系统解决方案,基于vue-manage-system开源系统升级改造而成,企业级定制,注释清晰,快速上手,开箱即用。

vue-manage-system-plus 采用Vue3 + Element Plus 搭建的后台管理系统解决方案,基于vue-manage-system开源系统升级改造而成,企业级定制,注释清晰,快速上手,开箱即用。线上地址 前言 由于之前企业改用其他技术方案,所以已经好长一段时间没接触vue了

lss 70 Jan 6, 2023
📺 一个整合国内多个直播平台内容的网站,基于vue.js开发

MixLive-vue ?? 一个整合国内多个直播平台内容的网站,基于vue.js开发。 后端项目地址 MixLive 网站页面 ?? live.yj1211.work ?? 功能 ✔ 多平台直播信息获取 ✔ 关注直播间 ✔ 弹幕获取 ✔ 直播间搜索 直播支持 虎牙、斗鱼、BILIBILI直播、网易

YJ1211 498 Jan 7, 2023
基于vue + node.js + mongodb的前后端分离个人博客

介绍 一个基于vue + node.js + mongodb的前后端分离个人博客 ?? 环境 vue-cli 4.5.0 node.js 14.16.0 mongodb 4.4.5 技术栈 前端:vue-cli,vue-router,vuex,axios,bootstrap 后端:node.js,m

null 3 Jul 9, 2021
基于Vue-element-admin框架的广播台CRM系统

radio-station-information-system 基于Vue-element-admin框架的广播台CRM系统 提供了台内人员的排班考勤功能,实现了组织关系在线化,安全可靠的组织通讯录,实现组织架构扁平化、可视化;提高组织沟通效率,提供业务审批流,使得组织沟通更加高效便捷,实现使命必

李厚江 3 Aug 23, 2021
基于vue+node+mongodb的个人博客小站,node采用了express框架,mongodb用了mongoose驱动库

基于vue+node+mongodb的个人博客小站,node采用了express框架,mongodb用了mongoose驱动库

黄俊杰 5 Sep 24, 2021