同步操作将从 Sky/electron-vue-template 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
这是一个基于 electron 的 vue 最基本的模板,其中前端技术栈则用到 vue 全家桶,axios 作为 http 请求,而本地数据库则是 nedb。现在合并了花裤衩的 vue-admin 中的东西侧栏样式是在
src/renderer/layout/components/sidebar
文件夹中,大家可以根据需求进行个性化更改,鄙人后续会将这个和花裤衩大大的同步.
请注意,在 2021 年 4 月 13 日的更新之后,将使用 esbuild 替换 babel,如对 babel 有强需求的小伙伴请勿更新。
vite 版本 electron-vite-template
react 版 Electron-react-template
请确保您的 node 环境是大于或等于 12
# 首先全局安装nrm
npm i -g nrm
# 然后使用nrm切换为淘宝源,或者你已经切换了npm的源也是可以的,强烈不建议使用cnpm如果你不想看到什么奇奇怪怪的爆红问题
nrm ls
nrm use taobao
# 如果网络非常顺畅的情况下
npm install
# 如果网络出现一定的情况
# 建议不要使用cnpm,会出现各种玄学bug。您可以通过如下操作加快安装速度
npm install --registry=https://registry.npm.taobao.org
# 但是需要注意的是electron的本体下载并不是走这里所以还是要去设置一下
npm config edit
# 该命令会打开npm的配置文件,请在registry=https://registry.npm.taobao.org/下一行添加
# electron_mirror=https://cdn.npm.taobao.org/dist/electron/
# ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
# 然后关闭该窗口,重启命令行,删除node_modules文件夹,并重新安装依赖即可
# 本地开发 启动项目
npm run dev 或 yarn de
这个项目使用了 electron-vue@8fae476 using vue-cli. 文档你们可以在这里看到: 这里. 这是花裤衩大大原本的地址
node .electron-vue/build.js
前添加cross-env TERGET_ENV=test
,即可启用,相应的您应当在config文件夹以及其index.js
文件中按照development
对象写好相同的代码方可在主/渲染进程中使用process.env.TERGET_ENV
来取得您的设置项。ELECTRON_MIRROR
,变量值为https://npm.taobao.org/mirrors/electron/
,另一个是变量名为registry
,变量值为https://registry.npm.taobao.org/
,然后系统变量中同样也加上这两个值,完成之后,删除 node_module 文件夹。然后执行 yarn install,如果还是提示未安装,那就去 electron 文件夹内执行一次 yarn install,就好了。这样的话,不仅仅只是 yarn 更快了,electron 的 rebuild 也会加速很多。所以推荐使用 yarn。
(优先尝试)使用 npm config edit 打开 npm 配置文件,添加上 electron_mirror=https://cdn.npm.taobao.org/dist/electron/ ,然后重启窗口删除 node_module 文件夹,重新安装依赖即可。 "dependencies": {
"@types/node": "^12.0.12",
"extract-zip": "^1.0.3",
"electron-download": "^4.1.0"
},
然后我们需要再修改 install.js 中的代码(实际就是 6 中的 install 代码)
#!/usr/bin/env node
var version = require("./package").version;
var fs = require("fs");
var os = require("os");
var path = require("path");
var extract = require("extract-zip");
var download = require("electron-download");
var installedVersion = null;
try {
installedVersion = fs
.readFileSync(path.join(__dirname, "dist", "version"), "utf-8")
.replace(/^v/, "");
} catch (ignored) {
// do nothing
}
if (process.env.ELECTRON_SKIP_BINARY_DOWNLOAD) {
process.exit(0);
}
var platformPath = getPlatformPath();
var electronPath =
process.env.ELECTRON_OVERRIDE_DIST_PATH ||
path.join(__dirname, "dist", platformPath);
if (installedVersion === version && fs.existsSync(electronPath)) {
process.exit(0);
}
// downloads if not cached
download(
{
cache: process.env.electron_config_cache,
version: version,
platform: process.env.npm_config_platform,
arch: process.env.npm_config_arch,
strictSSL: process.env.npm_config_strict_ssl === "true",
force: process.env.force_no_cache === "true",
quiet: process.env.npm_config_loglevel === "silent" || process.env.CI,
},
extractFile
);
// unzips and makes path.txt point at the correct executable
function extractFile(err, zipPath) {
if (err) return onerror(err);
extract(zipPath, { dir: path.join(__dirname, "dist") }, function(err) {
if (err) return onerror(err);
fs.writeFile(path.join(__dirname, "path.txt"), platformPath, function(err) {
if (err) return onerror(err);
});
});
}
function onerror(err) {
throw err;
}
function getPlatformPath() {
var platform = process.env.npm_config_platform || os.platform();
switch (platform) {
case "darwin":
return "Electron.app/Contents/MacOS/Electron";
case "freebsd":
case "linux":
return "electron";
case "win32":
return "electron.exe";
default:
throw new Error(
"Electron builds are not available on platform: " + platform
);
}
}
然后执行 npm i 即可完成安装,至于打包的话,您可能需要去淘宝镜像手动下载并且放好位置,才能完成打包操作,不然依旧还是报下载错误的信息。
2019 年 10 月 18 日更新:不知不觉中倒也过去了一个月,啊哈哈这次更新给大家带来的是 updater 的示例,这依旧是个实验特性,所以在新分支中才可以使用,使用方式则是,安装依赖,
运行 npm run update:serve
来启动这个 node 服务器,然后您如果想在 dev 的时候就看到效果需要先运行 build 拿到 latest.yml
文件,然后将其更名为 dev-app-update.yml
放入dist/electron
中,和main.js
同级,然后你需要关闭或者排除 webpack 的自动清除插件(我已经屏蔽了,所以无需大家自己动手),然后点击软件中的检查更新即可,记住当软件正在运行的时候,是无法应用安装的,所以您需要关闭之后方可安装。这并不是一个错误!
2019 年 9 月 18 日更新:修正生产环境时,没有正确去除控制台输出的问题,双分支例行更新依赖,修正 ui 部分颜色问题,日后准备使用 element 主题功能
2019 年 9 月 16 日更新:去除 easymock,直接粗暴更改登陆验证,如有需要请自行修改,例行更新新分支依赖,修正当自定义头部和系统头部互换时,布局不会做出相应变化的问题。
2019 年 9 月 3 日更新:修正了当 nodejs >= 12 时,出现 process 未定义的问题,新分支加入自定义头部,现在我们可以做出更 cooool~~的效果了。
2019 年 8 月 20 日更新:添加登录拦击,实现登录功能,在 dev 中加入关闭 ELECTRON 无用控制台输出,新分支例行更新依赖,加入生产环境屏蔽 f12 按键。
2019 年 8 月 13 日更新:将新分支的所有依赖均更新至最新(但是我觉得,babel 似乎有些东西不需要,还是保留着吧,日后测试后移除)依赖更新之后通过打包和 dev 测试
2019 年 8 月 12 日更新:添加一个新分支,该新分支后续将会持续保持 ELECTRON(包括其对应的辅助组件)的版本处于最新状态,去除了单元测试和一些无用的文件。master 分支中则是为路由添加新参数具体 用途,详看路由中的注释
2019 年 8 月 10 日更新:添加各个平台的 build 脚本,当您直接使用 build 时,则会打包您当前操作系统对应的安装包,mac 需要在 macos 上才能进行打包,而 linux 打包 win 的话,需要 wine 的支持,否则会失败
2019 年 8 月 4 日更新:修正原 webpack 配置中没有将 config 注入的小问题,添加了拦截实例,修改了侧栏,侧栏需要底色的请勿更新,此更新可能会导致侧栏底色无法完全覆盖(待修正),添加 axios 接口示例,待测。
2019 年 8 月 1 日更新:将 node-sass 版本更新至最新版本,尝试修正由于 nodejs 环境是 12 版导致失败(注意!此次更新可能会导致 32 位系统或者 nodejs 版本低于 10 的用户安装依赖报错)去除路由表中重复路由,解决控制台无端报错问题。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。