0
点赞
收藏
分享

微信扫一扫

Electron 集成 Vue —— electron-vue


 

目录

​​1. 全局安装vue的脚手架​​

​​2. 下载electron-vue的项目模板​​

​​3. 指定依赖下载源​​

​​4. 下载项目依赖​​

​​5. 修改配置文件​​

​​6. 升级 electron 的版本​​

​​7. 启动项目​​

1. 全局安装vue的脚手架

命令行中运行(若没有安装yarn,请自行安装yarn)

yarn global add @vue/cli-init

2. 下载electron-vue的项目模板

electron-vue-start为项目名,可自定义为任意名称

vue init simulatedgreg/electron-vue electron-vue-start

按提示下载(若使用默认值则按回车键,选用 vue plugins时,选择 vue-electron,其他选择是否时可以都选no)

Electron 集成 Vue —— electron-vue_回车键

3. 指定依赖下载源

在 electron-vue-start 文件夹中新建文件 .yarnrc,内容如下

registry "https://registry.npm.taobao.org"

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

4. 下载项目依赖

yarn

5. 修改配置文件

在 .electron-vue\webpack.renderer.config.js  和 .electron-vue\webpack.web.config.js 的 plugins 中,新增以下代码(两个文件都要改!)

templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},

 具体位置如下图:

Electron 集成 Vue —— electron-vue_命令行_02

6. 升级 electron 的版本

使用electron-vue构建的项目中,electron版本为v2.0.4,目前electron官方已经更新到v11,官网文档有些已经不适用,因此手动更新此项目中electron。

命令行中执行

yarn upgrade-interactive --latest

会出现当前依赖中,可以升级的依赖包

按键盘上下键移动箭头,按空格键选中要升级的依赖(下图中的 ​​electron​​​、​​electron-builder​​​ 、​​electron-debug​​​、​​electron-devtools-installer​​)

全部选完后,按enter回车键下载最新的依赖包

Electron 集成 Vue —— electron-vue_回车键_03

升级完 electron 后,还需修改主程序中的配置,在 src\main\index.js 中添加

webPreferences: {
nodeIntegration: true, //在网页中集成Node
enableRemoteModule: true // 打开remote模块
}

具体位置如下图:

Electron 集成 Vue —— electron-vue_回车键_04

 

7. 启动项目

yarn dev

若项目启动成功,则会自动弹出下图

Electron 集成 Vue —— electron-vue_回车键_05

 

举报

相关推荐

0 条评论