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

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

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

如果你需要实现的一个小功能的工具，一个不需要太多大型应用功能的应用。

那你就可以抛弃 vuex vueRouter 这些大块，只使用 vue 对于 dom 操作的那部分，可以改用 Browser 版的 vue， 也就是可以直接从 标签引用，用于浏览器那一种版本。

一、效果展示

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

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

（四）使用 Vue Browser 版，创建小工具应用 - 图1

二、安装

还是在之前教程的基础之上操作。

安装还是一样的，直接在 package.json 文件中添加 vue 即可

  1. "vue": "^3.1.5"

三、vue3 的目录结构

vue3 的目录结构是这样的，跟 vue2 不同，vue2 的 dist 只有 vue.js vue.min.js 两个文件

而 vue3 则分的比较细，有 browser 和 runtime 、 global 版本，适应不同场景

  1. .
  2. ├── LICENSE
  3. ├── README.md
  4. ├── dist
  5. │   ├── vue.cjs.js
  6. │   ├── vue.cjs.prod.js
  7. │   ├── vue.d.ts
  8. │   ├── vue.esm-browser.js
  9. │   ├── vue.esm-browser.prod.js
  10. │   ├── vue.esm-bundler.js
  11. │   ├── vue.global.js
  12. │   ├── vue.global.prod.js
  13. │   ├── vue.runtime.esm-browser.js
  14. │   ├── vue.runtime.esm-browser.prod.js
  15. │   ├── vue.runtime.esm-bundler.js
  16. │   ├── vue.runtime.global.js
  17. │   └── vue.runtime.global.prod.js
  18. ├── index.js
  19. └── package.json

四、使用

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

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

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

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

  1. const Vue = require('vue')
  3. // Vue 3
  4. const app = {
  5.     data() {
  6.         return {
  7.             name: '你好呀'
  8.         }
  9.     }
  10. }
  12. Vue.createApp(app).mount('#app')

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

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

我正在开发一个小工具，使用的就是 electron + vue(browser 版本)，可作参考