标签：vue 浏览器 js electron vue3 esm runtime browser

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 不同，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')

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

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

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

标签：vue,浏览器,js,electron,vue3,esm,runtime,browser
来源： https://blog.csdn.net/KimBing/article/details/119065424

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。