基于 Vue 的 Electron 项目搭建过程图文详解
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 项目就初始化完成了。
启动项目后效果图如下：
问题解决 初始化报错
当运行 npm init simulatedgreg/electron-vue demo 命令初始化项目时报错，大致意思说找不到 electron-vue 或者安装 create-electron-vue 等原因导致失败，可以选择重新运行命令多试几次，或者先下载electron-vue源码，然后生成自己的项目模板。下面说后者的步骤。
1.electron-vue 下载
2.cmd 切换到该项目根目录
3.初始化一个自己的项目。初始化完之后可以再命令对应的“目录路径”看到你的项目
vue init 项目路径 项目名
4.完成
启动项目报错
若第一次启动项目报错如下：
大概意思是 提示 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 源码：
配置文件中插件配置代码：
解决方法一（推荐）：
把index.ejs文件中的 <% if (!process.browser) { %> 改成
<% if (!htmlWebpackPlugin.options.process.browser) { %> ，
改完后代码：
index.ejs:
./electron-vue/webpack.render.config.js：
解决方法二：直接删除下图中红框框住部分，没有什么影响：
解决方法三：将node 12.x版本还原到10.16的稳定版即可。
注释：技术推荐Electron 应用技术体系推荐引用他人的electron-vue项目讲解的视频截图，找不到链接了就不写上了。
到此这篇关于基于 Vue 的 Electron 项目搭建的文章就介绍到这了,更多相关基于 Vue 的 Electron 项目搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue项目中跳转到外部链接的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
data属性是Vue实例的数据对象,可以绑定的是对象或者是函数,下面这篇文章主要给大家介绍了关于VUE中data配置项详细解析的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Element UI 上传组件实现文件上传并附带额外参数功能
在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧2023-08-08
这篇文章主要为大家详细介绍了vue+el-table实现合并单元格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue 中 filter 与 computed 的区别与用法解析
这篇文章主要介绍了Vue 中 filter 与 computed 的区别与用法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下2018-05-05
vue element ui validate 主动触发错误提示操作
这篇文章主要介绍了vue element ui validate 主动触发错误提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了 Element基于el-input数字范围输入框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点，有需要的朋友们参考下。2018-11-11
最新评论