非electron-vue实现的electron+vue桌面应用构建指南

资源摘要信息:"electronSystem:electron+vue不采用electron-vue的桌面系统模板" 知识点一：electronSystem项目概述 本项目名称为electronSystem，作者是立学生先生。该项目使用了electron和vue框架，并选择不使用electron-vue模板。electron是一个开源框架，用于使用web技术（HTML，CSS和JavaScript）来构建跨平台的桌面应用程序。vue是一个渐进式JavaScript框架，用于构建用户界面。 知识点二：electron-vue模板的选择原因 electron-vue是另一个流行的项目模板，它简化了electron和vue的集成过程，提供了一系列预设配置和结构，以方便开发者快速开始项目。然而，在electronSystem项目中，作者选择不使用electron-vue模板，可能是基于项目特定需求或技术选型，希望对electron和vue的集成进行更细粒度的控制。 知识点三：项目依赖安装 在electronSystem项目中，使用npm作为包管理工具。安装依赖的命令为npm install 或 cnpm install（cnpm是npm的中国镜像，用于加速依赖包的下载）。安装依赖是项目开发前的准备工作，可以确保所有需要的包都已经安装在项目中。 知识点四：项目运行与打包 项目运行的命令是npm run electron:serve，该命令会启动electron应用程序。项目打包的命令是npm run electron:build，该命令会构建应用程序的生产版本，最终生成可分发的安装包。这两个命令均使用了npm脚本，npm是一个强大的JavaScript包管理器，可以处理项目的安装、脚本执行等任务。 知识点五：项目配置说明 项目中如果遇到无法安装成功依赖的情况，作者提供了手动配置的方法。在src文件夹下创建background.js文件，并粘贴给定的代码。这段代码主要展示了如何使用electron模块来设置背景脚本，其中包含了创建协议、安装Vue开发者工具等配置。 知识点六：electron基础知识点 electron中的app模块负责控制应用程序的生命周期，protocol模块用于自定义协议的处理，BrowserWindow用于创建和管理浏览器窗口实例。在创建BrowserWindow实例时，可以指定窗口的尺寸、位置以及显示的网页等。 知识点七：vue-cli-plugin-electron-builder vue-cli-plugin-electron-builder是vue官方提供的electron构建插件，可以在vue项目的构建过程中集成electron构建步骤，使得开发者可以非常方便地构建出完整的桌面应用程序。插件提供了createProtocol函数用于创建自定义协议和installVueDevtools函数用于安装vue开发者工具。 知识点八：环境变量NODE_ENV 环境变量NODE_ENV用于区分应用程序运行的模式。在代码中经常用到process.env.NODE_ENV来区分开发环境（development）和生产环境（production）。这通常会影响代码的行为，例如是否开启调试工具、是否进行代码压缩等。 知识点九：JavaScript语言特性 本项目使用JavaScript作为编程语言。JavaScript是一种高级的、解释型的编程语言，它是一种面向对象、基于原型的语言。JavaScript通常用于网页的客户端脚本编程，现在被广泛应用于服务器端开发（Node.js）和桌面应用程序开发（electron）。 知识点十：使用cnpm加速依赖安装 cnpm是npm的中国镜像，由于npm的源服务器在国外，国内访问速度可能较慢，这会影响到依赖包的下载速度。cnpm通过镜像的方式缓存了大部分的npm包，使得国内用户可以快速访问和下载依赖包。在使用cnpm安装依赖时，命令和使用npm是相同的，只是将npm替换为cnpm。 知识点十一：electron和vue的集成实践 尽管作者选择了不使用electron-vue模板，但依然可以通过手动配置和代码实现electron与vue的集成。这通常涉及到vue项目的入口文件中配置electron特有的服务，以及在vue组件中调用electron提供的API。通过这种方式，可以灵活地将electron和vue的优势结合起来，开发出功能强大且界面友好的桌面应用。 知识点十二：electron应用的开发工作流 在electron应用的开发过程中，通常会包含以下工作流：编写前端代码，使用vue或react等框架创建用户界面；配置electron相关的后端服务，比如创建窗口、处理协议等；测试开发过程中的应用程序，确保功能正常；打包应用程序，生成可在不同操作系统上分发的安装包。这些步骤共同构成了从编码到分发的完整流程。 知识点十三：项目文件结构 文件名称列表中的"electronSystem-master"表示项目的根目录。在开发electron与vue结合的桌面应用时，文件结构通常会包含以下部分： - src：存放源代码，包括vue组件、electron的主进程和渲染进程代码、资源文件等。 - public：存放静态资源，如图片、样式表等。 - build：存放构建配置和脚本，如webpack配置文件、构建命令等。 - package.json：项目的配置文件，包括项目基本信息、依赖列表、脚本命令等。 通过这些文件和目录的组织，开发者可以对项目进行有效的管理，包括源代码的版本控制、依赖的管理、构建和部署等操作。