electron + vue3 使用浏览器版本的 vue3 进行小工具的开发

electron + vue3 使用浏览器版本的 vue3 进行小工具的开发

electron + vue 在开发大型网络应用的时候可能比较顺手,但在开发本地小工具这样的程序的时候,就很不方便了。

单文件形式的 vue 每次都需要 build 之后才能被 electron 使用,这就需要很长一段时间。
如果你需要实现的一个小功能的工具,一个不需要太多大型应用功能的应用。
那你就可以抛弃 vuex vueRouter 这些大块,只使用 vue 对于 dom 操作的那部分。

这里推荐使用 vue browser 版本,也就是可以直接从 <script> 标签引用,用于浏览器那一种版本。

安装

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

"vue": "^3.1.5"

vue3 的目录结构

vue3 的目录结构是这样的,跟 vue2 不同,vue2dist 只有 vue.js vue.min.js 两个文件
vue3 则分的比较细,有 browserruntimeglobal 版本,适应不同场景

.
├── 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 即可

htmlscript 标签中添加 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')

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

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

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

上一篇:Java堆、栈和常量池以及相关String的详细讲解(经典中的经典) (转)


下一篇:【转】Python之日期与时间处理模块(date和datetime)