基于 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源码，然后生成自己的项目模板。下面说后者的步骤。

electron-vue 下载

cmd 切换到该项目根目录

初始化一个自己的项目。初始化完之后可以再命令对应的“目录路径”看到你的项目

vue init 项目路径 项目名

完成

启动项目报错

若第一次启动项目报错如下：

大概意思是 提示 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 项目搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-cli2.0转3.0之项目搭建的详细步骤

    Vue CLI介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖: 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展. 一个丰富的官方插件集合,集成了前端生态中最好的工具. Vue CLI

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

  • Electron + vue 打包桌面操作流程详解

    提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以 在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好 获取Electron的资源 git clone https://github.com/el

  • Electron-vue脚手架改造vue项目的方法

    1. 什么是Electron Electron可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本. 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 从开发的角度来看, Electron app

  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩

  • requirejs + vue 项目搭建详解

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug,都处理了.今年正美正好升级avalon2.0,加入虚拟dom的时候,不稳定了,就考试寻找其他的mvvm框架. 看了比较流行的一些框架,最后选择了vue.选择他的原因是 文档比较全,而且还有中文的(你懂的),生态圈比较好,有vux, vue-loader, vue-router ,组件化设计的也很好.

  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli, 但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效. 然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验. 1.webpack的核心概念 •Entry:入口,Webpack执行构建的第一步从Entry开始: •Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件.Webpack会从配置的Entry开始递归找出所有依赖的模块. •Chunk:代码块,一个Chunk由多个模块组

  • 基于 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 ├

  • IDEA插件开发之环境搭建过程图文详解

    基于IntelliJ Platform Plugin搭建 环境步骤 File->New->Project 选择IntelliJ Platform Plugin 如果你这里没有SDK环境,则添加一个SDK环境,选择自己的idea的安装的根目录即可. 展示效果 基于Gradle搭建环境步骤 File->New->Project 选择Gradle next 进来以后大概是这样的一个界面,然后gradle会自动build项目,下载相关的依赖.(可能会失败) 遇到的问题一,依赖ideaIC-

  • Android开发环境搭建过程图文详解

    一.工具 IDE:Android Studio4.1+genymotion (Android studio 自带AVD着实有些不好用,这里选择使用genymotion模拟器) JDK:1.8 SDK:7.1 版本管理:Git 二.环境搭建 1.安装jdk 这里使用的是jdk1.8 ,安装并配置环境变量,通用步骤,不一 一介绍了 2.安装Android Studio 安装:android-studio-ide-201.6858069-windows.exe ,默认安装即可配置sdk (可以选择设置

  • Hadoop-3.1.2完全分布式环境搭建过程图文详解（Windows 10）

    一.前言 Hadoop原理架构本人就不在此赘述了,可以自行百度,本文仅介绍Hadoop-3.1.2完全分布式环境搭建(本人使用三个虚拟机搭建). 首先,步骤: ① 准备安装包和工具: hadoop-3.1.2.tar.gz ◦ jdk-8u221-linux-x64.tar.gz(Linux环境下的JDK) ◦ CertOS-7-x86_64-DVD-1810.iso(CentOS镜像) ◦工具:WinSCP(用于上传文件到虚拟机),SecureCRTP ortable(用于操作虚拟机,可复制粘

  • GO语言开发环境搭建过程图文详解

    GO语言开发环境搭建过程图文详解

    一.GO语言开发包 1.什么是GO语言开发包 go 语言开发包其实是对go语言的一种实现,包括相应版本的语法, 编译, 运行, 垃圾回收等, 里面包含着开发 go 语言所需的标准库, 运行时以及其他的一些必要资源 2.GO语言开发包下载地址 Go官方下载地址 : https://golang.org/dl/ Go官方镜像站(上面打不开可使用这个) : https://golang.google.cn/dl/ Go语言中文网下载地址 : https://studygolang.com/dl gop

  • python框架Django实战商城项目之工程搭建过程图文详解

    项目说明 该电商项目类似于京东商城,主要模块有验证.用户.第三方登录.首页广告.商品.购物车.订单.支付以及后台管理系统.项目开发模式采用前后端不分离的模式,为了提高搜索引擎排名,页面整体刷新采用jinja2模板引擎实现,局部刷新采用vue.js实现. 项目运行机制如下: 项目搭建 工程创建 项目使用码云进行源代码版本控制,在码云创建好后直接克隆到本地即可,然后在项目根目录下执行virtualenv venv创建虚拟环境,source venv/bin/activat激活虚拟环境后,安装djan

  • Python3 虚拟开发环境搭建过程(图文详解)

    虚拟环境的搭建 为什么要使用虚拟环境# 1.使不同应用开发环境相互独立 2.环境升级不影响其他应用,也不会影响全局的python环境 3.防止出现包管理混乱及包版本冲突 windows平台# 安装 # 建议使用pip3安装到python3环境下 pip3 install virtualenv pip3 install virtualenvwrapper-win 配置虚拟环境管理器工作目录 # 配置环境变量: # 控制面板 => 系统和安全 => 系统 => 高级系统设置 => 环境

  • 使用Spring Boot搭建Java web项目及开发过程图文详解

    一.Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者.SpringMVC是非常伟大的框架,开源,发展迅速.优秀的设计必然会划分.解耦.所以,spring有很多子项目,比如core.context.

  • 在idea中将创建的java web项目部署到Tomcat中的过程图文详解

    在idea中将创建的java web项目部署到Tomcat中 采用的工具idea 2018.3.6 Tomcat7 1.先创建第一个新项目secondweb(注意勾选JavaEE下的web Application(4.0),窗口下的version对应为4.0,并且保证create web.xml已经被勾选) 2.在创建好的web项目的web/WEB-INF目录下创建两个文件夹:classes和lib.classes用来存放编译后输出的class文件,lib用来存放第三方jar包(下图显示的是创建

  • Docker Consul概述以及集群环境搭建步骤(图文详解)

    Docker Consul概述以及集群环境搭建步骤(图文详解)

    目录 一.Docker consul概述 二.基于 nginx 与 consul 构建自动发现即高可用的 Docker 服务架构 一.Docker consul概述 容器服务更新与发现:先发现再更新,发现的是后端节点上容器的变化(registrator),更新的是nginx配置文件(agent) registrator:是consul安插在docker容器里的眼线,用于监听监控节点上容器的变化(增加或减少,或者宕机),一旦有变化会把这些信息告诉并注册在consul server端(使用回调和协程

随机推荐