electron+vue初始化项目

electron+vue

目前在网上收集到的初始化electron的3个方法

首先对收集到的初始化的3个方法做下目录结构对比

注：另外再增加个使用vue初始化的方法会详细说明

1.初始化

1.1使用electron-quick-start初始化

我们先试用quick-start试试，先从github上clone项目

git clone https://github.com/electron/electron-quick-start

从目录结构看 是很单纯的 两个main.js和renderer.js

从学习的角度可以入手

1.2 使用 electron-forge脚手架创建

yarn create electron-app project-name

距离理想的模板还是有差距的

1.3 还是使用github的模板simulatedgreg/electron-vue

vue init simulatedgreg/electron-vue template-electron

已经很接近理想的模板结构了

1.4 使用vue初始化（详细介绍）

# 全局安装@vue/cli 来搭建项目
npm i -g @vue/cli 
# 初始化项目
vue create vue-electron
# 进入项目后 安装 electron-builder
cd vue-electron
vue add electron-builder
# 安装依赖
npm i
# 运行
npm run electron:serve

1. 先 全局安装 @vue/cli

2. 初始化项目

这就是项目配置了，有自己偏好的小伙伴可以跳过，我这里重新自选下

空格选择，选择完回车

使用2.x的vue

检查代码插件 我个人还是用的Prettier

保存后检查；(当然你要安装好eslint插件才可以)

我们将配置文件放在单独的文件里

接着就可以安装electron-builder依赖

我选择的是当时最新的版本

现在项目已经初始化一大半了，使用 npm run electron:serve命令就可以运行了；使用这种方式初始化的项目配置都熟悉。当然各有所好，接下来开始完成初始化，让项目结构看起来正式些

2. 项目结构清晰化

2.1 目录结构

看过electron文档的了解 其 主要内容分为 主进程(main)和渲染进程(renderer)

Electron 还为开发原生桌面应用程序提供了一些额外的内置模块。 某些模块仅在主进程中可用, 有些仅在渲染进程 (web 页) 中可用, 而有些在这两个进程中都可以使用。

上述引用的就是官方文档的简介

我们可以在项目src下面发现与之前创建vue项目不同的是 多了个background.js ，是的，这个就是主进程文件

我们开始对目录进行重构

在src下创建 main 和 renderer两个文件夹 将 background.js 放到main文件下面 其余的内容放在 renderer下面

将 background.js更名为 main.js

因为修改了默认的配置 所以我们需要创建vue.config.js 去设置路径问题

我们需要指定两个路径 一个是vue项目默认的main.js文件路径也即入口文件路径(默认是src/main.js)

另外一个是指定electron-builder插件的主进程文件路径(默认是src/background.js)

在vue.config.js中配置（为了方便项目使用 增加了别名）

const path require("path");
function resolve(dir) {
	return path.join(__dirname, dir);
}
module.exports = {
  configureWebpack: {
    // 入口文件路径
    entry: "./src/renderer/main.js",
    resolve: {
    	extensions: [".js", ".vue"],
    	alias: {
    	"@"： resolve("src/renderer"),
    	},
    },
  },
  pluginOptions: {
    electronBuilder: {
      // 输出文件路径
      outputDir: "dist/electron",
      // 主进程文件路径
      mainProcessFile: "src/main/main.js",
    },
  },
};

修改App.vue中的引用路径

启动项目npm run electron:serve