# 国际化

HUI 的所有组件文案默认使用的是中文，通过设置可以使用其它语言，以英文为例，在 main.js 中：

# 在 Webpack 中使用

完整引入h_ui

import Vue from 'vue';
import hui from 'h_ui';
import locale from 'h_ui/dist/locale/en-US';

Vue.use(hui, { locale });

按需引入h_ui

// 按需引入 h_ui
import Vue from 'vue';
import { Input,Select } from 'h_ui';
import locale from 'h_ui/src/locale'
import lang from 'h_ui/dist/locale/en-US';

// 设置语言
locale.use(lang)

Vue.component('Input', Input);
Vue.component('hSelect',Select)
Vue.component('hOption',Select.Option)
Vue.component('hOptionGroup',Select.OptionGroup)

# 兼容 `vue-i18n`

HUI 兼容 vue-i18n (opens new window)，搭配使用能更方便地实现多语言切换。

兼容vue-i18n@6.x+

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import hui from 'h_ui';
import zhLocale from 'h_ui/dist/locale/zh-CN';
import enLocale from 'h_ui/dist/locale/en-US';

Vue.use(VueI18n);
Vue.use(h_ui);
Vue.locale = () => {};

const messages = {
    en: Object.assign({ message: 'hello' }, en),
    zh: Object.assign({ message: '你好' }, zh)
};

// 创建VueI18n选项实例
const i18n = new VueI18n({
    locale: 'en',  //设置locale
    messages  // 设置 locale messages
});

new Vue({ i18n }).$mount('#app');

兼容vue-i18n@5.x

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import hui from 'h_ui';
import zhLocale from 'h_ui/dist/locale/zh-CN';
import enLocale from 'h_ui/dist/locale/en-US';

Vue.use(VueI18n);
Vue.use(h_ui);

Vue.config.lang = 'en-US';
Vue.locale('en-US', en);
Vue.locale('zh-CN', zh);

TIP

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

# 通过 CDN 使用

<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="h_ui/dist/h_ui.min.css">
<script src="h_ui/dist/h_ui.min.js"></script>
<script src="h_ui/dist/locale/en-US.js"></script>

<script>
    hui.lang('en-US');
</script>

结合 vue-i18n 使用

<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="h_ui/dist/h_ui.min.css">
<script src="h_ui/dist/h_ui.min.js"></script>
<script src="h_ui/dist/locale/en-US.js"></script>
<script src="h_ui/dist/locale/zh-US.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>

# 支持的语言

HUI 目前已支持以下语言：

简体中文（ zh-CN ）
繁体中文（ zh-TW ）
英文（ en-US ）