搭建 electron-vue 项目

前言

electron-vue 是一个基于 vue 来构造 electron 应用程序的样板代码。electron-vue 充分利用vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是electron-builder，以及一些最常用的插件，为开发 electron 项目提供了极大的便利，详情可以参考官网 Electron-Vue

一、起步

1、安装 vue-cli 脚手架

npm install -g vue-cli

2、创建项目

vue init simulatedgreg/electron-vue projectName

projectName 可以根据自己需求进行命名更改，这个是你的项目名，也是文件夹的名称

3、进入项目并运行项目

cd projectName
npm run dev

通过以上命令已经可以正确的运行项目了，但是因为我在项目中删除了 node_modules 之后再 npm i 的时候报错 node-sass 无法安装，所以这里推荐手动的删除掉 package.json 中的 node-sass 并添加 sass 依赖

"sass": "^1.23.7"

添加完以后可以删掉 node_modules 再运行 npm i 就不会报错了，同时项目中可以正常的使用 sass

二、拓展

1、升级 Electron

electron-vue 为了项目稳定，electron 的版本固定在了 2.0.4，但是 electron 是一直在更新的，官网的 API
也一直在拓展，如果想使用最新的官网API 还需要对 electron-vue 中的 electron 进行升级。

我个人建议升级到 12.0.11，升级到太高版本容易出现其他问题。

1.1、升级前准备

升级前需要先卸载当前的 electron，需要执行以下命令

npm uninstall electron

1.2、安装新的 Electron

npm install electron@12.0.11

1.3、报错解决

升级成功之后通过 npm run dev 运行项目的时候会遇到以下报错，这个时候需要在 BrowserWindow 的配置中添加 nodeIntegration 属性来解决问题

mainWindow = new BrowserWindow({height: 720,width: 1280,minHeight: 600,minWidth: 1000,frame: false,  // 无边框webPreferences: {nodeIntegration: true,  // 在网页中集成NodecontextIsolation: false,enableRemoteModule: true,nativeWindowOpen: true}})

这个时候再运行项目就不会有报错了

2、__webpack_hmr 404 报错问题

解决方案

找到.electron-vue/dev-runner.js 文件，注释掉 hot 并解除 app.use(hotMiddleware) 的注释，改完以后再运行项目就不会有报错了

搭建 electron-vue 项目相关推荐

从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能原因在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...
搭建electron+vue工程以及遇到的问题解决
1. 安装node 细节不多说, 下载安装包安装就行了 2. 配合npm镜像地址 npm config set registry http://registry.npm.taobao.org/ 检查设 ...
web前端环境搭建以及vue-cli搭建启动vue项目
三个工具:(根据个人喜好自由选择) 1.一个编辑器:vs code/notepad++/ hBuilder 2.一个量图工具:ps 3.一个git工具:先下载git,再下载tortoisegit 可以 ...
抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
关闭eslint检验；vue-cli3搭建的vue项目关闭eslint；脚手架3关闭eslint；
本文是解决关闭eslint的问题:如果想要开启eslint和配置,可以查看这篇开启eslint检验: 我们使用vue-cli3脚手架搭建vue项目时候,会默认选中eslint风格代码:如果想要关闭es ...