基于 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 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
vue自定义指令directive实例详解
Jan 17 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
浅谈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字符串 ==比较运算符的副作用
2009/10/21 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
javascript demo 基本技巧
2009/12/18 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
python静态方法实例
2015/01/14 Python
Python中几个比较常见的名词解释
2015/07/04 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python实现简单多线程任务队列
2016/02/27 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
django admin组件使用方法详解
2019/07/19 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
python基础之爬虫入门
2021/05/10 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript