基于 Vue 的 Electron 项目搭建过程图文详解


Posted in Javascript onJuly 22, 2020

Electron 应用技术体系推荐

基于 Vue 的 Electron 项目搭建过程图文详解

目录结构

demo(项目名称)
├─ .electron-vue(webpack配置文件)
│ └─ build.js(生产环境构建代码) 
| └─ dev-client.js(热加载相关)
│ └─ dev-runner.js(开发环境启动入口)
│ └─ webpack.main.config.js(主进程配置文件)
│ └─ webpack.renderer.config.js(渲染进程配置文件)
│ └─ webpack.web.config.js
├─ build(是文件打包使用的)
│ └─ win-unpacked/
│ │ ├─ locales(地区语言资源包)
│ │ ├─ resources(地区语言资源包)
│ │ ├─ *.dll(动态链接库)
├─ dist(打包后的文件资源)
│ ├─ electron
| ├─ web
├─ node_modules/(依赖目录)
├─ src(源码)
│ ├─ main(主进程)
│ │ └─ index.dev.js(捆绑index.js)
│ │ └─ index.js(主进程的进程JS)
│ ├─ renderer(渲染进程)
│ │ ├─ assets/(放置静态资源,如图片,视频,静态配置)
│ │ ├─ components/(放置vue页面)
│ │ ├─ router/(放置页面路由)
│ │ ├─ store/(放置公共模块,如vuex)
│ │ ├─ App.vue
│ │ └─ main.js
│ └─ index.ejs
├─ static/(静态文件)
├─ test
│ ├─ e2e
│ │ ├─ specs/
│ │ ├─ index.js
│ │ └─ utils.js
│ ├─ unit
│ │ ├─ specs/
│ │ ├─ index.js
│ │ └─ karma.config.js
│ └─ .eslintrc#全局配置文件
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md

环境搭建

默认有 node 环境.

先安装 electron vue vue-cli ,因为 electron-vue 中有内置 webpack ,无需再装一个独立的 webpack

npm install -g electron
npm install -g vue
npm install -g vue-cli

创建一个空文件夹,DOS命令窗口进入该文件夹位置,初始化一个 electron-vue 项目。

//使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue demo

注:demo 是项目名称

安装依赖

npm install

启动项目(开发环境)

npm run dev

完成1~3步骤,一个基于 vue 的 electron 项目就初始化完成了。

启动项目后效果图如下:

基于 Vue 的 Electron 项目搭建过程图文详解 

问题解决 初始化报错

当运行 npm init simulatedgreg/electron-vue demo 命令初始化项目时报错,大致意思说找不到 electron-vue 或者安装 create-electron-vue 等原因导致失败,可以选择重新运行命令多试几次,或者先下载electron-vue源码,然后生成自己的项目模板。下面说后者的步骤。

1.electron-vue 下载

2.cmd 切换到该项目根目录

3.初始化一个自己的项目。初始化完之后可以再命令对应的“目录路径”看到你的项目

vue init 项目路径 项目名

4.完成

启动项目报错

若第一次启动项目报错如下:

基于 Vue 的 Electron 项目搭建过程图文详解

大概意思是 提示 src/index.ejs 中没有定义 process 。

原因分析:大概是 html-webpack-plugin 插件处理该ejs文件时,没有读到该插件对应有 process 属性,应该是去配置文件 "./electron-vue/webpack.render.config.js" 文件中读取 HtmlWebpackPlugin 插件的 process 属性,而 "./electron-vue/webpack.render.config.js" 并未定义该属性,固报此错。

index.ejs 源码:

基于 Vue 的 Electron 项目搭建过程图文详解

配置文件中插件配置代码:

基于 Vue 的 Electron 项目搭建过程图文详解

解决方法一(推荐):

把index.ejs文件中的 <% if (!process.browser) { %> 改成

<% if (!htmlWebpackPlugin.options.process.browser) { %> ,

改完后代码:

index.ejs:

基于 Vue 的 Electron 项目搭建过程图文详解

./electron-vue/webpack.render.config.js:

基于 Vue 的 Electron 项目搭建过程图文详解

解决方法二:直接删除下图中红框框住部分,没有什么影响:

基于 Vue 的 Electron 项目搭建过程图文详解

解决方法三:将node 12.x版本还原到10.16的稳定版即可。

注释:技术推荐Electron 应用技术体系推荐引用他人的electron-vue项目讲解的视频截图,找不到链接了就不写上了。

到此这篇关于基于 Vue 的 Electron 项目搭建的文章就介绍到这了,更多相关基于 Vue 的 Electron 项目搭建内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 #Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 #Javascript
js实现带积分弹球小游戏
Jul 21 #Javascript
在vue中created、mounted等方法使用小结
Jul 21 #Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 #Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 #Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 #Javascript
You might like
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
javascript 实现map集合
2015/04/03 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python 产生token及token验证的方法
2018/12/26 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
django下创建多个app并设置urls方法
2020/08/02 Python
利用python爬取有道词典的方法
2020/12/08 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
打架检讨书100字
2014/01/08 职场文书
初三学生评语大全
2014/04/24 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
总经理检讨书范文
2015/02/16 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android