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
- 先 全局安装 @vue/cli
- 初始化项目
现在项目已经初始化一大半了,使用 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