electron-vue架构解析1-序言（原）

最新推荐文章于 2024-08-23 18:20:21 发布
最新推荐文章于 2024-08-23 18:20:21 发布
阅读量3.3k 收藏 6
点赞数 2
分类专栏： 源码 前端 文章标签： electron vue electron-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010961631/article/details/80648712
版权
本文将探讨electron-vue，一个基于vue-cli的Vue+Webpack+Electron脚手架，用于跨平台应用开发。它实现了主进程和渲染进程配置文件分离，支持代码热更新和详细Log输出。文章通过分析项目结构、生产环境打包、开发环境启动和页面渲染，揭示了electron-vue如何管理代码和实现热更新。
摘要由CSDN通过智能技术生成

本系列文章将介绍electron-vue前端框架的作用、结构、使用方法。

electron-vue是SimulatedGREG基于vue-cli搭建的Vue+Webpack+Electron脚手架，可以用来开发跨PC平台的应用，源码地址在这里。
其主要功能/特色包括：

  • 主进程和渲染进程配置文件分离
  • 代码热更新
  • 详细的Log输出
  • 除了必备的Electron、Vue、Webpack等插件外，还可以一键配置：Axios\Vue-router\Vuex\Eslint\等插件

由于其自带的说明文件仅仅说明了该项目的概要、使用方法，并没有整个结构的解释，本系列文章就来从源码角度分析这个脚手架如何管理代码、如何分离编译环境、如何进行热更新等问题。

1.下载架构模板

由于electron-vue基于vue-cli进行了二次封装，因此在使用之前，需要先安装vue-cli的脚手架：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  工程师阿杜
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
electron-vue构建桌面应用（一）

				
			

			

				

					weixin_45629194的博客
				

				

					01-13
					
					542
					
				

			

		

		

			
				
electron-vue，作者为我们封装好了一个基于vue框架的脚手架，包括electron所有基本的开发构建工具 和vue配套的请求，路由以及vuex等插件。通过脚手架我们可以直接进入开发阶段。
官网：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
以下是具体步骤：
一、node -v(小写v) ；如果没有显示node版本，先去官网下载安装node(node自带npm，npm是nodejs的包管理器,只有下载了node才能用npm把依赖

			
		

	



                

              
                



	

		

			

				
					
electron-vue项目学习记录（1）

				
			

			

				

					wr1067145458的博客
				

				

					12-01
					
					531
					
				

			

		

		

			
				
1.查看 官方文档 与自己安装的electron版本是否一致。（我的是15.++，建议初始化后切入项目目录再查看一次）
electron -v  //检查electron版本

2.初始化一个electon-vue项目，相关配置看个人习惯，可参考下图

3.安装必要的依赖
npm install // 最新的淘宝地址https://registry.npm.taobao.org/

4.运行electron-vue项目
5.解决 the server responded with a status of 4

			
		

	



                


  
              

                


	

		

			

				
					
用VUE构建Electron的骨架

				
			

			

				

					08-12
				

			

		

		

			
				
基于VUE和Electron的简易框架，实现Vue热更新状态下编写Electron

			
		

	





	

		

			

				
					
Electron-Vue 项目教程

				
			

			

				

					gitblog_00368的博客
				

				

					08-08
					
					767
					
				

			

		

		

			
				
Electron-Vue 项目教程
 electron-vueSimulatedGREG/electron-vue：这是一个基于Electron和Vue.js的桌面应用开发框架，适合开发跨平台的桌面应用程序。特点包括一套代码、多端运行、易于上手等。项目地址:https://gitcode.com/gh_mirrors/el/electron-vue 1. 项目的目录结构及介绍
Electron-V...

			
		

	



		

			
		



	

		

			

				
					
Electron-vue架构解析分享

				
			

			

				

					小柒的前端之旅
				

				

					01-17
					
					447
					
				

			

		

		

			
				
前面的话
这段时间做一个关于electron-vue的项目，看到一系列架构解析的文章，分享一下。
原文地址

electron-vue架构解析




			
		

	





	

		

			

				
					
Electron使用指南 - [10] 构建 Vue 项目基本结构

				
			

			

				

					sdasadasds的博客
				

				

					11-24
					
					183
					
				

			

		

		

			
				
准备 Header, Main, 和 Modal 三个组件。
1、reset.css 样式
编写 reset.css 样式：
/* /src/assets/styles/reset.css */

html, body {
  height: 100%;
}

body {
  font: caption;
  margin: 0;
  display: flex;
  flex-flow: column;
}

2、App 根组件
编辑 /renderer/src/App.vue：
<templat

			
		

	





	

		

			

				
					
Electron+Vue+Webpack项目框架架构教程与源码

				
			

			

				

					阿赛
				

				

					03-01
					
					3018
					
				

			

		

		

			
				
摘要：随着前端技术的飞速发展，越来越多的技术领域开始被前端工程师踏足。从NodeJs问世至今，各种前端工具脚手架、服务端框架层出不穷，“全栈工程师”对于前端开发者来说，再也不只是说说而已。在NodeJs及其衍生技术高速发展的同时，Nw和Electron的问世，更是为前端发展提速不少，依稀记得哪位前辈说过，“能用Js改写的，终将用Js改写”，这不，客户端来了！使用Electron也有一段时间了，各种...

			
		

	





	

		

			

				
					
electron-vue架构解析4-页面元素渲染过程分析（原）

				
			

			

				

					阿杜的专栏
				

				

					06-11
					
					3245
					
				

			

		

		

			
				
前面介绍了整个环境的创建过程，这一节我们来看具体页面渲染的过程。 
由于页面渲染都是在渲染进程完成的，我们就从渲染进程的配置文件来看入口在哪里。 
前面介绍过，渲染进程公用了两个配置文件，一个是electron-vue/dev-client.js，他负责在界面上提示当前的编译步骤，而另一个配置文件在webpack.renderer.config.js中定义：

let rendererConfig...

			
		

	





	

		

			

				
					
Vue 全家桶 + Electron 开发的一个跨三端的应用

					
热门推荐

				
			

			

				

					findhappy117的博客
				

				

					03-11
					
					1万+
					
				

			

		

		

			
				
代码地址如下：http://www.demodashi.com/demo/11738.html  GitHub Repo：vue-objccn
  
  Follow: halfrost · GitHub
利用 Vue.js 实现 objc中国 的跨平台全栈应用
✅ 桌面应用，支持 Mac、Linux、Windows 三个平台
✅ Web 应用，支持 桌面浏览器 和 手机浏览器
✅ 手机 App，目

			
		

	





	

		

			

				
					
用Quasar开发Vue3+Electron跨平台应用的简单指南

				
			

			

				

					军火库
				

				

					12-15
					
					1957
					
				

			

		

		

			
				
Quasar是一个开源的vue.js基础框架，简单配置即可在其基础上进行SPA, SSR, PWA, 手机网站以及跨平台应用程序的开发，本文将简述如何基于进行桌面应用开发。Quasar挺好用的，目前基于这套框架开发了几个桌面APP，也没碰到什么bug，他们前端组件升级更新啥的也很快。唯一不足就是中文文档和技术文章相对较少，碰到问题基本上要去看官网上的英文文档，不过还好英文文档还是挺 完善的。

			
		

	





	

		

			

				
					
2024 Vue 生态工具组合

					
最新发布

				
			

			

				

					qq_45532769的博客
				

				

					08-23
					
					772
					
				

			

		

		

			
				
经过 10 年的演进，Vue 已经构建了一个极为丰富且强大的生态系统，本文就来盘点 2024 年 Vue 生态工具组合！

			
		

	





	

		

			

				
					
electron-vue的原理以及初次使用流程

				
			

			

				

					qq_40261735的博客
				

				

					05-26
					
					1299
					
				

			

		

		

			
				
这里写目录标题electron-vue介绍electron项目结构electron运行过程electron-vue初次使用过程
electron-vue介绍
electron项目结构
electron运行过程
electron-vue初次使用过程



			
		

	





	

		

			

				
					
2024年前端最新Electron构建 Vue 项目基本结构_electron 10 vue(2)，字节跳动怎么面试的

				
			

			

				

					2401_84436058的博客
				

				

					05-13
					
					169
					
				

			

		

		

			
				
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】#### 3、Header 组件在 components 文件夹下创建 Header.vue 组件： /src/components/Header.vue#### 4、Main 组件在 components 文件夹下创建 Main.vue 组件： /src/components/Main.vueNo Items。

			
		

	





	

		

			

				
					
electron + vue 基础项目搭建小结

				
			

			

				

					qq_40942817的博客
				

				

					01-14
					
					907
					
				

			

		

		

			
				
步骤一：
安装vue-cli：
npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看vue-cli版本：
vue --version

安装完之后，使用vue-cli的命令创建一个项目：
vue create demo-app

项目名称不能大写，比如demoApp，必须是小写
然后，你会被提示选取一个 preset。
自己选一个，或直接回车，回车。。就创建完了。
步骤二：
安装完vue-cli项目，就调用一下命令：
vue add electr

			
		

	





	

		

			

				
					
Electron-vue实战-每日清单---02Electron-vue的目录详解

				
			

			

				

					专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
				

				

					11-08
					
					5832
					
				

			

		

		

			
				
项目地址，欢迎批评指正，随手Star哟
my-project
├─ .electron-vue
│ └─ build.js
打包时调用，在package.json中的script里的build命令
“build”: “node .electron-vue/build.js && electron-builder”,
│ └─ dev-client.js
│ └─ dev-runne...

			
		

	





	

		

			

				
					
electron-vue架构解析3-开发环境启动流程分析（原）

				
			

			

				

					阿杜的专栏
				

				

					06-11
					
					7291
					
				

			

		

		

			
				
这一节我们来看开发环境的启动流程。

该框架主要修改是对开发环境的优化，包括了于开发环境的配置文件隔离，主进程和渲染进程配置文件隔离，编译过程提示等功能，因此这一节内容才是整个框架的核心。 
我们从开发人员用到的启动命令说起。 
从package中我们看到启动命令就是：

&amp;quot;dev&amp;quot;: &amp;quot;node .electron-vue/dev-runner.js&amp;quot;,

也就是在终端使用npm run dev...

			
		

	





	

		

			

				
					
electron-vue electron-log

				
			

			

				

					12-15
				

			

		

		

			
				
electron-vue 是一个基于 electron 构建的 vue.js 框架。它结合了 vue.js 和 electron，可以让开发者使用 vue.js 的组件化开发方式来构建跨平台的桌面应用程序。使用 electron-vue 可以快速搭建 electron 应用的基础结构，并且利用 vue.js 的特性来开发界面和逻辑。

而 electron-log 是一个专为 electron 应用程序设计的日志模块。它为 electron 应用提供了方便的日志记录功能，可以将日志输出到文件或控制台，并且支持日志的级别和格式设置。electron-log 还可以方便地集成到 electron-vue 项目中，帮助开发者更好地管理和记录应用程序的日志信息。

electron-vue 和 electron-log 的结合使用，可以让开发者更加轻松地构建和管理 electron 应用程序。开发者可以利用 electron-vue 来快速搭建应用的界面和逻辑，同时使用 electron-log 来记录和管理应用程序的日志信息。这种组合可以提高开发效率，让开发者更加专注于应用程序的功能和用户体验。同时，electron-log 也可以帮助开发者更好地监测应用程序的运行状态，及时发现和解决问题，从而提高应用程序的稳定性和可靠性。因此，electron-vue 和 electron-log 是非常适合 electron 应用开发的工具，可以帮助开发者更好地完成应用程序的开发和维护工作。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值