【WPF嵌套vue3】1.Nodejs创建项目及简介

原创

已于 2023-09-20 17:26:37 修改 · 344 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #vue.js #typescript

于 2023-09-19 18:27:26 首次发布

本文描述了一个开发者计划创建的开源项目，涉及.NETCore6.0和WPF应用，使用Prism框架和Cefsharp内核插件，同时结合Vue3、ElementUIPlus和Vite进行前端开发。作者还分享了Node.js环境下的项目初始化步骤和依赖管理方法。

最近想做个开源项目，也不知道自己能否坚持下来，希望能把自己所学到的知识做个记录

技术上规划是这样的,做成一个exe程序，适配平台为Windows,并且兼容Win7系统。
1.exe使用 .net core6.0，创建WPF应用，使用Prism框架
2.内置的浏览器插件使用chrome内核插件,Cefsharp.Wpf.NetCore
3.内置的各种页面使用 vue3+ElementUIPlus+TS+vite

最近也阅读了部分源码，希望能有更多的朋友提出意见，项目目前的源代码地址暂定如下,随缘更新。。。

项目源码如下 https://github.com/cy464848714/exe.git

Nodejs项目创建

node版本为 v18.14.1,使用vite打包
创建对应的vue开发项目，创建教程请参考引用

在弹出的cmd窗口执行命令依次如下

1.npm create vite@latest
2.输入项目名称 nodejs
3.选择Vue、TypeScript

在这里插入图片描述

添加各类依赖

先使用cd命令进入创建的nodejs文件夹中

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

UFC最佳花红

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【WPF嵌套vue3】3.创建wpf项目,并引入各类公共库

weixin_43627719的博客

09-20

587

做完了前面的vue,现在还需要创建个wpf程序。我wpf使用的版本是VS2022项目的结构目前如下:后面的代码就只捡着重点的说一说。

Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)

outsiderg的博客

04-20

5206

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码如下（示例）： import numpy as np import.

参与评论您还未登录，请先登录后发表或查看评论

【WPF嵌套vue3】6. .netcore 6.0 WPF CefSharp加载本地的vue3项目，并互相调用方法

weixin_43627719的博客

11-23

1490

到这里 vue和wpf的交互就结束了，即完成展示，也完成了双方的数据交互，这个坑我就算是填完了，加载vue本质上就是加载html+js，和vue3可以交互，当然也就可以和vue2、javascript交互，当初我写的时候 vue3交互的方法内容比较少，也希望大家可以借鉴看一下本质就是 wpf嵌套浏览器，使用浏览器组件显示网页，并和网页上的js进行方法调用ps：我以前做过类似的程序，wpf嵌套一个功能网页，然后各种调用它的js方法(因为那个公司没有接口，我直接调用他们的js方法传参，并对外封装成接口)

WPF与JS简单交互

11-22

WPF使用WebBrowser简单与HTML的JS交互,简单实用,适用与初学者.

【WPF嵌套vue3】2.vue3 简单js框架代码编写及运行

weixin_43627719的博客

09-19

538

2.ElementUI Plus没有使用中文(使用历史版本，非最新版本的Element plus有可能出现这个问题)1.app.vue 文件没有保存为UTF-8格式(默认创建项目保存的是ANSI格式)vite 我也是第一次使用，现在按照我以前用webpack的思路做一点配置及修改。贴一段历史版本我以前写的 ElementUI历史版本中文乱码的解决代码。2.webpack默认命令是 npm run serve。1.vite中的默认运行命令是 npm run dev。

按照Vue写WPF(0):功能实现

qq_44695769的博客

07-21

767

我最近学了WPF之后我终于知道为什么WPF学习曲线那么陡峭了。因为WPF没有组件化的思想，或者说没有按照Vue一样去模板化开发。为什么我推荐Vue的想法呢。因为Vue最大的特点就是模板化，让Vue工程师去写同样的功能，大部分人写的结果都一样。Vue这种套路化的开发大大降低了开发难度。套路这个东西，就是好用，泛用又简单。

Vue学习-1-入门

baidu_38126306的博客

11-03

666

Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合；遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据；网络通信：Axios；页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U

Vue快速入门学习笔记(更新ing)

喜欢前端的后端 MelodyJerry

11-15

4932

原在博客园发布，先同步到优快云：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、优快云等博客文章，以及个人的一些学习见解与体会。由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图：给用户看，刷新后台给的数据网络通信： axios.

狂神说Vue笔记

weixin_44541213的博客

04-01

2361

前端三要素了解前后分离的演变史第一个Vue程序1、什么是MVVM2、为什么要使用MVVMVue概述MVVM模式的实现者为什么要使用Vue.js第一个Vue程序基础语法指令1、v-bind2、v-if，v-elsev-else-if3、v-for4、 v-on 事件绑定5、v-model Vue双向绑定1、什么是双向绑定2、为什么要实现数据的双向绑定3、在表单中使用双向数据绑定什么是组件第一个Vue组件1、使用Vue.component（）方法注册组件2、使用props属性传递参数Axios异步通信1、什么.

Winform/WPF利用CefSharp集成vue开发

李正浩的博客

01-08

6944

原文发表在我的个人搭建的博客网站上：博客链接，下面是直接复制过来的 Winform/WPF集成vue开发前言有时候因为各种原因，可能在开发winform或wpf项目的时候需要嵌入web项目，而目前vue在web开发中还是非常流行的，今天有空琢磨了一下怎么在winform中集成vue进行开发，当然，winform能实现，wpf也是一样的。目前希望达到的效果是，能够在winform中显示web界面，并且能够与vue中的各个组件进行交互，也就是调用vue中的函数，及vue函数调用C#中的方法。项目创建首

.Net开发人员通过WCF使用Node.js

04-13

.Net开发人员通过WCF使用Node.js 博文中的代码demo和数据库

好厉害的库edge.js！实现C#与node.js互操作

热门推荐

lee576的专栏

03-31

2万+

最近在网上闲逛，又发现个好东西，edge.js 这个库可以让node.js 调用 C# 的代码，还可以让 C# 调用node.js 的代码，看到这里，只问你服不服？反正我是很惊叹了…… 不过edge.js也有个限制，必须是.net 4.5 以上才可以用，因为使用了一些.net 新特性Task，asyn，await，这些特性正好对应node.js的异步回调来自edge.js官网的例子，node.j

相对比功能受限的WPF .NET Framework和Electron开发框架Delphi是当之无愧的真正的全栈万能开发工具

Delphi开发局QQ群:32422310

03-25

3535

相对而言，Delphi，WPF .NET Framework和Electron的性能如何？进行客观比较的最佳方法是什么？Embarcadero委托进行了一份白皮书，以研究Delphi，WPF .NET Framework和Electron之间用于构建Windows桌面应用程序的区别。由三个Delphi最有价值专家（MVP）志愿者，一名自由WPF开发人员和一名Electron自由开发人员在每个框架中重新创建了基准应用程序Windows 10 Calculator克隆。在此博客文章中，我们将探索项目多...

Node.js基础入门

weixin_46015333的博客

04-20

2437

文章目录一、Node.js是什么特性二、使用步骤1.引入库2.读入数据总结一、Node.js是什么 Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. 特性 Node.js 可以解析JS代码（没有浏览器安全级别的限制）提供很多系统级别的API，如：文件的读写 (File System) 进程的管理 (Process) 网络通信 (HTTP/HTTPS) 二、使用步骤 1.引入库代码如下（示例）： imp

如何在Nodejs的代码中使用C#的代码

狼窝

01-10

2081

一、在CMD中，进入nodejs项目的目录，执行命令“npm install edge”进行安装二、在Nodejs的代码中使用C#的代码有三种方式【方案一】将c#的代码封装成dll，然后在nodejs里面调用 Nodejs中： // 引入Edge模块 var edge = require('./node_modules/edge'); // 定义方法，assemblyFile为dll路径，Ro...

[菜鸟试水]关于Nodejs搭建后台API服务(Mysql-Restify)

狗仔很忙的博客

06-03

4582

尝试一下写些技术的东西, 之前在公司一直是用C#写的WCF后台. 对于跨域调用API虽然也支持, 但是需要做的配置也挺繁琐, 所以试下不一样的后台技术, NodeJs . 由于只做API调用, 所以用了Restify 插件而不是Express . 所以先全局安装下 restify : npm install restify -g (-g就是全局,不然就是当前路径下安装).

.NET Core下WPF与Vue3整合开发webView2应用实例详解

资源摘要信息: "webView2应用实例是一个基于.NET 6 Core平台和WPF框架构建的应用程序，它利用了webView2控件与Vue.js前端框架结合Vue3和Vite工具进行开发。该实例演示了如何将WPF应用程序与Vue项目页面连接、将WPF与...