- 国际化
- 在 Webpack 中使用
- 通过 CDN 使用
- 支持的语言
国际化
View UI(iView) 的所有组件文案默认使用的是中文,通过设置可以使用其它语言。
在 Webpack 中使用
完整引入 iView
import Vue from 'vue';
import ViewUI from 'view-design';
import locale from 'view-design/dist/locale/en-US';
Vue.use(ViewUI, { locale });
按需引入 iView
import Vue from 'vue';
// importing ViewUI on demand
import { locale, Page } from 'view-design';
import lang from 'view-design/dist/locale/en-US';
// configure language
locale(lang);
// import components
Vue.component('Page', Page);
兼容 vue-i18n@6.x+
import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';
Vue.use(VueI18n);
Vue.use(ViewUI);
Vue.locale = () => {};
const messages = {
en: Object.assign({ message: 'hello' }, en),
zh: Object.assign({ message: '你好' }, zh)
};
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages // set locale messages
});
new Vue({ i18n }).$mount('#app');
兼容 vue-i18n@5.x
import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';
Vue.use(VueI18n);
Vue.use(ViewUI);
Vue.config.lang = 'en-US';
Vue.locale('en-US', en);
Vue.locale('zh-CN', zh);
使用 vue-i18n 时,也可以按需引入 iView 组件,用法与上面的示例类似。
通过 CDN 使用
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
<script>
iview.lang('en-US');
</script>
结合 vue-i18n 使用
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
<script src="//unpkg.com/view-design/dist/locale/zh-CN.js"></script>
<script>
// you need to add Polyfill if your browser doesn't support ES2015
Vue.locale = () => {};
const messages = {
en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
};
const i18n = new VueI18n({
locale: 'en', // set locale
messages // set locale messages
})
new Vue({
el: '#app',
i18n: i18n
})
</script>
支持的语言
iView 目前已支持以下语言:
- 简体中文(zh-CN)
- 繁体中文(zh-TW)
- 英文(en-US)
- 土耳其语(tr-TR)
- 西班牙语(es-ES)
- 日语(ja-JP)
- 俄语(ru-RU)
- 法语(fr-FR)
- 德语(de-DE)
- 巴西葡萄牙语(pt-BR)
- 葡萄牙语(pt-PT)
- 韩语(ko-KR)
- 越南语(vi-VN)
- 瑞典语(sv-SE)
- 印尼语(id-ID)
- 乌克兰语(uk-UA)
- 意大利语(it-IT)
- 泰语(th-TH)
- 印地语(hi-IN)
- 波斯语(fa-IR)
- 罗马尼亚语(ro-RO)
- 希腊语(el-GR)
- 荷兰语(nl-NL)
- 捷克语(cs-CZ)
- 蒙古语(mn-MN)
- 传统蒙古语(mn-TR)
- 芬兰语(fi-FI)
- 阿拉伯语(ar-SA)
- 阿拉伯语-埃及(ar-EG)
- 丹麦语(da-DK)
- 波兰语(pl-PL)
欢迎贡献代码,以支持更多语言。只需在这里添加一个语言配置文件即可。