适用于希望用中文开发vue前端应用的开发者。\ 理论上适用于任何希望用非英语语言开发的用户。
已安装好node.js、已全局安装vue-cli。
npm install安装好后，请使用tool文件夹中的 pug-lexer/index.js 替换 node_module 中的相应文件。
（使pug能支持 .中文类#中文id 的写法）
npm run servenpm run build在你的项目中使用
npm i -D hia-multilingual-vue-template配置你的vue.config.js 或者 webpack配置文件
//引入webpack。
const WEBPACK = require('webpack') ;
//引入你自己的脚本语库文件。
const MULTILINGUAL_CUSTOM = require('path to your cutom multilingual file') ;
//引入标准语库文件。
const MULTILINGUAL = require('hia-multilingual-vue-template/tool/multilingual/multilingual') ;
//合并成单个对象。
var DefineObj= Object.assign({
//还可以在此同时定义一些其它编译时全局常量。
//PRODUCTION: JSON.stringify(true),
//VERSION: JSON.stringify('1.0.0'),
//BROWSER_SUPPORTS_HTML5: true,
//'typeof window': JSON.stringify('object'),
//'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},MULTILINGUAL,MULTILINGUAL_CUSTOM);
module.exports = {
//DefinePlugin插件处理DefineObj
configureWebpack: (config) => {
config.plugins.push(
new WEBPACK.DefinePlugin(DefineObj)
),
pluginOptions: {
//自动导入多语言辅助sass库，避免在每个sass文件或块中手动导入。
'style-resources-loader': {
'preProcessor': 'sass',
'patterns': [
PATH.resolve(__dirname, 'path to your cutom multilingual sass/scss file'),//note 将你的样式语库文件置于你需要的地方。Put your custom configuration files in where it is needed.
PATH.resolve(__dirname, 'hia-multilingual-vue-template/tool/multilingual/multilingual.sass'),//标准样式语库文件
]
}
}
}写中文样式
$春色: 浅绿色
[主题=春天]
background: lightblue //note 常规写法目前无法用中文。（理论上改造sass后可以实现常规写法支持中文）
// 使用混入，全程用中文写样式
// 单条样式规则写法
+_(背景色 , 浅蓝色 )
+_(颜色 , 红色 )
+_(背景色 , $春色 )
+_(background-color, #3a3 ) //可混用原始英文命名
+_(背景色 , lightgreen ) //可混用原始英文命名
+_(background-color, $春色 ) //可混用原始英文命名
//多条样式规则区块式写法。note 注意在sass格式下，list和map不能在起始括号后和结束括号前换行，否则会出错。如希望每条定义都单独成行，请用scss格式。
+_((颜色: #514d97,
背景色 : 绿色,
边框 : 121px 实线 浅蓝色), false)写中文脚本
/*
语库的用语定义分为两类
1. 命名: '"name"', 这样的形式，用于一些（英文）api对象的属性。
示例：var 某api对象 = {[命名]:'值'}; 某api函数调用(对象[属性][子属性]......[最终属性])
2. 命名: 'name'，这样的形式，主要用于js环境的一些系统级全局变量、API、速写语法。
示例：某全局方法名();
*/
//note 导入对象，属于局部变量，可直接中文命名。
import V视图 from 'vue' ;
import V状态管理 from 'vuex' ;
import 用户 from './modules/user.js' ;
//note 以 `启用` 为例，为语库中的属性词汇，会在编译期直接替换为语库中定义的值: `"use"`
V视图[启用](V状态管理);
export default new V状态管理[状态设定]({
登录信息:{
已登录 : false, //从本地存储获取及处理
上次登录时间: null, //从本地存储获取及处理
上次活跃时间: null, //从本地存储获取及处理
本次操作时间: null, //从本地存储获取及处理
过期时间 : 20*60*1000//从本地存储获取及处理
}
},
更新本次操作时间 (状态数据) {
//note 以 `当前时间` 为例，为语库中的系统级定义词汇，会在编译期直接替换为语库中定义的值: `new Date()`
状态数据.登录信息.本次操作时间 = 当前时间;
//note 以 `控制台记录` 为例，为语库中的系统级定义词汇，会在编译期直接替换为语库中定义的值: `console.log`。note 属于速写形式
控制台记录('更新本次操作时间',状态数据.登录信息.本次操作时间);
}
},
更新本次操作时间: (上下文)=>{
控制台记录('更新本次操作时间 (上下文) ',上下文);
上下文[执行]('更新本次操作时间');
}
},
用户:用户
}
});
好处是:
不足在于:
总体上来说，本项目目前用最精简的方式，实现了大范围的中文可用性，效能比突出；\ 另一方面，功能还很单薄，很多不足之处也很明显。\ 后期会不断改进。
button(@click = '更新一些时间') //-无效
/*须加上括号：*/ button(@click = '更新一些时间()')
//- 英文名方法则无此问题本应用尚处于demo状态，主要是标准语库刚开始建立，如果你希望立即在你的开发环境中运用此框架，你至少需要建立及完善你自身的语库。
使用建议(仅供参考)：某些情形下适宜用中文(多见于可读性更重要的场景)，某些情形下适宜用英文尤其是简短字符(多见于需要快速输入代码的场景，比如快速实现一些逻辑简明但是语法啰嗦的私有方法内部方法等)，请斟酌结合使用，找到最佳的使用方式。
如在团队项目中推行，目前还需要慎重考虑，主要有两点：
解决的方案也有：开发时使用各自的用语库，需要交流时则转换为标准库用语(可以有多套)即可，但这一点依赖于用语转换功能(尚未实现，后期考虑)。
多年开发的经历给了本人一个启示：改代码、读代码的所需时间和精力远远超出写代码。\ 本人作为一个中文母语的开发者，英文的掌握还算合格，但在阅读和理解速度上始终磕磕碰碰，各人的语言天赋毕竟有先天差异，并非后天一定能弥补（或者代价很大），（另还有中文、英文在象形表意、表音之间的差异和影响，也是额外的因素，这些可以查看很多这方面的相关论述）。\ 基于以上及更多相关因素，本人逐渐开始尝试在编程中更多的引入中文名，取得不错效果后，从此坚定了自己走中文开发的步子。工作中以前端为主，而前端中vue在中国使用广泛，因此决定在vue基础上实现一套多语言机制方便中文开发。
一言蔽之：“此之蜜糖,彼之砒霜”。
Apply to vue front-end application developers who wanna use Chinese for programming.\ In theory it is applicable to any user whe wants to use the Non English language for development.
Node.js is installed and Vue cli is installed globally.
npm installAfter installation，Please use file ./tool/pug-lexer/index.js replace the relevant file of node_module .
（make the pug can support sketch form of .中文类#中文id）
npm run servenpm run buildUse in your projects
npm i -D hia-multilingual-vue-templateConfigure your vue.config.js or webpack configuration file
const WEBPACK = require('webpack') ;
// Introduce your own script corpus file.
const MULTILINGUAL_CUSTOM = require('path to your cutom multilingual file') ;
// Introduce standard corpus files.
const MULTILINGUAL = require('hia-multilingual-vue-template/tool/multilingual/multilingual') ;
// Merge into a single object.
var DefineObj= Object.assign({
// You can also define some other compile-time global constants here.
//PRODUCTION: JSON.stringify(true),
//VERSION: JSON.stringify('1.0.0'),
//BROWSER_SUPPORTS_HTML5: true,
//'typeof window': JSON.stringify('object'),
//'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},MULTILINGUAL,MULTILINGUAL_CUSTOM);
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new WEBPACK.DefinePlugin(DefineObj)
),
pluginOptions: {
// Automatically import the multi-language auxiliary sass library to avoid manual import in each sass file or block.
'style-resources-loader': {
'preProcessor': 'sass',
'patterns': [
PATH.resolve(__dirname, 'path to your cutom multilingual sass/scss file'),//note Put your custom configuration files in where it is needed.
PATH.resolve(__dirname, 'hia-multilingual-vue-template/tool/multilingual/multilingual.sass'),// Standard style corpus file
]
}
}
}Write Chinese style
$春色: 浅绿色
[主题=春天]
background: lightblue // note It is currently not possible to use Chinese in regular writing. (Theoretically, it is possible to support conventional Chinese after transforming sass)
// use mixin and write styles in Chinese throughout
// single style rule
+_(背景色 , 浅蓝色 )
+_(颜色 , 红色 )
+_(背景色 , $春色 )
+_(background-color, #3a3 ) //can be mixed with the original English name
+_(背景色 , lightgreen ) //can be mixed with the original English name
+_(background-color, $春色 ) //can be mixed with the original English name
//Block style of multiple style rules. note Note that in sass format, lists and maps cannot wrap after the opening parenthesis and before the closing parenthesis, otherwise errors will occur. If you want each definition to be on its own line, use scss format.
+_((颜色: #514d97,
背景色 : 绿色,
边框 : 121px 实线 浅蓝色), false)Write Chinese script
/*
Definition of terminology into two categories
1. Naming: '"name"', this form is used for some (English) API object properties.
Example: var some-api-object = {[name]: 'value'}; some api function call (object [attribute] [sub-attribute] ... [final attribute])
2. Naming: 'name', this form is mainly used for some system-level global variables, APIs, and sketch syntax in the js environment.
Example: a global method name ();
*/
//note The imported object is a local variable and can be directly named in Chinese.
import V视图 from 'vue' ;
import V状态管理 from 'vuex' ;
import 用户 from './modules/user.js' ;
//note note Take `enable` as an example, as the attribute word in the corpus, it will be directly replaced with the value defined in the corpus at compile time: `"use"`
V视图[启用](V状态管理);
export default new V状态管理[状态设定]({
登录信息:{
已登录 : false, //
上次登录时间: null, //
上次活跃时间: null, //
本次操作时间: null, //
过期时间 : 20*60*1000//
}
},
更新本次操作时间 (状态数据) {
//note Take `当前时间` as an example, define the vocabulary for the system level in the corpus, and it will be directly replaced with the value defined in the corpus during compilation:`new Date()`
状态数据.登录信息.本次操作时间 = 当前时间;
//note Take `控制台记录` as an example, define the vocabulary for the system level in the corpus, it will be directly replaced with the value defined in the corpus at compile time:`console.log`. note is sketched form
控制台记录('更新本次操作时间',状态数据.登录信息.本次操作时间);
}
},
更新本次操作时间: (上下文)=>{
控制台记录('更新本次操作时间 (上下文) ',上下文);
上下文[执行]('更新本次操作时间');
}
},
用户:用户
}
});
Benefits are:
The disadvantages are:
Overall, the project has achieved a wide range of Chinese availability in the most streamlined manner, with an outstanding efficiency ratio. \ On the other hand, the functions are very thin and many shortcomings are obvious. \ It will continue to improve in the later stages.
button (@click = 'Update some time') //-Invalid
/* Require parentheses: */ button (@click = 'Update some time ()')
//- English name method does not have this problemThis application is still in the demo state, and the standard corpus is just beginning to be established. If you want to use this framework in your development environment immediately, you need to build and improve your own corpus at least.
Suggestions for use (for reference only): Chinese is appropriate in some cases (most commonly in scenarios where readability is more important), and English, especially short characters, is appropriate in some situations (mostly in scenarios where you need to quickly enter code, such as quick Implement some logically concise but grammatically private methods, etc.), please consider combining them to find the best way to use them.
If it is implemented in a team project, it needs to be carefully considered at present. There are two main points:
There are also solutions: use their own termbases during development, and convert to standard library terms (multiple sets) when communication is required, but this depends on the term conversion function (not yet implemented, considered later).
The experience of many years of development has given me an inspiration: the time and effort required to change and read the code is far more than writing code. \ As a native Chinese developer, I still have a good command of English, but I always have a bump in the speed of reading and understanding. After all, each person's language talents have innate differences, which may not be able to make up (or cost a lot). (There are also differences and influences between pictographs and phonetics in Chinese and English, which are also additional factors. These can be viewed in many related discussions in this regard). \ Based on the above and more related factors, I gradually began to try to introduce more Chinese names in programming. After achieving good results, I have firmly established myself in the pace of Chinese development. The front-end is mainly used in the work, and vue is widely used in China. Therefore, it is decided to implement a multi-language mechanism based on vue to facilitate Chinese development.
In a word: "This honey, the other frost."
MIT 2020 mandolin.mdy@gmail.com