在electron-vue项目引用element UI

左手的ㄟ右手 2024-04-17 13:56 53阅读 0赞

> 编写时间：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组件][element]**

# 5.补充 #

## 5.1 element某些组件渲染不出来 ##

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

比如常见的一个element table表格组件和button，但是在electron端运行table组件并没有渲染出, electron-vue文档上指出 详见描述问题链接：[simulatedgreg.gitbooks.io/electron-vu…][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] [使用 vue-i18n 切换中英文][vue-i18n 1]

*  （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库][ElementUi]

转载于:https://juejin.im/post/5d4b95eaf265da03b8104a4c

[element]: https://link.juejin.im?target=https%3A%2F%2Felement.eleme.cn%2F2.0%2F%23%2Fzh-CN%2Fcomponent%2Finstallation
[simulatedgreg.gitbooks.io_electron-vu]: https://link.juejin.im?target=https%3A%2F%2Fsimulatedgreg.gitbooks.io%2Felectron-vue%2Fcn%2Fwebpack-configurations.html
[vue-i18n]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fweixin_34380948%2Farticle%2Fdetails%2F93095305
[vue-i18n 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2Frogerwu%2Fp%2F7744476.html
[ElementUi]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fweixin_34247032%2Farticle%2Fdetails%2F88255404