博客
关于我
electron+vue框架搭建桌面应用
阅读量:536 次
发布时间:2019-03-08

本文共 2141 字,大约阅读时间需要 7 分钟。

electron+vue相关文档:

electron+vue官方文档:

一、electron+vue是什么

electron+vue 是一个结合 vue-cli 与 electron 的项目,主要避免了使用 vue 手动建立起 electron 应用程序,该程序包含了 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等的脚手架。

二、electron+vue搭建

在构建之前,请确保自己环境是否已配置好,若没有配置,请自行配置相关环境。

可以使用yarn安装或npm安装electron+vue。yarn安装会比npm快。

若没安装yarn,请安装yarn(yarn):

window小伙伴在安装electron+vue时会报错,所以,在安装之前,请先安装相关windows-build-tools。

这里注意安装windows-build-tools时,一定要以管理身份打开cmd命令提示符,然后输入以下yarn global add windows-build-tools或npm install --global windows-build-tools

这样才能安装成功。若不以管理身份打开cmd命令提示符安装会出现如下图错误:

image.png

1.windows-build-tools可以使用以下两种npm或yarn方式安装

npm的安装命令

npm install --global windows-build-tools

yarn安装命令

yarn global add windows-build-tools
yarn安装结果如下:
image.png

2.建立一个名为my-project的electron+vue项目

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

image.png

3.安装依赖并运行你的程序

进入改文件目录
cd my-project
安装相关依赖
yarn # 或者 npm install
运行项目
yarn run dev # 或者 npm run dev

image.png

输入yarn run dev运行

image.png

4.界面图:

image.png

代码文件目录官网介绍:

image.png

将项目打包,这个打包过程可能需要安装其他东西,所以等待时间会很长,我就打包了差不多近1小时

yarn run dev

image.png

electron-vue报错Webpack ReferenceError:process is not defined

在使用electron-vue时,运行npm run dev出现如下错误

在这里插入图片描述

解决方式:

找到.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的HtmlWebpackPlugin,添加templateParameters,修改后如下:

plugins: [    new VueLoaderPlugin(),    new MiniCssExtractPlugin({filename: 'styles.css'}),    new HtmlWebpackPlugin({      filename: 'index.html',      template: path.resolve(__dirname, '../src/index.ejs'),	  templateParameters(compilation, assets, options) {        return {          compilation: compilation,          webpack: compilation.getStats().toJson(),          webpackConfig: compilation.options,          htmlWebpackPlugin: {            files: assets,            options: options          },          process,        };      },      minify: {        collapseWhitespace: true,        removeAttributeQuotes: true,        removeComments: true      },      nodeModules: process.env.NODE_ENV !== 'production'        ? path.resolve(__dirname, '../node_modules')        : false    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NoEmitOnErrorsPlugin()  ],

参考:

转载地址:http://xwviz.baihongyu.com/

你可能感兴趣的文章
MySQL 常见的 9 种优化方法
查看>>
MySQL 常见的开放性问题
查看>>
Mysql 常见错误
查看>>
mysql 常见问题
查看>>
MYSQL 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>