编写时间：2019-08-08
更新时间：2019-08-08 18:23

作者：鬼小妞

备注：本文编写了与在vue项目引用element UI相关的一些知识，仅供参考，描述不当的地方，请评论指正

状态：已完成、待补充2019-08-08

[TOC]

快速抵达：

安装 Element-UI 模块;
element某些组件渲染不出来
Element-UI 在配合vue-i18插件实现多语言切换的问题解决

前提

项目是使用以下命令一键式生成的electron-vue 的项目

vue init simulatedgreg/electron-vue my-project

使用element-ui前需安装修改的配置

1. 安装 loader 模块：

请检查项目是否已安装style-loader、 css-loader、 file-loader请跳过此步骤，（默认情况下初始化项目是自动安装过的），如果没有，请按照以下步骤来安装

npm install style-loader css-loader file-loader --sava-dev

必须要安装style-loader、 css-loader、 file-loader
目的：为了正常显示页面UI，webpack需要配置才可以正常展示

2. 安装 Element-UI 模块

npm install element-ui --save

3. 在渲染进程入口文件引入ElementUI

在src\renderer\main.js导入ElementUI

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

4.使用

具体请看官网：element组件

5.补充

5.1 element某些组件渲染不出来

在electron-vue中，如果在web端能够正常渲染出来，但是electron端却是没有渲染显示出来

比如常见的一个element table表格组件和button，但是在electron端运行table组件并没有渲染出, electron-vue文档上指出详见描述问题链接：simulatedgreg.gitbooks.io/electron-vu…

解决方案

在webpack打包渲染进程配置.electron-vue\webpack.renderer.config.js

默认是只添加vue到白名单，现在把'element-ui'也加上白名单


let whiteListedModules = ['vue','element-ui']

如下：

之后重新启动项目就可以了

5.2 Element-UI 在配合vue-i18插件多语言切换一起使用时，会有2个问题：

详见：使用 vue-i18n 切换中英文使用 vue-i18n 切换中英文

（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存
（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字

（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存

关于第一个问题，可以在初始化VueI18n实例时，通过 localStorage 来为 locale 对象赋值


const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',
  messages 
})

在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale 的属性值

<div class="lang">
  <el-dropdown>
    <i class="iconfont icon-language4"></i>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="toggleLang('zh')" :disabled="$i18n.locale == 'zh'">中文</el-dropdown-item>
      <el-dropdown-item @click.native="toggleLang('en')" :disabled="$i18n.locale == 'en'">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>


toggleLang(lang) {
      if(lang == 'zh'){
        localStorage.setItem('locale', 'zh')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: '切换为中文！',
          type: 'success'
        })
      } else if (lang == 'en') {
        localStorage.setItem('locale', 'en')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: 'Switch to English!',
          type: 'success'
      })
}

（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字

关于第二个问题，更改Element 组件内部语言，这里还涉及到手动处理 vue-i18n@6.x 兼容性问题。官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下

在i18n入口文件编辑 src\renderer\modules\Lang\index.js


import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import zh from './langs/zh'
import en from './langs/en'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh'


Vue.use(VueI18n)

const messages = {
  en: Object.assign(en, enLocale),
  zh: Object.assign(zh, zhLocale)
}

console.log(messages.zh)

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',
  messages 
})


locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

在项目渲染进程入口文件src\renderer\main.js

按照如上把国际化文件都整合到一起，避免main.js 中大段引入相关代码。main.js 中与 i18n 相关的就只剩两行代码


import i18n from './i18n/i18n'           // 1行

window.app = new Vue({
  el: '#app',
  router,
  store,
  i18n,                                 // 2行
  components: { App },
  template: '<App/>'
})

参考

使用ElementUi库

在electron-vue项目引用element UI

前提