基于 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 相关文章推荐
lib.utf.js
Aug 21 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
详解Angular2响应式表单
Jun 14 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
文本加密解密
2006/06/23 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python的re模块正则表达式操作
2016/05/25 Python
python与C互相调用的方法详解
2017/07/14 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
上海方立数码笔试题
2013/10/18 面试题
采购主管的岗位职责
2013/12/17 职场文书
电钳专业个人求职信
2014/01/04 职场文书
干部培训自我鉴定
2014/01/22 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
中秋晚会致辞
2015/07/31 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
Python实现仓库管理系统
2022/05/30 Python