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

潇潇剑-易水阁

于 2020-08-25 11:05:31 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： 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的使用，并讨论了后续优化方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总得有个开始

前置条件：

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: '潇风剑易水',
        },
      });
    <