Electron 基于 Vue Cli 3 按需引入 Element

接着上一篇 【Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 构建桌面应用程序】
现在演示如何按需引入Element。

安装 vue-cli-plugin-element

更多详细请看Element官网：https://element.eleme.cn/#/zh-CN/component/quickstart

vue-cli-plugin-element GitHub地址：https://github.com/ElementUI/vue-cli-plugin-element

vue add element

如图所示：

1.png

安装成功后，会自动地在相关的文件写入配置与示例，无需进行手动配置，进入项目目录可以看到新增了一个文件夹 plugins，按需引入组件会在element.js里写入 。

1.png

启动开发服务器

yarn electron:serve

1.png

如果需要引入更多组件，具体可以参考 Element文档，然后在 element.js 文件写入即可。

注意

如果你在 vue create 项目时不想使用CSS预处理器这项，会出现样式无法引用问题。

1.png

这个问题可以引入一个插件解决：

yarn add babel-preset-env --dev

然后修改 babel.config.js 配置文件

"presets": [
    "@vue/app",
    ['@babel/preset-env'] //添加 babel-preset-env 配置
  ],

1.png

引入与不引入CSS预处理器的配置文件差异对比

img.png

image.png