helloworld of vue + electron 开发过程日志

helloworld 开发过程日志

helloworld of vue + electron

  • 1. 相关技术栈
  • 2. 安装开发环境
    • 2.1. 安装Node.js
    • 2.2. 使用NPM(节点包管理器)镜像
    • 2.3. 安装vue-cli
  • 3. hello world
    • 3.1. 创建项目
    • 3.2. 运行VUE项目
    • 3.3. 安装electron
    • 3.4. 通过electron运行VUE项目
    • 3.5. 使用electron-builder 打包发布
  • 4. 完善配置
  • 5. 总结

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

> [email protected] 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 .\distcmd:
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目录的方式:

  1. 根据开发环境写个脚copy到dist下，但这样代码就没有被打包过，适合调试
  2. 同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的基础上如何进一步搭建我的世界

项目地址https://github.com/nononoone/helloworld

原文地址：https://www.cnblogs.com/liangtian/p/11371284.html

时间： 2024-10-05 20:23:03

helloworld of vue + electron 开发过程日志的相关文章

Vue+Electron实现简单桌面应用

之前一直使用C#编写桌面应用,也顺带写一些Web端应用.最近在看node时发现常用的vscode是用electron编写的,一种想吃螃蟹的念头就涌了上来. 在网上找了找electron的资料,也研究了一下官方文档,发现electron app其实就是一个chrome浏览器,UI全部都是使用web端技术编写的,因为之前一直使用Vue来写Web应用,所以自然就想到Vue+Electron的组合. 在网上找了找,居然有现成的轮子Electron-Vue,立即install使用,可是发现最后却不那么如人

【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（二）

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(未完待续)(四)Electron配置润色(未完待续)(五)预加载及自动更新(未完待续)(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是

Android-LogCat日志工具(二)

既然是Java语言,那么对于很多人来说,用System.out.println() 方法来打印日志是最熟悉.最简单不过了.不过在真正的项目开发中,是极度不建议使用 System.out.println()方法的! 为什么 System.out.println()方法会这么遭大家唾弃呢?经过老师和同学极度鄙视之后,发现这个方法除了使用方便一点之外,其他就一无是处了.方便在哪儿呢?在 Eclipse中你只需要输入 syso,然后按下代码提示键,这个方法就会自动出来了,相信这也是很多 Java新手对它

使用 Android 的日志工具LogCat

Android 中的日志工具类是 Log(android.util.Log),这个类中提供了如下几个方法来供我们打印日志. 1.    Log.v() 这个方法用于打印那些最为琐碎的,意义最小的日志信息.对应级别 verbose,是 Android 日志里面级别最低的一种. 2.    Log.d() 这个方法用于打印一些调试信息,这些信息对你调试程序和分析问题应该是有帮助 的.对应级别 debug,比 verbose 高一级. 3.    Log.i() 这个方法用于打印一些比较重要的数据,这

用全栈神器electron 打全平台桌面级 app--Music Player

什么是Electron? Electron 技术方案进行桌面端的开发,跨平台兼容 macOS.Windows.Linux 等操作系统.可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序. 快速入门 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服务器. 这不意味着 Electron 是绑定了 GUI 库的 JavaScript.相反,E

【01】Vue 之hello wolrd

1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vju?/, 类似于 view].新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方式都很有创新,另外Vue自身的一些绑定的语法.用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本.而且Vue配合官方的和第三方的库可以实现单文件的组件化开发.SPA等现代化前端开发. 1.2. Vue的入门demo Vue 可以直接把它当做一个js库使用,

【05】Vue 之 实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况.更

Vue入门系列（五）Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

Vue.js 学习记录

一.Vue起步 Vue:构建用户界面的渐进式框架. 1.helloworld <div id="app">{{content}}</div> 原生方法: <script> var dom = document.getElementById('app'); dom.innerHTML = 'helloworld'; </script> Vue 方法: <script> //创建Vue实例 var app = new Vue({