1.远程加载翻译文件
var i18n = new VueI18n({
locale:"zh",
silentTranslationWarn:true,//没有的key值不发出警告
missing(){//没有key值时应如何处理
return "";
}
})
var app = new Vue({
i18n,
el:"#app"
})
var test = new Vue({
i18n,
el:"#test"
})
$.get("zh.json").done((result)=>{//json格式错误无法触发回调
//动态设置
i18n.setLocaleMessage('zh',result.zh);
})
HTML
{{$t('name')}}
{{$t('name1')}}
翻译文件
{
"zh":{
"name":"小遁"
}
}
2动态切换语言
i18n.locale = 'en';
2 HTML用法 以及 与JS 的对应
$t
翻译文件
image.png
12 如果不被字符串包裹 则无法输出
HTML文件
{{$t('age')}}
{{$t('gretting',{name:'小遁'})}}
{{$t('color',['红色','绿色'])}}
JS
console.log(i18n.t('age'))
console.log(i18n.t('gretting',{name:'小遁'}))
console.log(i18n.t('color','zh',['红色','绿色']))
$tc
image.png
image.png
JS
console.log(i18n.tc('car',0))
console.log(i18n.tc('apple',0))
console.log(i18n.tc('apple',10,{count:10}))
console.log(i18n.tc('apple',10,'zh',{count:10}))
4 DOM占位符
a
{{ $t('tos') }}
tos: 'Term of Service',
term: 'I accept xxx {0}.'
输出
I accept xxx Term of Service .
image.png
b
10
{{ $t('change') }}
info: 'You can {action} until {limit} minutes from departure.',
change: 'change your flight',
refund: 'refund the ticket'
输出
You can
change your flight until
10 minutes from departure.
image.png
c
{{ $t('refund') }}
输出
You can refund the ticket until 10 minutes from departure.
image.png
3 链接翻译字段
image.png
4 循环输出翻译中的数组
"si_ze_yun_suan_ti-info":[
"在计算过程和结果中,会出现小数,但被控制在有限、2位之内",
"参于计算的数、结果、计算过程都不会出现负数",
"按下Enter可支持单个结果的提交"
]
{{$t(`si_ze_yun_suan_ti-info[${index}]`)}}
// {{$t('si_ze_yun_suan_ti-info['+index+']')}}
如何运行GitHub上使用webpake打包的项目
第一步要确保你的电脑上有Node.js 且安装了NPM
在Github上下载好压缩包后 ，解压后进入，通常第一级就能发现package.json 这个文件
image.png
打开这个文件 找到scripts下的内容
image.png
通常dev 下是项目的案例，运行它将在本地建一个服务器，这里面的每一个命令都有价值
windows系统，在此目录下按住Shift点击鼠标右键，选择在"此处打开cmd"或"在此处打开powershell"
先输入npm install，安装项目所需要的依赖
安装完成后 以npm run 的方式运行脚本
npm run dev
npm run docs:dev
在本地建立一个API文档
image.png
感谢阅读，更多细节请阅读文档！