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
<div id="app">
<p >{{$t('name')}}</p>
</div>
<div id="test">
<p >{{$t('name1')}}</p>
</div>
复制代码翻译文件
{
"zh":{
"name":"小遁"
}
}
复制代码2动态切换语言
i18n.locale = 'en';
复制代码2 HTML用法 以及 与JS 的对应
$t
翻译文件
image.png
12 如果不被字符串包裹 则无法输出
HTML文件
<p >{{$t('age')}}</p>
<p >{{$t('gretting',{name:'小遁'})}}</p>
<p >{{$t('color',['红色','绿色'])}}</p>
<!-- 注意 v-t在使用上述远程加载时将失效 -->
<p v-t="'age'"></p>
<p v-t="{path:'gretting',locale:'zh',args:{name:'小遁'}}"></p>
<p v-t="{path:'color',locale:'zh',args:['红色','绿色']}"></p>
<p v-text="$t('age')"></p>
复制代码JS
console.log(i18n.t('age'))
console.log(i18n.t('gretting',{name:'小遁'}))
console.log(i18n.t('color','zh',['红色','绿色']))
复制代码$tc
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
<i18n path="term" tag="p" id="week">
<span >{{ $t('tos') }}</a>
</i18n>
tos: 'Term of Service',
term: 'I accept xxx {0}.'
复制代码输出
<p id="week">I accept xxx <span>Term of Service </span>.</p>
复制代码
image.png
b
<i18n path="info" tag="p">
<span place="limit">10</span>
<a place="action" href="#">{{ $t('change') }}</a>
</i18n>
info: 'You can {action} until {limit} minutes from departure.',
change: 'change your flight',
refund: 'refund the ticket'
复制代码输出
<p>
You can
<a place="action" href="#">change your flight</a> until
<span place="limit">10</span> minutes from departure.
</p>
复制代码c
<i18n path="info" tag="p" :places="{ limit: 10 }">
<a place="action" href="#">{{ $t('refund') }}</a>
</i18n>
复制代码输出
<p>You can <a place="action" href="#">refund the ticket</a> until 10 minutes from departure.</p>
复制代码3 链接翻译字段
image.png
如何运行GitHub上使用webpake打包的项目
第一步要确保你的电脑上有Node.js 且安装了NPM
在Github上下载好压缩包后 ，解压后进入，通常第一级就能发现package.json 这个文件
image.png
image.png
image.png
打开这个文件 找到scripts下的内容
image.png
通常dev 下是项目的案例，运行它将在本地建一个服务器，这里面的每一个命令都有价值
windows系统，在此目录下按住Shift点击鼠标右键，选择在"此处打开cmd"或"在此处打开powershell"
先输入npm install，安装项目所需要的依赖
安装完成后 以npm run 的方式运行脚本
npm run dev
npm run docs:dev
在本地建立一个API文档
image.png
感谢阅读，更多细节请阅读文档！
原文发布时间为：2018年07月02日
原文作者：掘金
本文来源：掘金 如需转载请联系原作者
