基于electron+vue+element构建项目模板之【改造项目篇】

1、概述

开发平台OS：windows

开发平台IDE：vs code

上一篇中已完成了electron-vue项目的创建，本篇章中则介绍在此项目基础上进行取消devtools的安装、项目结构的改造、环境变量的配置以及elementui的集成等。

 

2、取消devtools的安装

上一篇中在启动electron-vue项目时，会等待一段时间后才正常启动应用，此时查看控制台日志能看出来是它请求安装devtools失败后的5次尝试，现在我们取消deltools的安装以换来启动的第一次提速。

 

打开src/background.js，注释如下代码后保存，在终端运行命令：npm run electron:serve

 

3、项目结构的改造

当前的electron-vue项目结构是web应用普遍采用的，现在基于electron多进程模型对它进行结构上的改造，目的是分门别类的存放，便于区分和理解。

3.1、结构改造

1. 在src文件夹下新建main、renderer俩文件夹，main：主进程文件夹-存放主进程和主文件、renderer：渲染器文件夹-存放web相关文件
2. 将src/background.js文件移至src/main目录下，然后将文件名重命名为index.js
3. 将src下的其他文件和文件夹(不是新建的俩文件夹的其他文件和文件夹)移至src/renderer目录下

现在改造后的目录如下：

 

3.2、vue.config.js配置

经过上一节针对结构的改造后，此时可以尝试启动应用，引入眼帘的是启动失败的错误信息，这是因为调整了结构后引起的入口文件路径找不到所致，在根目录下添加vue.config.js文件，文件内容如下所示：

 

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: (config) => {
    // 由于我们修改了渲染进程目录，修改'@'的alias
    config.resolve.alias.set("@", resolve("src/renderer"));
  },
  pages: {
    //在此可以添加多页应用
    index: {
      entry: "src/renderer/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "electron-vue",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
  },
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: "src/main/index.js", // 主进程入口文件
      mainProcessWatch: ["src/main"], // 检测主进程文件在更改时将重新编译主进程并重新启动
    },
  },
};

保存完文件内容后，在终端输入命令：npm run electron:serve，回车后一眨眼的功夫应用成功启动了。

4、环境变量的配置

在实际情况中项目的生命周期往往包含了开发、测试、预生产、生产等阶段，不同的阶段有自己对应的环境配置，而阶段环境一般搭建起来后极少会变动，那能不能做到不同的阶段来配置对应的环境变量呢？然后每次打包的时候可以根据指定指令生成对应阶段的包文件！答案是可以的，vue-cli帮我们做了这一切。

4.1、新建环境变量配置文件

在根目录下新建以下文件：

.env                 # 所有环境配置

.env.dev          # 打包开发环境配置

.env.test          # 打包测试环境配置

.ent.prod         # 打包生产环境配置

敲重点：指定环境配置的优先级高于所有环境配置，环境配置文件里的自定义变量名称一定要以 VUE_APP_ 开头，非常重要！！！

 

######### .env #########

# 所有环境配置

# 应用名称
VUE_APP_NAME = '神秘工具'


######### .env.dev #########

# 打包的环境配置
NODE_ENV = 'production'

# 应用运行-开发环境
VUE_APP_ENV = 'development'

# 应用版本
VUE_APP_VERSION = 'V1.0.1'


######### .env.test #########

# 打包的环境配置
NODE_ENV = 'production'

# 应用运行-测试环境
VUE_APP_ENV = 'test'

# 应用版本
VUE_APP_VERSION = 'V1.0.0'


######### .env.prod #########

# 打包的环境配置
NODE_ENV = 'production'

# 应用运行-生产环境
VUE_APP_ENV = 'production'

# 应用版本
VUE_APP_VERSION = 'V1.0.0'

4.2、更改打包命令

新建完配置文件后，需要更改打包命令，以达到预期效果。打开package.json文件，修改 scripts 节点内容，以win32为目标平台为例具体如下所示：

 

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32",
    "build:test:win32": "vue-cli-service electron:build --mode test --win --ia32",
    "build:prod:win32": "vue-cli-service electron:build --mode prod --win --ia32",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  }

至此完成上述配置后，快来试试效果吧，在终端输入不同环境的命令如：npm run build:dev:win32

 

5、element-ui 集成

颜值高有着天然的优势，同样应用也不例外，一款好的ui能给用户留下深刻又正面的印象，element是一款成熟的应用广泛的基于vue的桌面组件库，要集成它需要进行如下操作

1、安装element-ui库：终端输入命令：npm install element-ui

 

2、导入并使用element-ui库、导入样式：在src/renderer/main.js 添加：import ElementUI from "element-ui";   import "element-ui/lib/theme-chalk/index.css";  Vue.use(ElementUI);

 

 

3、使用element-ui组件：在src/renderer/App.vue 使用element-ui组件来构建页面，具体如下所示：

<template>
  <div id="app">
    <el-container>
      <el-header>我是头部</el-header>
      <el-main>我是主体</el-main>
      <el-footer>我是脚部</el-footer>
    </el-container>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.el-header {
  background: red;
}
.el-main {
  background: yellow;
}
.el-footer {
  background: green;
}
</style>

下一篇中将介绍在此项目基础上进行自定义标题栏和右键菜单项等功能

感谢您阅读本文，如果本文给了您帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货~

源码地址：https://gitee.com/libaitianya/electron-vue-element-template