Electron开发 —— 简单demo之整合vue

最新推荐文章于 2024-07-27 13:31:57 发布

潇潇剑-易水阁

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量1k

点赞数

文章标签： vue java javascript python nodejs

本文链接：https://blog.csdn.net/qq_16670995/article/details/108217550

版权

本文介绍如何将Vue项目与Electron结合，通过修改index.html、配置vue.config.js、调整package.json，实现Vue CLI项目在Electron中的运行。文章详细描述了CLI打包过程、 Electron的启动和打包，探讨了electron-builder与electron-packager的使用，并讨论了后续优化方向。

摘要由CSDN通过智能技术生成

总得有个开始

前置条件：

Electron开发 —— 简单demo
vue开发 —— 简单demo
vscore编辑器（非必须，自选喜欢即可）
本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网

一：步骤：

1. 利用上一章节的demo，以及之前的vue开发系列，vue项目开发有2种模式，一种脚手架CLI生成，一种直接js引用，此处因为利用上一章节demo，故先采取js引用，仅修改的index.html，其他不变，改动如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
  </head>
  <body>
    <div id="app">{
   { content }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          content: '潇风剑易水',
        },
      });
    </script>
  </body>
</html>

1. 1、运行结果如下：

npm start

demo运行图：

最低0.47元/天解锁文章

潇潇剑-易水阁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Electron开发 —— 简单demo之整合vue

总得有个开始前置条件：Electron开发 —— 简单demovue开发 —— 简单demovscore编辑器（非必须，自选喜欢即可）本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网一：步骤：1. 利用上一章节的demo，以及之前的vue开发系列，vue项目开发有2种模式，一种脚手架CLI生成，一种直接js引用，此处因为利用上一章...
复制链接

扫一扫