我的GitHub
0%

大🔥都知道,Vscode的换行符有LF和CRLF

1
在各操作系统下,文本文件所使用的换行符是不一样的。UNIX/Linux 使用的是 0x0A(LF),早期的 Mac OS 使用的是0x0D(CR),后来的 OS X 在更换内核后与 UNIX 保持一致了。但 DOS/Windows 一直使用 0x0D0A(CRLF)作为换行符。Git提供了一个“换行符自动转换”功能。这个功能默认处于“自动模式”,当你在签出文件时,它试图将 UNIX 换行符(LF)替换为 Windows 的换行符(CRLF);当你在提交文件时,它又试图将 CRLF 替换为 LF。Git 的“换行符自动转换”功能听起来似乎很智能、很贴心,因为它试图一方面保持仓库内文件的一致性(UNIX 风格),一方面又保证本地文件的兼容性(Windows 风格)。但遗憾的是,这个功能是有 bug 的,而且在短期内都不太可能会修正。 

git 换行符LF与CRLF转换问题抄的

这里我们可以知道,在macOS和linux上,与windows的换行符是不一致的。

一旦使用eslint等工具,就会整个项目出问题。。。

可能在百度搜半天,怎么解决这个问题,发现的都是以下两种:

1.新建文件怎么设置换行符

2.单文件如何通过编辑器修改换行符

丝毫没提如何修正已有文件

项目那么多文件,怎么可能手动一个个修复

阅读全文 »

在 Vue 中引入 ElementUI 是非常常见的

elementUI-icon 图标

ElementUI 默认提供了一个 icon 图标集合,可以使用 i 标签展示

直接 class 名写图标名就能展示,这可太方便了

1
<i class="图标名"/>

但是图标肯定是不够用的,总会要引入一些自己的图标,比如使用阿里的iconfont

iconfont 引入

在阿里帮助页面我们可以看到好几种引入方式

其中 font-class 方式引入

fontclass引入.png

阅读全文 »

一、背景

应用希望能通过其他应用唤起,这应该是个非常常见的需求

二、如何唤起

搜半天,全是基于协议的。protocol

接着会发现关键代码

官网地址

1
app.setAsDefaultProtocolClient(PROTOCOL, process.execPath, args);

但是这有一个关键点:你至少运行过一次程序,才能注册这个协议!!!

这就让人很难受了。

那么我们需要想想,有没有办法在安装的时候把协议写进去?

阅读全文 »

背景

应用要收到系统托盘,这没什么好说的

文档

electron

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 主线程代码
import {
Tray, Menu,
} from 'electron';


let tray = null;
app.whenReady().then(() => {
// console.log(app.getAppPath());
// // 判断环境
if (process.env.WEBPACK_DEV_SERVER_URL) {
// 开发
tray = new Tray(path.join(app.getAppPath(), '/../src/assets/logo.png'));
} else {
// 生产
tray = new Tray(path.join(app.getPath('exe'), '/../resources/logo.png'));
}
// tray = new Tray(logo);

const contextMenu = Menu.buildFromTemplate([
{ label: '退出', click: () => { win.destroy(); } },
]);
tray.setToolTip('鼠标移上来的提示');
tray.setContextMenu(contextMenu);
tray.on('click', () => {
// eslint-disable-next-line no-unused-expressions
win.isVisible() ? win.hide() : win.show();
// eslint-disable-next-line no-unused-expressions
win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# vue.config.js

module.exports = {
…………// 省略
pluginOptions: {
electronBuilder: {
preload: './src/preload.js',
// 打包参数
builderOptions: {
extraResources: [{
from: path.join(__dirname, '/src/assets/logo.png'),
to: './',
}],
},
},
},
};

注意点

其实收到托盘代码很简单,但是这个托盘图标就有点坑了。

会发现,打包后因为没有这个icon,托盘找不到程序了。

阅读全文 »

背景

我是用的是vue-cli-plugin-electron-builder提供的集成方式

此插件提供的打包插件是electron-builder

预知项

1.在什么系统上默认打什么系统的包
2.mac上可以打全平台的包
3.win/linux不可以打mac的包
4.不建议在mac上打windows的包,nsis在electron的打包下存在bug,打的包无法卸载

打包介绍

默认提供的打包命令

1
"electron:build": "vue-cli-service electron:build",

FAQ

mac如何打windows的exe文件

阅读全文 »

背景

你只要打包就肯定遇到这个问题…

原本开发的时候可以通过webpack的proxy做转发,避免跨域的问题

但是打包上线会发现,这和普通的前端项目上线不一样,不会发布到对应的域名下

而是本地文件协议加载,app//.或者file://这种协议

因此在填写网络请求baseurl的时候,势必会遇到跨域问题

解决方式由两种

一.后台解决

这个就不多说了,让后台去加cors即可.

要是有Nginx上也可以在Nginx上搞,百度一下都有

阅读全文 »

进程间通信用ipcRenderer,ipcMain官网写的很清楚

但问题在于,我使用vue-cli-plugin-electron-builder引入electron

想做进程间通信

import {ipcRenderer} from ‘electron’

引入一直报错

原因如下

插件文档

方式一:Node Integration

1
2
3
4
5
6
7
8
# vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}

方式二:预加载

阅读全文 »

背景

多环境部署的时候总会有些参数需要写入

在vue-cli3创建的项目中可以通过webpack的配置文件写入

vue-cli4中没有了webpack配置文件,取而代之的事vue.config.js

实际上有两种方式可以完成这一需求

Mode模式

这是vue-cli4提供的能力,通过创建

1
.env.环境

方式创建不同环境下的不同配套参数

需要注意的是

阅读全文 »

创建项目

1.使用脚手架正常创建项目

1
vue create hello-world

2.集成electron

1
vue add vue-cli-plugin-electron-builder

不过这一步可能大多数同学可能卡在下载electron这,因为众所周知的原因,它需要很久

因此我们推荐使用国内源加速

1
npx cross-env ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" vue add vue-cli-plugin-electron-builder

这种方式能有效加速你的集成

也可以创建.npmrc文件放在项目中

阅读全文 »