八:Vue下的国际化处理

p { margin-bottom: 0.25cm; line-height: 120% }

1:首先安装 Vue-i8n

npm install vue-i18n --save

注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹。 -save是指将包信息添加到dependencies,表示你发布时依赖的包裹。

2:在main.js中配置信息

import VueI18n from ‘vue-i18n‘

import {getCookie} from ‘./common/cookie‘ //引入一个js文件,使用引入的函数getCookie,根据当前缓存切换语言

Vue.use(VueI18n)

const i18n = new VueI18n({

  locale: getCookie(‘PLAY_LANG‘,‘cn-zh‘), //根据当前语言切换

  messages: {

    ‘cn-zh‘: require(‘./language/cn-zh‘), //中文语言包

    ‘en-us‘: require(‘./language/en-us‘) //英文语言包

  }

})

new Vue({

  el: ‘#app‘,

  i18n, // 不要忘记

  router,

  template: ‘<App/>‘,

  components: { App }

})

3:在目录src下新建一个language文件,尽可能与main.js同级存放,添加两个js文件,cn-zh和en-us,存放需要翻译的语言

4:getCookie函数

function getCookie(name,defaultValue) {

  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); //"(^| )" 匹配开头和空格

  if (arr = document.cookie.match(reg))

    return unescape(arr[2]);

  else

    return defaultValue;

}

export {

  getCookie

}

时间: 2024-10-17 23:48:05

八:Vue下的国际化处理的相关文章

Web标准:八、下拉及多级弹出菜单

Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单 1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下加一个二级菜单.这个在上一节第七节课上我已经做出来了,这里就不再写了.再重温一下注意点:如果要在一级菜单下增加二级菜单,二级菜单需要加一个float:none;来去掉浮动,否则二级菜单也会浮动到一行上去了. 2)绝对定位和浮动的区别和运用 绝对定位:它的位置将依据浏览器左上角开始计算或相对于父容器(在父

vue 下个版本中(3.0)为什么弃用Obeject.defineProperty 采用 proxy(es6)

都知道VUE 中 数据劫持采用的是 Obeject.defineProperty,  Obeject.defineProperty(obj,prop,{}),第三参数是属性描述符,该描述符有两种形式,1:存取描述符,2:数据描述符, 存取描述符中 里有 setter 和getter 函数,他们分别监听数据的读取和修改操作.然后 通过递归遍历劫持对象中所有属性. proxy:词面上意思是代理,其实就是词面上意思 它能代理 对象,然后做一些自定义行为, Proxy(target, handle),

Struts2框架使用(八)之struts2的国际化

国际化(Internationlization),通俗地讲,就是让软件实现对多种语言的支持: 想要软件国际化需要设置配置文件,例如: 首先创建一个mrlv.properties文件,这个文件是默认使用的语言.编写所需要国际化的字段: 这里的value是Unicode编码.{0}是一个可变参数. mrlv.properties userName=\u7528\u6237\u5040d password=\u5bc6\u7801 login=\u767b\u5f55 welcomeInfo=\u6b

vue下assets下的静态资源和static下的静态资源的区别

区别一(最终位置) assets文件是src下的,所以最后运行是需要进行打包,而static文件不需要打包直接放在最终的文件中了 区别二(引用方式) assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,但是在script下必须用@import的方式引入 static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入 建议 只要在src下面的组件中用到的资源就放在assets下面 在项目中,经常会用带一些没有npm包的第三方插件,放在

vue项目的国际化 vue-i18n

https://www.cnblogs.com/scode2/p/9098579.html 记录此篇文章出处见上面链接: 首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n,附上 github 传送门. 1.我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架.这边有我整理的一个脚手架 demo ,有助于你快速的进行 vue 模块化开发. 2.我们需要安装 vue-i18n, 推荐 npm 包依赖: $ npm

Android 博客园客户端 (八) 下拉刷新、分页,AsyncTask

一直以来,无论是博客.新闻.还是推荐用户列表.只能加载固定的数量,也没有刷新功能. 为了实现这个功能,也试过很多第三方的开源控件,如PullToRefreshListVie等.无意中发现了Google官方发布了一个新的控件(SwipeRefreshLayout),支持下拉刷新,这个控件在Google应用中都有出现过.效果也是非常的不错. 具体的使用方法及代码如下: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/r

Bootstarp学习(八)下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

vue学习(八) vue中样式 class 定义引用

//style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:italic } .active{//字符间距 letter-spacing: 0.5em }</style>//html <div id="app"> //传统方式 <h1 class="red thin" >红红火火</>

html2canvas在vue下的巨坑

公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片,自己画这也太耗时间了吧!后面在npm上一查有个html2canvas的框架可以用这里附上地址html2canvas使用起来也特别简单,官网是这么描述的 html <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello worl