1.安装node

2.安装vue/cli    
$ npm install @vue/cli -g 3.创建应用并进入应用目录
$ vue create my-app
$ cd my-app
4.添加electron-builder
$ vue add electron-builder
会让你选择electron版本,默认即可

然后是漫长且龟速的下载,耐心等待

有极高的几率安装失败,基本都是网络问题(你懂的)

所以,我们先设置electron的源地址,修改为淘宝镜像

$ npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

然后再一次

$ vue add electron-builder

瞬间就成功了!!! 

5.添加vuetify

$ vue add vuetify

6.运行

$ npm run electron:serve

7.打包(windows X64)

在根目录创建vue.config.js文件,并编辑其内容:

生成安装包:

$ npm run electron:build

由于网络问题,极大可能在很多步发生下载错误403:

若是electron出错,手动复制出错地址用下载工具下载后,拷贝到如下目录:

C:\Users\用户名\AppData\Local\electron\Cache\

若是 app-builder或winCodeSign或nsis或nsis-resources 报错,同样复制链接手动下载后,拷贝至对应目录:

目录结构如下:

再次Build:

$ cnpm run electron:build

成功:

在项目的dist目录下,可看到生成的安装包:

双击后即可安装运行。

												

vuetify & electron (开发环境及打包)的更多相关文章

  1. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  2. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  3. Electron开发环境部署

    Electron开发环境部署 安装node.js 可以从node.js官方网站上获取安装包,并进行安装,安装完可以通过 ndoe -v 指令进行版本查看. 本文的开发环境为node.js 4.4.5. ...

  4. 搭建ionic3-angular5 开发环境并打包成安卓apk包教程

    安装node.js 搭建ionic3-angular5 开发环境,首先查看本地电脑是否安装node环境,打开终端,输入 命令: node -v 没有去安装nodejs  网址:http://nodej ...

  5. angular 4 开发环境下打包文件过大

    angular 4本地开发环境下,ng server -- port 8080 -o 之后在在浏览器中查看数据请求,其中vendor.bundle.js有8.3mb,而整个传输数据大小为16.3mb ...

  6. Eclipse Maven profiles 多环境配置,测试环境与开发环境分开打包

    1.将开发环境.测试环境.生产环境的配置文件分开存放,如下图: 2.在Maven中配置不同的环境打包配置文件的路径,配置如下: <profiles> <profile> < ...

  7. electron开发环境搭建

    开发环境 Node.js Vscode vscode安装Debugger for Chrome 创建开发目录(也是解决方案) 执行初始化命令,创建electronpicture工程,并添加main.j ...

  8. 如何开发Vite3插件构建Electron开发环境

    新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1 ...

  9. Window10 Electron 开发环境搭建及打包exe程序

    1.安装 Electron 首先要安装Node.js     (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html) 我这里已经安装好了. 2:安 ...

随机推荐

  1. AppBoxFuture: Sql存储的ORM查询示例

      上篇介绍集成第三方Sql数据库时未实现如导航属性.子查询等功能,经过大半个月的努力作者初步实现了这些功能,基本上能满足80%-90%查询需求,特别复杂的查询可以用原生sql来处理,下面分别示例介绍 ...

  2. 面试问烂的 Spring AO,全文详解

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  3. CSS - div中的文字不换行,超出宽度就用省略号表示

    问题 过多的文字会把盒子撑开,造成布局错乱. 解决 .card-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidd ...

  4. 80端口被system占用

    # 开始 今天配置wampserver 3.0.6的时候 发现右下角的图标一直是红色的 经验告诉我两个服务都没有运行 # 解决思路 wampserver有两个服务 一个是 Apache 服务 一个是 ...

  5. Java面向对象编程 -6.3

    foreach迭代输出 对于数组而言,一般都会使用for循环进行输出,但是在使用传统for循环的时候往往采用下标的形式进行数组元素的访问. 但是在jdk1.5之后为了减轻下标对数组的影响(如果数组下标 ...

  6. 小杨排队(dp)

    链接:https://ac.nowcoder.com/acm/contest/3667/J 题目描述 小阳想要买个东西,然后就去了商店,发现进商店需要排队(生意太火爆!),然后就开始漫长的等待,他觉得 ...

  7. yii2.0 构造函数

    public function init() { parent:: init(); }

  8. eight(待考究)

    为什么明明结果都可以到达那种情况,步骤不一样就不给通过 QAQ 有哪位大佬提点一下,在下感激不尽~~~ 我的代码: #include <iostream>#include <queu ...

  9. C++学会STL

    1.1 泛型程序设计简介 泛型程序设计,简单地说就是使用模板的程序设计法.将一些常用的数据结构(比如链表,数组,二叉树)和算法(比如排序,查找)写成模板,以后则不论数据结构里放的是什么对象,算法针对什 ...

  10. 初学做uniapp项目过程梳理的一些记录

    1.uniapp不显示h5头部 第一种写法: { "path" : "pages/yunshi/yunshi", "style" : { & ...