VueI18n插件的简单应用于国际化

作为一个前端小白,刚刚接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能,在看element-ui的开发文档时,只有简单的引入没有应用实例,对于我这种小白不能get到,无从下手。在网上也查了很多次,发现资料极其少,可能是两者恰好是近年新兴起来的,成熟的参考资料不是那么多。于是自己在参考相关文档后,多次尝试后,终于成功了。写下这部分的总结便于自己以后参考,也希望有可能帮到有需要的人。

一、Vuei18n的安装(这个是基于已经安装了Vue的前提下哦)
命令行:npm install vue-i18n –save
二、使用(参考于网上现有的资料)
也是先在main.js入口文件中进行引入配置。分如下两种情况:
1. 直接在main.js中写入语言的对应,根据自己实际情况来选择所需要的语言,这里以中文和英语为例尝试:

  (1)main.js
 import VueI18n from 'vue-i18n'

  Vue.use(VueI18n);
  const i18n = new VueI18n({
  locale: 'Chinese', // 语言标识
   messages:{
    Chinese : {
      message: {
        hello: '你好世界!',
        do:'搜一下',
        center:'处理中心',
        work:'我的工作台',
        choose1:'选择1',
        choose2:'选择2',
        choose3:'选择3',
        dan:'订单管理'
      }    
    },
      English : {
       message: {
         hello: 'hello world',
         do:'search',
         center:'processing center',
         work:'my Workbench',
         choose1:'option1',
      
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值