1、安装vue-i18n:

npm install vue-i18n

如果npm长时间无反应,或安装失败,可以换成淘宝镜像安装:

cnpm install vue-i18n

2、在main.js中引用:

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

3、在src下新建语言文件:

src/locale/language/zh.js

src/locale/language/en.js

内容为:

                                 en.js

                                zh.js

4、新建一个common组件:

HTML模板:

                               HTML模板

data数据:

                                data数据

6、回到main.js中创建一个i18n的实例,并挂载到vue实例中

                             vue-i18n实力创建并挂载

7、其实到这一步,已经基本差不多了,但是有人会问,为什么在i18n上使用了本地存储,其实这里我是为了实现点击按钮,页面不刷新、且更换语言,不然的话,我们就得手动在代码中控制语言的切换,这样做是不允许的,话不多说,直接放代码。

                                App.vue

                                App.vue

                               common.vue

注:这里利用了element-ui的一些弹窗效果,所以你需先引入element-ui,还有就是这里用到了路由,记得配置一下路由哈,我们来看一下最终效果图:

效果图

如果有什么不懂的,或者大佬们有一些更好的建议以及经验的分享,欢迎在评论区留言。

vue实现对语言的切换,结合vue-il8n。的更多相关文章

  1. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  2. vue中的tab栏切换内容变换

    <!DOCTYPE html> <html lang="cn-zh"> <head> <meta charset="UTF-8& ...

  3. 使用vue封装一个tab栏切换的左侧导航栏的公共组件

     首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码 ...

  4. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  5. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  6. Vue学习【第一篇】:Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  7. 三 vue学习三 从读懂一个Vue项目开始

    源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...

  8. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  9. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

随机推荐

  1. Linu基础之权限管理

    二十二.权限管理 22.1)什么是权限 针对某些文件或者进程,对用户进行限制,权限可以理解为用于约束用户能对系统所做的操作. 22.2)权限和用户的关系   [root@centos7 ~]# ll ...

  2. Java中Random随机数

    java中一般有两种随机数,一个是Math中random()方法,一个是Random类. 一.Math.random() 随即生成0<=x<1的小数. 实例:如何写,生成随机生成出0~10 ...

  3. 滚动视图、列表视图[ListView、SimpleAdapter类]

    滚动视图 <ScrollView android: layout_width="fill_parent" android: layout_height="fill_ ...

  4. Anaconda大法好,为什么要用Anaconda(附linux安装与用例)

    距离写上一个博客已经过去很久了,注册的时候我还是个大三学生抱着windows系统的visual studio在OPENCV等等复杂组件下面瑟瑟发抖,一不小心就担心hpp找不到了,依赖库没了,或者安装了 ...

  5. Linux系统命令。

      help:命令用于显示shell内部命令的帮助信息.help命令只能显示shell内部的命令              帮助信息.而对于外部命令的帮助信息只能使用man或者info命令查看   m ...

  6. Kubernetes容器集群管理环境 - Prometheus监控篇

    一.Prometheus介绍之前已经详细介绍了Kubernetes集群部署篇,今天这里重点说下Kubernetes监控方案-Prometheus+Grafana.Prometheus(普罗米修斯)是一 ...

  7. Java Lambda表达式forEach无法跳出循环的解决思路

    Java Lambda表达式forEach无法跳出循环的解决思路 如果你使用过forEach方法来遍历集合,你会发现在lambda表达式中的return并不会终止循环,这是由于lambda的底层实现导 ...

  8. 如何思考博弈dp

    两个人的规则是否一致 若仅仅是先后的差别 我们可用dp解决一般思考一个子状态 对于当前的那个状态 我们进行什么样的操作 已知什么

  9. 直方图均衡基本原理及Python实现

    1. 基本原理 通过一个变换,将输入图像的灰度级转换为`均匀分布`,变换后的灰度级的概率密度函数为 $$P_s(s) = \frac{1}{L-1}$$ 直方图均衡的变换为 $$s = T(r) = ...

  10. Linux学习之自动配置部署——初用expect

    主机A连接主机B 免密登陆 + 自动部署 expect实现自动的交互式任务 ——— send 向进程发送字符串(输入) ——— expect 从进程接受字符串 ——— spawn 启动新进程 ——— ...