基于 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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 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计数器的实现代码
2013/06/08 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php cli换行示例
2014/04/22 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
PyMongo安装使用笔记
2015/04/27 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python创建xml文件示例
2017/03/22 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
django 类视图的使用方法详解
2019/07/24 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
行政经理岗位职责
2013/11/09 职场文书
买房子个人收入证明
2014/01/16 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
汽修专业自荐信
2014/07/07 职场文书
党员自我剖析材料
2014/08/31 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
导游词之神仙居景区
2019/11/15 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers