vuetify & electron (开发环境及打包)
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 (开发环境及打包)的更多相关文章
- 二、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- 一、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- Electron开发环境部署
Electron开发环境部署 安装node.js 可以从node.js官方网站上获取安装包,并进行安装,安装完可以通过 ndoe -v 指令进行版本查看. 本文的开发环境为node.js 4.4.5. ...
- 搭建ionic3-angular5 开发环境并打包成安卓apk包教程
安装node.js 搭建ionic3-angular5 开发环境,首先查看本地电脑是否安装node环境,打开终端,输入 命令: node -v 没有去安装nodejs 网址:http://nodej ...
- angular 4 开发环境下打包文件过大
angular 4本地开发环境下,ng server -- port 8080 -o 之后在在浏览器中查看数据请求,其中vendor.bundle.js有8.3mb,而整个传输数据大小为16.3mb ...
- Eclipse Maven profiles 多环境配置,测试环境与开发环境分开打包
1.将开发环境.测试环境.生产环境的配置文件分开存放,如下图: 2.在Maven中配置不同的环境打包配置文件的路径,配置如下: <profiles> <profile> < ...
- electron开发环境搭建
开发环境 Node.js Vscode vscode安装Debugger for Chrome 创建开发目录(也是解决方案) 执行初始化命令,创建electronpicture工程,并添加main.j ...
- 如何开发Vite3插件构建Electron开发环境
新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1 ...
- Window10 Electron 开发环境搭建及打包exe程序
1.安装 Electron 首先要安装Node.js (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html) 我这里已经安装好了. 2:安 ...
随机推荐
- 《如何增加资本约见》---创业学习---训练营第四课---HHR---
一,开始 1,思考题: (1)一句话和安利文两份材料怎么准备? (2)接触资本的渠道有哪些? 二,一句话介绍: 1,优秀案列: (1)通过第一视角,服务某某行业的智能AR眼镜: (2)成立三个月GMV ...
- 2、介绍在TensorFlow当中使用不同的方式创建张量tensor
import tensorflow as tf from tensorflow.python.framework import ops ops.reset_default_graph() #开始一个计 ...
- BZOJ 3262: 陌上花开 (cdq分治,三维偏序)
#include <iostream> #include <stdio.h> #include <algorithm> using namespace std; c ...
- java篇 之 继承
this代表正在使用类的对象(的引用) java支持重载:允许在同一个类中使用相同的方法名(重载类型只区分参数列表,包括参数 顺序,参数个数,参数数据类型,与方法返回类型无关) 匹配: 方法名 参数列 ...
- document删除元素(节点)
不需要获取父id:document.getElementById("id").parentNode.removeChild(document.getElementById(&quo ...
- Laravel Vuejs 实战:开发知乎 (6)发布问题
1.view部分: 安装一个扩展包:Laravel-UEditor composer require "overtrue/laravel-ueditor:~1.0" 配置 添加下面 ...
- centos7下安装pcre库(pcretest)
在linux下需要对正则表达式的验证,使用的验证工具是pcretest,这个工具集成在pcre库中,下面是安装教程. 安装环境是centos7. 1)首先去官网下载压缩包文件. 其他的source网站 ...
- 「JSOI2013」侦探jyy
「JSOI2013」侦探jyy 传送门 个人感觉我写的复杂度不够优秀啊,但是好像没有别的办法了... 我们枚举每个点,考虑这个点能不能不发生. 首先我们从这个点开始,在反图上面 \(\text{BFS ...
- 例题3_4 猜数字游戏的提示(UVa340)
实现一个经典“猜数字”游戏.给定答案序列和用户猜的序列,统计有多少数字位置正确(A),有多少数字在两个序列都出现过但位置不对(B). 输入包含多组数据.每组输入第一行为序列长度n,第二行是答案序列,接 ...
- Uncaught SyntaxError: Unexpected identifier 报错 import Vue from 'vue';
一般情况是因为Webpack与webpack-dev-server版本不兼容导致. package.json { "name": "vue-loader-demo&quo ...