第一步必须装 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 项目国际化的更多相关文章

  1. springMVC项目国际化(i18n)实现方法

    SpringMVC项目国际化(i18n)实现方法 按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(* ̄rǒ ̄)~,项目中碰到这类需求的童鞋可能并 ...

  2. iOS项目国际化详解

    现在的开发中难免会遇到项目国际化处理,下面把我理解到的国际化相关的知识点进行总结归纳 1 首先是对项目名称,系统性的文字进行名字化,比如程序名字 1,先给项目添加语言 2 添加InfoPlist.st ...

  3. 学霸系统UI项目功能说明书 v1.0版本

    发布人员:软件工程实践小队. 发布内容:学霸系统UI项目说明书. 版本:学霸v1.0版本. 学霸系统UI项目说明书 v1.0版本分为以下部分: Part 1:用户须知: Part 2:功能实现: Pa ...

  4. Django项目国际化

    Django项目国际化 实验环境: py3.4.3 + django1.8.2 + Windows 项目设置 >django-admin startproject I18nDjango > ...

  5. angular项目国际化配置(ngx-translate)

    原文 https://www.jianshu.com/p/7d1da3098625 大纲 1.认识ngx-translate 2.ngx-translate的配置步骤 3.ngx-translate的 ...

  6. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  7. iOS 项目国际化(多语言支持)

    按下图步骤创建好后使用如下代码即可实现国际化:self.infoLB.text = NSLocalizedString("key", comment: "") ...

  8. django框架项目 国际化和本地化的实现方法

    转自 https://blog.csdn.net/scissors0707/article/details/79042458 Django国际化 所谓的国际化,是指使用不同语言的用户在访问同一个网站页 ...

  9. vue项目国际化实现 vue-i18n使用详细教程

    1.安装vue-i18n: npm i vue-i18n -S 当然你也可以这样: <script src="https://unpkg.com/vue/dist/vue.js&quo ...

随机推荐

  1. Java开发中常用的设计模式(三)---建造者模式

    一. 模式结构 建造者模式主要包含四个角色: Product:产品角色. Builder:抽象建造者.它声明为创建一个Product对象的各个部件指定的抽象接口. ConcreteBuilder:具体 ...

  2. idea 版本升级至最新版

    前言:当前最新版为官网上的2018.2.3版本 一.下载最新版 官网地址:http://www.jetbrains.com/idea/download/#section=windows 百度网盘地址: ...

  3. future3.2 Tomcat启动时错误:Cannot rename original file to ...

    其日志中第一个警告如下: 警告: Unexpected exception resolving reference java.io.IOException: Cannot rename origina ...

  4. Ajax 的几种方法应用

    一,js实现ajax异步请求,简单例子 try.jsp <%@ page language="java" import="java.util.*" pag ...

  5. css画一个提示框

    用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. vue-router 实现导航守卫(路由卫士)

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  7. 关于redux

    react将dom解耦,不用直接操作dom,使用了状态机制,当状态改变时视图就会相应更新.我们知道在react中,父组件可以将一些状态传递给子组件,让子组件的视图相应更新,这时我们会发现,只有有关联的 ...

  8. kafka介绍 - 官网

    介绍 Kafka是一个分布式的.分区的.冗余的日志提交服务.它使用了独特的设计,提供了所有消息传递系统所具有的功能. 我们先来看下几个消息传递系统的术语: Kafka维护消息类别的东西是主题(topi ...

  9. SQLSERVER中KeyHashValue的作用(上)

    SQLSERVER中KeyHashValue的作用(上) SQLSERVER中KeyHashValue的作用(下) 原文的标题是:SQLSERVER在索引下如何找到哈希值的随想 现在知道KeyHash ...

  10. Vue2学习笔记:过渡效果css

    过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...