(一)添加依赖模块

  在package.json文件中添加vant模块的依赖,如:

// package.json

{
"dependencies": {
"vant": "^2.1.6"
}
}

  (二)配置语言资源文件

  1、目录结构如下:

  本测试工程的代码目录是这样的:在src文件夹中创建一个lang文件夹,在lang文件夹中分别创建index.js文件、zh_cn.js文件和en_us.js文件。

  2、zh_cn.js和en_us.js资源文件示例

// zh_cn.js文件
export default {
app: {
hello: '你好,世界!'
}
} // en_us.js文件
export default {
app: {
hello: 'Hello,World!'
}
}

  3、index.js文件内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {Locale} from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enLocale from './en_us'
import zhLocale from './zh_cn' Vue.use(VueI18n) const messages = {
en: {
...enUS,
...enLocale
},
zh: {
...zhCN,
...zhLocale
}
} const i18n = new VueI18n({
locale: 'zh', // 设置默认语言
messages: messages // 设置资源文件对象
}) // 更新vant组件库本身的语言变化,支持国际化
function vantLocales (lang) {
if (lang === 'en') {
Locale.use(lang, enUS)
} else if (lang === 'zh') {
Locale.use(lang, zhCN)
}
} export {i18n, vantLocales}

  (三)应用国际化流程

  在main.js文件中进行引用,如:

// 导入资源文件
import {i18n, vantLocales} from './lang' console.log('当前的语言是:', i18n.locale)
// vant-ui组件国际化
vantLocales(i18n.locale)

  (四)资源文件的具体使用方式

  1、在Vue文件的template标签中使用方式

<template>
<div>
<van-nav-bar :title="this.$t('app.hello')" @click-left="show=true">
<van-icon name="search" slot="left" />
</van-nav-bar>
</template>

  或者

<template>
<div>
<van-nav-bar :title="$t('app.hello')" @click-left="show=true">
<van-icon name="search" slot="left" />
</van-nav-bar>
</template>

  效果如下:

 、  

  2、在Vue文件的script标签中使用方式

created () {
console.log('start to enter created ', this.$t('app.hello'))
}

  效果如下:

 、 

  3、在JS文件中使用方式

  在main.js文件使用示例,如下:

console.log('main.js文件温馨提示:', i18n.messages[i18n.locale].app.hello)

  效果如下:

  、

  (五)vant-ui组件库国际化过程

  界面上自身的语言词条,可以通过i18n来实现,若是vant-ui自身组件库呢?又该如何国际化?其实,也很简单,只要语言发生了变化,调用一个lang/index.js文件中的vantLocales()函数即可,例如下面两种示例:

  1、zh语言及其效果

  vantLocales('zh')

  

  2、en语言及其效果

  vantLocales('en')

  

  其中,被红色框圈住的就是vant-ui组件库自身的语言,目前已实现了其国际化流程。

Vue中vue-i18n结合vant-ui实现国际化的更多相关文章

  1. 在Vue中使用i18n 国际化遇到 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    最近用Vue在搭建前端框架,在引用i18n时,运行的时候报错:Uncaught TypeError: Cannot assign to read only property 'exports' of ...

  2. 在vue中如何安装使用Vant

    ---恢复内容开始--- Vant中文文档地址:https://youzan.github.io/vant-weapp 1.创建Vue项目之后,运行安装命令:13:47:04 npm i vant - ...

  3. Vue中vue.config的配置

    vue-cli 3.x 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动在根目录中创建 vue.config.js. vue.config.js 是一个可选的配置文件,如果 ...

  4. vue中 Vue.set 的使用

    Vue.set(vm.items, indexOfItem, newValue) 1.vm.items :源数据:2.indexOfItem : 要修改的数据的键3.newValue : 要修改的数据 ...

  5. 自定义vant ui steps组件效果实现

    记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个 先上效果图和代码: (1)HTML部分 <d ...

  6. vue使用Vant UI中的swiper组件及传值

    子组件SwiperBanner <!-- --> <template> <div class="swiper"> <van-swipe : ...

  7. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  8. 在Vue中加入国际化(i18n)中英文功能

    1.npm安装方法 npm install vue-i18n --save 2.在src资源文件下创建文件夹i18n,i18n下面创建index.js文件,引入VueI18n和导入语言包(按开发需求可 ...

  9. element ui 在vue中使用可能遇到的问题

    组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart 在 main.js 中写入以下内容: import Vue from 'vue ...

  10. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

随机推荐

  1. C语言系列之预处理指令、循环左移函数的使用(四)

    本章节将讲两个知识点 第一个知识点:常用的预处理指令 第二个知识点:循环左移右移函数 第一个知识点:预处理指令 一种预处理指令是#define,他把名字A定义为P0,当这个名字出现在源文件的任何地方时 ...

  2. VirtualBox桥接网络,设置虚拟机联网,连接VirtualBox虚拟系统中的数据库等

    由于最近搭建一个项目自己的阿里云的服务器内存不足,自己笔记本使用VitrualBox电脑虚拟linux系统来搭建,把这次使用过程遇到的问题记录下来也能帮助遇到同样的小伙伴. 软件: VirtualBo ...

  3. 安卓开发实战-记账本APP(四)

    今天实现的内容有:添加账本信息,个人头像的切换,密码的修改,退出登录. 添加账本信息有三个功能: ①记一笔支出项目 ②记一笔收入项目 ③清空所有项目 在此期间遇到的困难有:Activity与Fragm ...

  4. nginx的进程结构

    nginx分为单进程和多进程,默认是多进程 进程架构: 父进程master process  子进程worker process和cache manager cache loader 高可用性 高可靠 ...

  5. LUAMD5加密

    md5里的方法: C:\Windows\System32>lua Lua 5.1.4 Copyright (C) 1994-2008 Lua.org, PUC-Rio > require( ...

  6. linux下的 $ ./configure $ sudo make && sudo make install

    $ ./configure $ sudo make && sudo make install 1)./configure命令就是执行当前目录的名为configure的脚本,主要的作用是 ...

  7. [scrapy]安装报错: Twisted安装错误

    http://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted 下载whl文件 然后 pip install <whl文件名> 安装 Scrapy s ...

  8. 12306 抢票系列之只要搞定RAIL_DEVICEID的来源,从此抢票不再掉线(上)

    郑重声明: 本文仅供学习使用,禁止用于非法用途,否则后果自负,如有侵权,烦请告知删除,谢谢合作! 开篇明义 本文针对自主开发的抢票脚本在抢票过程中常常遇到的请求无效等问题,简单分析了 12306 网站 ...

  9. 1.3创建你的第一个Android项目——Android第一行代码(第二版)笔记

    创建HelloWorld项目 如果是第一次,会经过漫长的等待. 启动模拟器 可以用第三方模拟器,也可以用官方集成的 点击后出现如下界面,可创建多个模拟器,如图,我已经创建好了一个,如果你没有,就点击下 ...

  10. 什么?接口中方法可以不是抽象的「JDK8接口新语法的深度思考」

    先赞后看,养成习惯 文本已收录至GitHub开源仓库 Lu_JavaNodes 码云仓库地址Lu_JavaNodes,包含教程涉及所有思维导图,案例代码和后续讲解视频,欢迎Star增砖添瓦. 前言 在 ...