vux UI 项目国际化
第一步必须装 vux vux-loader vuex 和vuex-i18n
npm i vux-loader -D
npm i vuex vux vuex-i18n -S
安装完成需要配置webpack.base.conf.js
为了降低使用成本及不侵入原来配置,只需要调用merge方法对原来webpack配置进行操作:
//引入vuxLoader
const vuxLoader = require('vux-loader')
const webpackConfig = {} // 原来的 webpack.base.js 配置
module.exports = vuxLoader.merge(webpackConfig, {
plugins:[
{name:'vux-ui'},
{
name: 'i18n',
vuxStaticReplace: true,
staticReplace: true,
extractToFiles: 'src/locales/components.yml',
localeList: ['en', 'zh-CN','tw']
}
]
})
使用vux组件和其他UI库有点不太一样,为了防止全部引入导致体积过大,你只需要在需要的地方引入,然后注册
import {aaa} from 'vux'
export default {
components:{
aaa,
}
}
如果全要全局注册某一组件,只需要在入口文件全局注册就OK
例如
import {***} from 'vux';
Vue.use(***)
这里提示一点
如果项目引入vux组件就报各种错误 具体错误我记不太清楚,就是各种loader 引起错误,查了好久,发现是vue-loader 版本过高,导致出现错误,最后把vue-loader 降到 vue-loader@12.2.2
或者把vux-loader 更新最新版本
第二步国际化然后分别引入
import Vuex from 'vuex'
import vuexI18n from 'vuex-i18n'
使用插件
Vue.use(Vuex)
let store = new Vuex.Store({
modules: {
i18n: vuexI18n.store
}
})
Vue.use(vuexI18n.plugin, store)
注意:如果在使用过程中报如下错误
在入口文件中类似这样全局注册插件
let store = new Vuex.Store({
modules: {
i18n: vuexI18n.store
}
})
Vue.use(vuexI18n.plugin, store)
import { ConfirmPlugin, LocalePlugin} from 'vux'
Vue.use(ConfirmPlugin)
Vue.use(localePlugin)
注意点:
* 第一 Vue.use(***)一定要放在store变量下
* 第二 组件中就不要再类似下面这种写法了,
import { ConfirmPlugin} from 'vux'
Vue.use(ConfirmPlugin)
第三部在入口文件配置多语言
这里是vux入口文件链接main.js
大家可以参考vux配置
首先安装 object-assign包
npm install object-assign -S
入口文件
import objectAssign from 'object-assign'
import vuxLocales from './locales/all.yml'
import componentsLocales from './locales/components.yml'
// 引入vux localePlugin插件 保存本地语言环境
import {localePlugin} from 'vux'
//本地语言环境
const finalLocales = {
'en': objectAssign(vuxLocales['en'], componentsLocales['en']),
'zh-CN': objectAssign(vuxLocales['zh-CN'], componentsLocales['zh-CN']),
'tw': objectAssign(vuxLocales['tw'], componentsLocales['tw'])
}
for (let i in finalLocales) {
Vue.i18n.add(i, finalLocales[i])
}
Vue.use(LocalePlugin)
const nowLocale = Vue.locale.get()
if (/zh/.test(nowLocale)) {
Vue.i18n.set('zh-CN')
} else if (/en/.test(nowLocale)) {
Vue.i18n.set('en')
} else {
Vue.i18n.set('tw')
}
然后 在src文件夹下新建locales语言包 文件夹 在里面新建 all.yml, en.yml, zh-CN.yml, tw.yml, components.yml 如下图
由于语言文件是.yml格式,所以需要安装js-yaml-loader包来处理.yml文件
npm install js-yaml-loader -D
webpack.base.conf.js 配置处理这种文件的规则
{
test: /\.(yaml|yml)$/,
loader: 'js-yaml-loader'
},
在页面弄一个切换语言按钮 来改变语言
<i18n>
hello:
en: hello vue
zh-CN: 你好Vue
tw: 你號Vue
</i18n>
<template>
<div id="app">
<img src="./assets/logo.png">
<h2>{{$t('hello')}}</h2>
<router-link :to="{path:'news'}">新闻列表</router-link>
<button @click="changeLanguage"> 切换语言</button>
<login></login>
<XDialog v-model="dialogStatus" :hide-on-blur="true">
<div class="e-dialog">
<div class="e-dialog-content">
<Radio
title="请选择语言"
v-model="value"
:options="options" @change="check">
</Radio>
</div>
</div>
</XDialog>
<router-view/>
</div>
</template>
<script>
import {Radio} from 'mint-ui'
import login from './components/login'
import { XDialog } from 'vux'
export default {
name: 'App',
data () {
return {
dialogStatus: true,
value: 'zh-CN',
options: [
{label: '中文', value: 'zh-CN'},
{label: 'English', value: 'en'},
{label: '繁体', value: 'tw'}
]
}
},
methods: {
changeLanguage () {
this.dialogStatus = !this.dialogStatus
},
check () {
this.$nextTick(() => {
this.$i18n.set(this.value)
})
this.dialogStatus = false
}
},
components: {
login,
XDialog,
Radio
}
}
</script>
<style>
@import "common/css/mint.css";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
最后给大家来张演示图
vux UI 项目国际化的更多相关文章
- springMVC项目国际化(i18n)实现方法
SpringMVC项目国际化(i18n)实现方法 按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(* ̄rǒ ̄)~,项目中碰到这类需求的童鞋可能并 ...
- iOS项目国际化详解
现在的开发中难免会遇到项目国际化处理,下面把我理解到的国际化相关的知识点进行总结归纳 1 首先是对项目名称,系统性的文字进行名字化,比如程序名字 1,先给项目添加语言 2 添加InfoPlist.st ...
- 学霸系统UI项目功能说明书 v1.0版本
发布人员:软件工程实践小队. 发布内容:学霸系统UI项目说明书. 版本:学霸v1.0版本. 学霸系统UI项目说明书 v1.0版本分为以下部分: Part 1:用户须知: Part 2:功能实现: Pa ...
- Django项目国际化
Django项目国际化 实验环境: py3.4.3 + django1.8.2 + Windows 项目设置 >django-admin startproject I18nDjango > ...
- angular项目国际化配置(ngx-translate)
原文 https://www.jianshu.com/p/7d1da3098625 大纲 1.认识ngx-translate 2.ngx-translate的配置步骤 3.ngx-translate的 ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- iOS 项目国际化(多语言支持)
按下图步骤创建好后使用如下代码即可实现国际化:self.infoLB.text = NSLocalizedString("key", comment: "") ...
- django框架项目 国际化和本地化的实现方法
转自 https://blog.csdn.net/scissors0707/article/details/79042458 Django国际化 所谓的国际化,是指使用不同语言的用户在访问同一个网站页 ...
- vue项目国际化实现 vue-i18n使用详细教程
1.安装vue-i18n: npm i vue-i18n -S 当然你也可以这样: <script src="https://unpkg.com/vue/dist/vue.js&quo ...
随机推荐
- google vue开发调试插件,简便安装,亲测可用
前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...
- vscode 代码跳转之PHP篇
1.安装插件:PHP IntelliSense 2.配置:"php.executablePath": "C:\\php\\php.exe", 但是目前有问题,跨 ...
- FineReport中树数据集如何实现组织树报表
组织树报表中由id与父id来实现组织树报表,若层级数较多时,对每个单元格设置过滤条件和形态会比较繁琐,因此FineReport提供了一种特殊的数据集——树数据集,只需要简单的设置就能自动递归出层级,方 ...
- ArcGIS for JavaScript 关于路径开发的一些记录(二)
又是高度集中开发路径模块的一天.真希望自己以后都可以如此的专注和高效(虽然知道很难一直都保持这样的状态,我会坚持的~哈哈哈) 言归正传,今天开发了途径点的功能和改进了些相关起点.终点的代码.先说一下我 ...
- Flare-On4 解题复现
01 是一个 html 页面, 用开发者工具看看,发现是简单的 js 加密. 猜测加密算法可逆,试着用 PyvragFvqrYbtvafNerRnfl@syner-ba.pbz 作为输入,然后调试 , ...
- android--Git上克隆项目遇到的坑
直接上图,首先你得有你得GitHub项目地址,如下: 然后打开android studio,选择新建项目时从Git上克隆: 点击clone等待完成,新窗口打开. 打开之后可能.或许.大概.也许会出现下 ...
- 在Fragment里面调用getActivity()报null
看友盟的错误日志发现又出现了NullPointerException,然后去看代码,发现只有是上下文有空的可能,但是因为以前已经发生过这种情况所以上下文我都是在创建Fragment对象的时候从Acti ...
- git pull 错误:The following untracked working tree files would be overwritten by merge
错误描述: $ git pull origin alphaFrom https://github.com/shirley-wu/HeartTrace * branch alpha ...
- Eigen 学习之块操作
Eigen 为 Matrix .Array 和 Vector提供了块操作方法.块区域可以被用作 左值 和 右值.在Eigen中最常用的块操作函数是 .block() . block() 方法的定义如 ...
- C++虚函数原理
类中的成员函数分为静态成员函数和非静态成员函数,而非静态成员函数又分为普通函数和虚函数. Q: 为什么使用虚函数 A: 使用虚函数,我们可以获得良好的可扩展性.在一个设计比较好的面向对象程序中,大多数 ...