Note for Electron && Vue.js

  • 最近写了一点点Electron 开发体验一般(然鹅在Arch上非常的痛苦)
  • 贵潮的纳新系统用Vue来写 遇到了一些坑
  • TypeScript很棒 Golang很妙 Vue是个什么玩意儿

Electron.js

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库 2014年开源的

About Installation Bugs

安装会卡在node install.js上 然后报错退出

这个问题很多人都会遇到 当然TTfish也遇到了 看到别人用黑魔法直接解包用了 这里还是写一下比较友好的方法:

  • 换个国内镜像 浙大源 淘宝源 QSC源
  • npm install -g electron后的参数--unsafe-perm=true --allow-root这个就是全局安装的权限问题了(头疼)

不知为何我的Arch安装了Electron以后输入electron .以后石沉大海 啥事都不会发生 遂怒转Windows开发

Electron Development

安装完包以后 就可以进行开发 package.json的配置不可缺少

1
2
3
4
5
6
7
8
"main": "main.js",
"scripts": {
"start": "electron ."
},
"homepage":".",
"dependencies": {
"electron": "^",
}

当然 直接electron .执行也没有问题 前提是npm全局安装了electron并在环境变量里有

Hello World && A little More

Elecreon有集成好的 需要记忆的API (不喜欢记API) 稍微写一点在这里 这是个简单的Hello World
以下是Main.js

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
32
33
34
35
"use strict"
const electron = require('electron')
const Menu = electron.Menu
const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow

function createWindow () {

mainWindow = new BrowserWindow({backgroundColor: 'white', width: 1200, height: 800})

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
mainWindow.on('closed', function () {
mainWindow = null
})
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})

那么这样的效果就是创建一个1200*800的窗口 并且加载了本地的index.html的代码

关于BrowserWindow的一些参数

  • autoHideMenuBar: true会隐藏页面的菜单栏 按下Ctrl后会显示
  • fullscreen: true 全屏(有点难受 关闭按钮被顶出去了)
  • frame: false 那边框就全没了
  • transparent: true 这个很有意思 会变成透明的底板(去年的潮毕 薯米君好像就是这样写的弹幕)

还有很多属性 不写了

关于Electron重要的是它只用了Chromium的渲染库而不是其全部组件 多进程就很喵 狠狠的写路由可以写很好的工程 比如正在使用的VSCode(你怎么还在用VSCode写博客?)

Note:

1
2
3
<script>
require('./haha.js')
</script>

Vue.js

嘛 之前用React 写的还算是开心? 写微信小程序的时候 用过Wepy 和Vue非常的像 而因为微信的Api实在是太糟糕了 当时写的不舒服到也没有很大的怨气 还很高兴 但是真正要写Vue的时候 感觉不是很舒服了(当然开发效率很快 Route之类的裸犇君也写得很好)

About Installation

打包工具很不错

1
$ npm install -g vue-cli

然而一开始de了一小时的bug 才发现少装了四个包 眼泪流下来 所以 这个很重要

1
$ npm install -g babel-plugin-syntax-dynamic-import

如果遇到Vue异步组件的懒加载报语法错误的时候 就是没有装这个包的锅 别问我怎么知道的

1
2
3
routes: [
{ path: '/', component: () => import('./components/Home.vue') },
]

非常妙的语法

About Data

之前写微信小程序就被Data弄得晕头转向 并不像React的State一样管理方便 于是小项目小数据的话 一般还是不放在Data里 直接在script标签里定义 更改也是暴力的用this.xxx = xxx来更改

  • Typescript => 声明一堆对象的数组: let TTfish : object[]
  • object 不能大写
Share