vue-i18n的入门使用

vue-i18n就是国际化应用，如果你想让你的软件支持多种语言，肯定需要用到，不过这里也是入门使用

1，安装

vue install vue-i18n

2,全局注入

Vue.use(VueI18n)

3，配置相关文件位置
这里messages部分就是你要用到的语言种类，分别引入地址，我这里存放在lang文件下的zhCHS 和en ,之所以是zhCHS是因为还有繁体，这里就展示中英文切换

const i18n = new VueI18n({locale: localStorage.getItem('languageSet') || 'zh', //从localStorage里获取用户中英文选择，没有则默认中文messages: {'zh': require('./lang/zhCHS'),'en': require('./lang/en')}
})

4，创建相关语言包文件，上面说了，在lang文件下，src的lang文件夹里面的zhCHS 和en

zhCHS .js

module.exports = {language: {name: 'English'},user: {login: '登录',register: '注册',loginUsername: '请输入邮箱/手机号',p: '我是中文',}
}

en.js

module.exports = {language: {name: '中文'},user: {login: 'login',register: 'register',loginUsername: 'please input email or phone',p: ' I’m chanese',}
}

5,我们少了一步挂载，现在在main的js的vue实例里面挂载i18n

new Vue({router,store,i18n,render: h => h(App)
}).$mount('#app')

router和store是路由和vuex，路由可能要用，希望配置一下，vuex是创建项目顺带装的，没有也可以的，i18n就是我们引入的插件

6，去到你想要展示切换按钮的页面，我这里设置在about页面
组件html部分

<div><span>{{$t('user.login')}}</span><input type="text" :placeholder="$t('user.loginUsername')"  v-model="username" /><p>{{$t('user.p')}}</p><div @click="changeLanguage()">{{$t('language.name')}}</div></div>

这一段我使用了一个登录文字，一个输入框，一个切换文字
i18n就是使用$t去引用他的插件，然后包含一个括号里面是引用的语言文字,比如登录文字就是用的user对象下的login文字，可以返回步骤4去看一下语言包
组件js部分

export default {name:'login',data(){return{username:''}},methods:{changeLanguage(){this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh'   //设置中英文模式localStorage.setItem('languageSet',this.$i18n.locale)   //将用户设置存储到localStorage以便用户下次打开时使用此设置},remind(){this.$toast(this.$t('user.loginUsername'))}}}

这个其实跑起来看一下就好了，使用$t，全部文件都可以引用语言包的文字切换，就是特别麻烦，每个都需要配置，不过确实人工翻译比较精准，但是也是很耗时间，然后下面是文件目录

vue-i18n的入门使用相关推荐

webpack - vue Component 从入门到放弃（三）
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸插件插件可以完成更多 loader 不能完成的功能.插 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
Vue与Element入门使用
Vue: Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件. 视图:负责页 ...
视频教程-新React+VUE前端教程入门到精通-Vue
新React+VUE前端教程入门到精通 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客户, ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
[Vue.js 1] 入门基础知识与开发
最近接触的几个项目框架全部用到了Vue.js技术,没办法只能对vuejs进行深入学习,不过可喜的是Vue.js学习路线非常快,上手也是非常快的,所以对于前端开发也是主流的开发框架了.不过其中的js部分 ...

vue-i18n的入门使用

vue-i18n的入门使用相关推荐

最新文章

热门文章