helloworld 最简框架搭建
记录了最开始搭建这个模板的过程
1. 相关技术栈
- Chromium 是由Google主导开发的网页浏览器
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
-
Electron 是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。
Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为系统应用。
Electron = Chromium + Node.js 看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器
从开发的角度来看, Electron application 本质上是一个 Node.js 应用程序 - vue.js Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式前端框架
- vue-cli 是一个基于 Vue.js 进行快速开发的完整系统
使用vue.js做前端 + Electron做后端开发应用，不仅能像web开发那样方便开发UI，又能通过Electron使用原生模块调用和扩展功能
2. 安装开发环境
当前使用的操作系统为Window10
2.1. 安装Node.js
从官网下载Node.js, 安装完后在命令行下输入node 就可以执行js脚本了
G:\Working> node
> console.log('hello world')
hello world
undefined
当前使用版本:
G:\Working> node -v
v10.9.0
2.2. 使用NPM(节点包管理器)镜像
国内使用npm速度有点慢，所以建议安装CNPM淘宝镜像
npm install cnpm
2.3. 安装vue-cli
使用vue-cli来快速搭建vue项目主要是vue生态的标准化，项目的目录结构，入口文件都是大家熟悉的
cnpm install -g @vue/cli
当前使用的版本:
G:\Working> vue -V
3.10.0
3. hello world
3.1. 创建项目
- 创建名为helloword的vue项目，
vue create helloworld
- 为了helloword最简单我选择手动选择模块
Vue CLI v3.10.0
? Please pick a preset:
default (babel, eslint)
> Manually select features
- 什么模块都不选
Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
( ) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
>( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
- Babel, PostCSS, ESLint使用单独的配置文件
Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
- 当前配置不应用到以后的项目
Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
- 完成
Vue CLI v3.10.0
✨ Creating project in G:\Working\helloworld.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
added 958 packages from 879 contributors and audited 12068 packages in 115.58s
found 0 vulnerabilities
🚀 Invoking generators...
📦 Installing additional dependencies...
added 3 packages from 1 contributor and audited 12072 packages in 18.392s
found 0 vulnerabilities
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project helloworld.
👉 Get started with the following commands:
$ cd helloworld
$ npm run serve
- 目录结构:
src
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
└─components
HelloWorld.vue
3.2. 运行VUE项目
执行 npm run serve 启动项目
G:\Working> cd helloworld
G:\Working\helloworld> npm run serve
> helloworld@0.1.0 serve G:\Working\helloworld
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 3806ms 00:11:43
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.3.6:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
此时,我们可以使用浏览器通过上而两个URL来访问我们的Vue项目了
提示使用npm run build来创建生产版本
npm run build
生成了一个dist目录，里面就是打包好的发行版本了，我们用浏览器打开里面index.html文件
什么？一片空白
看看打包后的源码，原来打包后的路径开头都是 /也就是根目录，而我们需要的是相对路径
helloworld目录下添加vue.config.js文件, 并加入配置
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: './'
}
然后OK了,浏览器访问没问题了，但多了个配置文件，看看能不能在代码里解决这问题呢
3.3. 安装electron
我们的目的是要在electron上跑VUE，所以还得安装electron.
cnpm install --save-dev electron
3.4. 通过electron运行VUE项目
安装完了，可怎么能在electron 上运行vue呢?
-
第一种方式
- 先运行vue项目 cnpm run serve
- 然后再通过electron访问
node_modules\.bin\electron http://localhost:8080/ -
第二种方式
- 先用命令
npm run build打包vue项目 - 然后通过electron加载打包好的项目就行了
cnpm run build && electron dist/index.html但这样在build时，mode 默认为
production不适合调试，因为源码都会被压缩了,调试要改成development好些vue-cli-service build --mode development && electron dist/index.html - 先用命令
我们是通过electron可以使用我们的VUE项目了，但我们仅仅把electron当做最简单的浏览器在使用, 我们并没有使用electron的功能，如菜单，窗口等.
查看electron的文档， 提示复制并运行这个库 electron/electron-quick-start
看看里面的main.js里怎么加载web应用的
// and load the index.html of the app.
mainWindow.loadFile('index.html')
这样不就可以加截我们vue项目打包后的index.html文件了吗
index.js:
const { app, BrowserWindow } = require('electron')
let mainWindow
function createWindow () {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
// 打开开发者工具
if (process.env.NODE_ENV === 'development') {
mainWindow.webContents.openDevTools()
}
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
参考 electron-quick-start的main.js的，我们需要实现一个electron的入口文件，但这文件放哪呢？
主进程和渲染器进程
Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
修改package.json, 增加mian脚本
"main":"dist/index.js",
把electron的入口文件Index.js从src复制到dist目录下
linux & powershell:
cp .\src\index.js .\dist\
cmd:
copy .\src\index.js .\dist\
打包vue项目
npm run build
并运行electron入口文件index.js
electron .
为了以后源码的目录更清晰，重新组织一下源码结构，根据electron的进程来组织, vue项目作为渲染进程， electron入口相关的就是主进程了
当前目录结构:
src
│ App.vue
│ main.js
│ index.js
├─assets
│ logo.png
│
└─components
HelloWorld.vue
重新组织后
src
├─electron
│ index.js
│
└─renderer
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
└─components
HelloWorld.vue
但这时我们运行npm run serve和npm run build时就会出错了，因为vue-cli找不到入口文件了,需要重新指定入口文件, 修改package.json
"scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build"
+ "serve": "vue-cli-service serve src/renderer/main.js",
+ "build": "vue-cli-service build src/renderer/main.js"
},
此时还有个问题，我们执行的electron入口文件index.js还是在src\electron目录下的，
我们在执行npm run build build Vue项目时，index.js并没有被打包到dist目录下,
这样不利于生产版本的发行等
两种把electron.js打包并放到dist目录的方式:
- 根据开发环境写个脚copy到dist下，但这样代码就没有被打包过，适合调试
- 同vue-cli一样使用webpack, webpack-cli
我选择第2种使用webpack,试运行下webpack命令， node_modules\.bin\webpack 提示是否安装webpack-cli, no,我们手动安装下
安装webpack-cli
cnpm install --save-dev webpack-cli
还是去看webpakc的中文文档
官方提到这个例子，参考下
https://github.com/electron-react-boilerplate/electron-react-boilerplate
添加一个electron入口文件的webpack配置文件webpack.electron.config.js
'use strict'
const path = require('path')
module.exports = {
entry: {
main: path.join(__dirname, 'src/electron/index.js')
},
output: {
filename: 'index.js',
path: path.join(__dirname, './dist')
},
target: 'electron-main'
}
打包vue项目
npm run build
打包electron入口文件index.js
.\node_modules\.bin\webpack-cli --config .\webpack.electron.config.js
运行electron
electron .
空白？查看控制台信息，提示
Not allowed to load local resource: file://index.html
原来webpack打包electron后，路径不对了
参考webpack node 配置
默认为：
__filename: 'mock',
__dirname: 'mock',
更改webpack.electron.config.js，打包后不使用真实路径
node: {
__dirname: false,
__filename: false
},
重新打包运行electron
.\node_modules\.bin\webpack-cli --config .\webpack.electron.config.js
electron .
成功运行
3.5. 使用electron-builder 打包发布
看到不少项目使用electron-builder,就用这个吧
- 安装
electron-builder
cnpm install --save-dev electron-builder
参考文档修改package.json, 添加build字段:
"build": {
"productName": "helloworld",
"appId": "nononoone.helloworld",
"npmRebuild": false,
"electronDownload": {
"mirror": "https://npm.taobao.org/mirrors/electron/",
"isVerifyChecksum": false
},
"directories": {
"output": "build"
},
"files": [
"dist/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico",
"extraResources": [
"./dist/**/*.dll"
]
},
"linux": {
"icon": "build/icons"
}
},
运行electron-builder命令:
.\node_modules\.bin\electron-builder
过程中要下载electron-builder的依赖文件真的慢死了，不过最终还是下完了
最后生成了一个build目录:
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/8/18 1:52 win-unpacked
-a---- 2019/8/18 1:50 549 builder-effective-config.yaml
-a---- 2019/8/18 1:53 43837331 helloworld Setup 0.1.0.exe
-a---- 2019/8/18 1:53 45860 helloworld Setup 0.1.0.exe.blockmap
win-unpacked目录相当于绿色版
helloworld Setup 0.1.0.exe就是安装包了
到此helloworld从开始到发布的基本流程就走完了
4. 完善配置
整个流程我们是走完了，但很多命令都是通过手动完成的，我们需要整理完善
修改package.json和完善脚本命令：
"scripts": {
"pack": "vue-cli-service build src/renderer/main.js && webpack-cli --config webpack.electron.config.js",
"build": "npm run pack && electron-builder",
"pack:dev": "vue-cli-service build src/renderer/main.js --mode development && webpack-cli --mode development --config webpack.electron.config.js",
"debug": "npm run pack:dev && electron .",
"serve": "npm run debug"
},
5. 总结
对比vue-cli创建的初始项目:
$ git status
On branch master
Changes not staged for commit:
(use "git add/rm <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: .gitignore
modified: package.json
deleted: src/App.vue
deleted: src/assets/logo.png
deleted: src/components/HelloWorld.vue
deleted: src/main.js
Untracked files:
(use "git add <file>..." to include in what will be committed)
src/electron/
src/renderer/
vue.config.js
webpack.electron.config.js
"开发过程日志.md"
no changes added to commit (use "git add" and/or "git commit -a")
到此，一个简单的vue + electron 开发模板就完成了，但这是不够的，还有很多工作要做，如
- 使用vue-cli给vue项目增加
elist,babel等插件 - 使用原生模块，如
ffi等 - 等等
所以接下来看看在helloworld的基础上如何进一步搭建我的世界
