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. [ PyQt入门教程 ] Qt Designer工具的布局管理

    这节课很重要..界面整洁美观与否就看布局了..这里讲布局方法,至于设计的天赋与最终界面的美感那就看造化了.. 本文主要讲述Qt Designer工具实现界面控件布局管理,就是排列组合控件.包括水平布局 ...

  2. web设计_5_自由的框式组件

    1. CSS3 border-radius 圆角矩形框 圆角矩形框组件是页面布局中常常用到的,利用CSS3的border-radius可非常方便的创建. 并且在横向纵向上面都有很好的扩展性和灵活性. ...

  3. element el-table resetfields() 不生效

    表单中的重置按钮不生效的问题,结合文档对照后,发现是没有为el-form-item设置prop字段 所以,想让resetfields()生效有2个前提: form要设置ref,且ref值要与 this ...

  4. Python flask构建微信小程序订餐系统

    第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...

  5. JWT token 跨域认证

    JSON Web Token(缩写 JWT),是目前最流行的跨域认证解决方案. session登录认证方案:用户从客户端传递用户名.密码等信息,服务端认证后将信息存储在session中,将sessio ...

  6. Spring的数据库编程浅入浅出——不吹牛逼不装逼

    Spring的数据库编程浅入浅出——不吹牛逼不装逼 前言 上文书我写了Spring的核心部分控制反转和依赖注入,后来又衔接了注解,在这后面本来是应该写Spring AOP的,但我觉得对于初学者来说,这 ...

  7. Flutter学习笔记(14)--StatefulWidget简单使用

    如需转载,请注明出处:Flutter学习笔记(14)--StatefulWidget简单使用 今天上班没那么忙,突然想起来我好像没StatefulWidget(有状态组件)的demo,闲来无事,写一个 ...

  8. Spring入门编程问题集锦Top10

    我写的一篇文章,希望对spring初学者有所帮助: 1.如何学习Spring? 你可以通过下列途径学习spring: ①. spring下载包中doc目录下的MVC-step-by-step和samp ...

  9. Redis——基础使用

    Redis总体介绍: Redis特性 Redis(REmote DIctionary Server),是一个开源的内存数据库 持久化:RDB.AOF 主备复制 丰富的数据结构 Lua脚本.事务 Red ...

  10. 解决微信二次分享失败--后面被加上from=singlemessage&isappinstalled=0的解决方案

    首次分享成功,点开后再次分享或第三次分享就失败了 1.检查你分享的链接,看是否多了两个参数,微信分享会根据分享的不同,为原始链接拼接: 朋友圈   from=timeline&isappins ...