基于 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操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
js实现开启密码大写提示
Dec 21 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
Node.js的特点详解
Feb 03 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
angular之ng-template模板加载
Nov 09 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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+javascript模拟Matrix画面
2006/10/09 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php目录操作实例代码
2014/02/21 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
js电话号码验证方法
2015/09/28 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python下singleton模式的实现方法
2014/07/16 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python模拟斗地主发牌
2020/04/22 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
社团文化节策划书
2014/02/01 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书