Electron教程（四）使用 Vue Browser 版，创建小工具应用

Electron教程（四）使用 Vue Browser 版，创建小工具应用

​​Electron教程（一）什么是 Electron，由来、适用场景 和 Electron 的环境搭建​​​​Electron教程（二）启动过程：主进程，渲染进程是什么​​​​Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程​​​​Electron教程（四）使用 Vue Browser 版，创建小工具应用​​​​Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互​​​​Electron教程（六）应用菜单设置例子​​​​Electron教程（七）结语​​

目前 基于 ​​electron​​​ + ​​vue​​​ 的使用，一般都是网络应用，几乎都只是为了打包一个 vue 的 web 应用建的。 原理是没变的，还是 ​​electron​​​ + ​​html​​​ 文档，只不过打包的是 vue 生成的 ​​dist​​​ 文件夹。很少用到 ​​node​​ 的本地属性。

讲实话我看了半天也没看明白如何使用 ​​electron​​​ + ​​单文件模式的 vue ​​来构建一个本地的应用，就是可以使用 node 资源的，比如读取本地文件内容。

单文件模式的 Vue 时，我引用 ​​node​​ 功能的时候总是出错，最终放弃了单文件模式的 Vue。

如果你需要实现的一个小功能的工具，一个不需要太多大型应用功能的应用。
那你就可以抛弃 ​​​vuex​​​ ​​vueRouter​​​ 这些大块，只使用 ​​vue​​​ 对于 ​​dom​​​ 操作的那部分，可以改用 Browser 版的 ​​vue​​​， 也就是可以直接从 ​​<script>​​ 标签引用，用于浏览器那一种版本。

一、效果展示

这样只需要启动一次 ​​electron​​​ 即可，以后修改页面内容后，就只需要在 ​​electron​​ 的窗口中刷新页面内容就可以了，如下：

我需要把上面的搜索栏隐藏掉，只需要这样，然后刷新页面即可。

二、安装

还是在之前教程的基础之上操作。
安装还是一样的，直接在 ​​​package.json​​ 文件中添加 vue 即可

"vue": "^3.1.5"

三、vue3 的目录结构

​​vue3​​​ 的目录结构是这样的，跟 ​​vue2​​​ 不同，​​vue2​​​ 的 ​​dist​​​ 只有 ​​vue.js​​​ ​​vue.min.js​​​ 两个文件
而 ​​​vue3​​​ 则分的比较细，有 ​​browser​​​ 和 ​​runtime​​​ 、 ​​global​​ 版本，适应不同场景

.
├── LICENSE
├── README.md
├── dist
│   ├── vue.cjs.js
│   ├── vue.cjs.prod.js
│   ├── vue.d.ts
│   ├── vue.esm-browser.js
│   ├── vue.esm-browser.prod.js
│   ├── vue.esm-bundler.js
│   ├── vue.global.js
│   ├── vue.global.prod.js
│   ├── vue.runtime.esm-browser.js
│   ├── vue.runtime.esm-browser.prod.js
│   ├── vue.runtime.esm-bundler.js
│   ├── vue.runtime.global.js
│   └── vue.runtime.global.prod.js
├── index.js
└── package.json

四、使用

上面的了解就可以，使用中只需要引入 ​​vue​​ 即可

在 ​​html​​​ 的 ​​script​​​ 标签中添加 ​​type="module"​​

<script type="module" src="js/main.js"></script>

然后在需要使用 ​​vue​​​ 的 js 中这样引入 ​​Vue​​ 即可使用了

const Vue = require('vue')

// Vue 3
const app = {
    data() {
        return {
            name: '你好呀'
        }
    }
}

Vue.createApp(app).mount('#app')

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8zhMoull-1627556001603)(media/16271377072238/vue3%20.png)]

具体 ​​vue3​​ 的使用可以看官方文档

Vue3 ​​https://v3.cn.vuejs.org/guide/introduction.html#%声明式渲染​​

我正在开发一个小工具，使用的就是 ​​electron + vue(browser 版本)​​​，可作参考
​​​https://github.com/KyleBing/wubi-dict-editor​​