诸城网站建设开发信息流投放
为什么选择CefSharp+Vue做桌面应用程序
CefSharp 基于 Chromium Embedded Framework (CEF) ，它可以将 Chromium 浏览器的功能嵌入到 .NET 应用程序中。通过 CefSharp，开发者可以在桌面应用程序中集成 Web 技术，包括 HTML、JavaScript、CSS 等，来实现丰富的用户界面和交互体验。大厂产物，稳定性高。
Vue.js 渐进式 JavaScript 框架，专注于构建用户界面的前端框架。Vue 通过组件化的开发方式，易于集成和扩展，使开发者能够快速构建响应式、动态的 Web 应用。
把 CefSharp 与 Vue.js 结合使用，可以通过桌面应用嵌入 Web 技术实现现代的用户界面。CefSharp 相当于一个浏览器引擎，用来显示 Vue.js 渲染的页面。这样，既能享受桌面应用程序的性能，又能利用 Web 技术来构建交互性强、富有表现力的界面。类似于用自定义化浏览器实现桌面应用程序。
优势：
- 提升桌面应用的用户体验：借助 Vue.js 的现代化前端技术，开发者能够创建更具吸引力和互动性的桌面应用。
- 增强开发的灵活性与效率：CefSharp 提供强大的桌面功能，而 Vue.js 提供快速开发界面的能力，两者结合可以显著提升开发效率。
- 促进跨平台桌面应用的开发：通过 Vue.js 与 CefSharp，开发者可以更轻松地创建支持多平台的桌面应用，尤其是在需要集成 Web
功能时。
两种选择
- 使用CefSharp加载公网地址，实现内嵌web页面。
- 使用CefSharp加载Vue本地包，实现高定制化应用程序。
| 实现方式 | 加载公网地址 | 加载 Vue 本地包 |
|---|---|---|
| 数据来源 | 从互联网上加载（通过 URL） | 从本地文件系统加载（通过文件路径） |
| 网络依赖 | 需要稳定的网络连接，依赖公网服务器 | 无需网络连接，直接通过本地文件加载 |
| 资源更新 | 资源更新需要更新服务器上的 Web 页面 | 资源更新只需要重新构建本地 Vue 项目并替换本地文件 |
| 开发调试 | 可以直接在 Web 环境中调试，使用浏览器开发工具调试 | 需要通过本地构建工具调试 Vue 项目 |
| 性能开销 | 加载速度依赖于服务器和网络条件 | 加载速度较快，无需网络请求，完全由本地文件提供支持 |
| 适用场景 | 用于需要动态更新且依赖外部 Web 服务的应用 | 用于本地化、独立于网络的桌面应用 |
| 交互性 | 适合涉及到网络数据交换的场景 | 与本地功能的交互性较强，适合本地数据库或本地功能的集成 |
| 资源管理 | 资源管理集中在 Web 服务器端，前端需要通过网络获取 | 所有资源（如 JS、CSS、图片等）都需要嵌入到本地文件中 |
| UI 更新 | 需要服务器端更新和部署 | 本地更新，用户需要手动更新本地应用或通过自动化更新机制来更新 |
| 本地访问 | 只能 JavaScript 与本地 API 进行交互，可能跨域 | 可以直接通过本地 API 与 Vue 页面进行交互或使用本地方法传递数据 |
使用CefSharp加载公网地址
1.安装IDE
注意：Vscode不能开发winform，所以直接安装VS2019。千万不要装最新版，最新版不支持.net 4.X，但Cefsharp基于.net 4.X.
官方网址：https://learn.microsoft.com/zh-cn/visualstudio/releases/2019/release-notes
安装时选择.Net桌面开发（大约8G）：
2. 环境准备
创建项目：
IDE自动生成项目初始化代码并进入设计界面：
打开包管理器：
选择CefSharp.WinForms：
注意：
如果NuGet包管理器无法使用，提示链接超时或被拒绝。进行以下操作：
- 关闭VS，删除C:\Users\xxx\AppData\Roaming\NuGet下的整个nuget.config文件。
- CMD管理员权限执行以下：
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v DisabledByDefault /t REG_DWORD /d 0 /f /reg:32
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v DisabledByDefault /t REG_DWORD /d 0 /f /reg:64
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v Enabled /t REG_DWORD /d 1 /f /reg:32
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v Enabled /t REG_DWORD /d 1 /f /reg:64
选择X86平台：
如果没有，则新建。此处是为了兼容性选择了X86，否则无法在32位环境运行（向下兼容）。
注意：
CefSharp基于.Net4.X，所以当前项目版本必须是基于.Net 4.X,如果不是，可以在项目属性修改。
如果没有4.X的选项，则需要额外安装。
Cef必须使用对应的.net版本：
2.编程
using CefSharp;
using CefSharp.WinForms;public partial class Form1 : Form
{public Form1(){InitializeComponent();InitializeChromium();}private ChromiumWebBrowser chromeBrowser;private void InitializeChromium(){Cef.Initialize(new CefSettings());chromeBrowser = new ChromiumWebBrowser("https://www.baidu.com"){Dock = DockStyle.Fill};this.Controls.Add(chromeBrowser);}// 确保在程序关闭时释放资源protected override void OnFormClosing(FormClosingEventArgs e){chromeBrowser.Dispose();Cef.Shutdown();base.OnFormClosing(e);}
}使用CefSharp加载 Vue 本地包
1.安装IDE
与前文一致
2.环境准备
与前文一致
3.编码
提前准备好前端界面代码包，执行命令打包前端程序：
npm run build
完成后，Vue.js 项目会生成一个 dist/ 或 build/ 文件夹，包含了 HTML、CSS、JS 等静态资源。
将 Vue 打包的静态文件放入本地资源路径。
使用C#加载打包文件：
using CefSharp;
using CefSharp.WinForms;public partial class Form1 : Form
{public Form1(){InitializeComponent();InitializeChromium();}private ChromiumWebBrowser chromeBrowser;private void InitializeChromium(){Cef.Initialize(new CefSettings());// 加载本地 Vue 包chromeBrowser = new ChromiumWebBrowser("file:///C:/你的自定义目录/vue/dist/index.html"){Dock = DockStyle.Fill};this.Controls.Add(chromeBrowser);}// 确保在程序关闭时释放资源protected override void OnFormClosing(FormClosingEventArgs e){chromeBrowser.Dispose();Cef.Shutdown();base.OnFormClosing(e);}
}