• 国际化
    • 在 Webpack 中使用
    • 通过 CDN 使用
    • 支持的语言

    国际化

    View UI(iView) 的所有组件文案默认使用的是中文,通过设置可以使用其它语言。

    在 Webpack 中使用

    完整引入 iView

    1. import Vue from 'vue';
    2. import ViewUI from 'view-design';
    3. import locale from 'view-design/dist/locale/en-US';
    4. Vue.use(ViewUI, { locale });

    按需引入 iView

    1. import Vue from 'vue';
    2. // importing ViewUI on demand
    3. import { locale, Page } from 'view-design';
    4. import lang from 'view-design/dist/locale/en-US';
    5. // configure language
    6. locale(lang);
    7. // import components
    8. Vue.component('Page', Page);

    兼容 vue-i18n@6.x+

    1. import Vue from 'vue';
    2. import ViewUI from 'view-design';
    3. import VueI18n from 'vue-i18n';
    4. import en from 'view-design/dist/locale/en-US';
    5. import zh from 'view-design/dist/locale/zh-CN';
    6. Vue.use(VueI18n);
    7. Vue.use(ViewUI);
    8. Vue.locale = () => {};
    9. const messages = {
    10. en: Object.assign({ message: 'hello' }, en),
    11. zh: Object.assign({ message: '你好' }, zh)
    12. };
    13. // Create VueI18n instance with options
    14. const i18n = new VueI18n({
    15. locale: 'en', // set locale
    16. messages // set locale messages
    17. });
    18. new Vue({ i18n }).$mount('#app');

    兼容 vue-i18n@5.x

    1. import Vue from 'vue';
    2. import ViewUI from 'view-design';
    3. import VueI18n from 'vue-i18n';
    4. import en from 'view-design/dist/locale/en-US';
    5. import zh from 'view-design/dist/locale/zh-CN';
    6. Vue.use(VueI18n);
    7. Vue.use(ViewUI);
    8. Vue.config.lang = 'en-US';
    9. Vue.locale('en-US', en);
    10. Vue.locale('zh-CN', zh);

    使用 vue-i18n 时,也可以按需引入 iView 组件,用法与上面的示例类似。

    通过 CDN 使用

    1. <script src="//unpkg.com/vue"></script>
    2. <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
    3. <script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
    4. <script>
    5. iview.lang('en-US');
    6. </script>

    结合 vue-i18n 使用

    1. <script src="//unpkg.com/vue"></script>
    2. <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
    3. <script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
    4. <script src="//unpkg.com/view-design/dist/locale/zh-CN.js"></script>
    5. <script>
    6. // you need to add Polyfill if your browser doesn't support ES2015
    7. Vue.locale = () => {};
    8. const messages = {
    9. en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
    10. zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    11. };
    12. const i18n = new VueI18n({
    13. locale: 'en', // set locale
    14. messages // set locale messages
    15. })
    16. new Vue({
    17. el: '#app',
    18. i18n: i18n
    19. })
    20. </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)

    欢迎贡献代码,以支持更多语言。只需在这里添加一个语言配置文件即可。