GTech-UI

开始使用

引入

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)
});

多语言

默认使用中文

Vue.use(GTechUI)

更换默认语言

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

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

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

使用vue-i18n

仅支持使用vue-i18n，且版本 > 6.x

// 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')

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

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

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

// 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,
    },
  },
});

// 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;
 		},
});

// 在需要切换语言的地方
{
  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] 多语言方案
• [ ] 新增组件的脚本工具