npm package: @g-tech/gtech-ui
Description: Component Library By GTech
Author: fefei.ji | jiabo.zhang
Latest version: 0.0.17

# GTech-UI


## 开始使用
### 引入
````javascript
import Vue from 'vue';
// UI
import GTechUI from "@g-tech/gtech-ui"
// 样式
import "@g-tech/gtech-ui/dist/theme-chalk/index.css"
import App from './App.vue';

Vue.use(GTechUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
````

### 多语言

#### 默认使用中文
````javascript
Vue.use(GTechUI)
````



#### 更换默认语言

> 目前仅支持 en | zh-TW | zh-CN

````javascript
import enLocale from "@g-tech/gtech-ui/dist/locale/en";

// 这里以默认使用英文为例
Vue.use(GTechUI，{
		locale: enLocale  
})
````



#### 使用vue-i18n 

> 仅支持使用vue-i18n，且版本 > 6.x
````javascript
// entry file
import Vue from 'vue'
import App from './App.vue'
// 使用vue-i18n
import VueI18n from 'vue-i18n';
// UI
import GTechUI from "@g-tech/gtech-ui"
// 引入语言包
import enLocale from "@g-tech/gtech-ui/dist/locale/en";
import zhTWLocale from "@g-tech/gtech-ui/dist/locale/zh-TW";
import zhCNLocale from "@g-tech/gtech-ui/dist/locale/zh-CN";
// sheet
import "@g-tech/gtech-ui/dist/theme-chalk/index.css"

Vue.config.productionTip = false

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: localStorage.language || 'zh-CN',
  messages: {
    'zh-CN': {
      ...zhCNLocale,
    },
    en: {
      ...enLocale,
    },
    'zh-TW': {
      ...zhTWLocale,
    },
  },
});

Vue.use(GTechUI, {
  i18n: (key, value) => i18n.t(key, value),
});

new Vue({
  render: h => h(App),
  i18n
}).$mount('#app')

````

当需要切换到其他语言时候

````javascript
// other file
localStorage.setItem('language', lang)
window.location.reload()
````

这里将**多语言的使用类型**简单的放到了**localStorage**中，方便代码的演示。最佳实践是将`i18n`实例放到`vuex`状态管理中。当需要切换语言时候，提交`mutation`以达到页面不刷新的情况下实现语言切换

````javascript
// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from '../src/locale/lang/en';
import zhTWLocale from '../src/locale/lang/zh-TW';
import zhCNLocale from '../src/locale/lang/zh-CN';

Vue.use(VueI18n);

// 这里可以将项目的 messages 和 GTechUI的locale合并
export default new VueI18n({
  locale: localStorage.lang || 'zh-CN',
  messages: {
    'zh-CN': {
      root: {
        home: {
          back_to_home: '返回首页',
          switch_lang: '切换语言',
        },
      },
      ...zhCNLocale,
    },
    en: {
      root: {
        home: {
          back_to_home: 'Go back home',
          switch_lang: 'Switch Language',
        },
      },
      ...enLocale,
    },
    'zh-TW': {
      root: {
        home: {
          back_to_home: '返回主页',
          switch_lang: '切換語言',
        },
      },
      ...zhTWLocale,
    },
  },
});
````



````javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import i18n from './i18n';

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
 		i18n,
 },
 mutations: {
 		resetLocale(payload, value) {
 			payload.i18n.locale = value;
 		},
});
````



````javascript
// 在需要切换语言的地方
{
  methods：{
    switchLanguage(){
      this.$store.commit('resetLocale', 'en'// other language type)
    }
  }
}

````



## 开发

#### Eslint 
- Use // eslint-disable-next-line to ignore the next line.
- Use /* eslint-disable */ to ignore all warnings in a file.


#### 样式
- 使用BEM命名






## 行动项

- [ ] 文档方案
- [x] 样式表可单独引入
- [ ] 模块化引入方案
- [x] 多语言方案 
- [ ] 新增组件的脚本工具