前言一开始是一个自用的应用，原本是用razor写的。最近有了点新想法，加点新功能，但是我接触的项目基本都是vue+api的前后端分离，用这razor写的是真不习惯，最后决定还是用习惯的vue重写。之前尝试过在.netcore里使用vue2+webpack，毕竟实际上就是把.vue翻译成了.js来用，一个站点就能跑。但是vite不同于webpack的实在想不到怎么弄到.netcore里来。另外我的前端不太行，对于vue基本上只会写，不会搭。有些东西搞错了敬请谅解。起环境.net6pnpm8.6.1VisualStudio202217.4步骤创建新项目，使用React的模板：ClientApp文件

按需引入后ElMessage与ElLoading 的问题，两步优雅解决找不到名称“ElMessage”问题。不需要导入npm包，不需要下载任何东西，只要五行代码目录1、添加ElementPlus组件库1.2、下载1.2、自动导入(官方推荐)2、按需引入后ElMessage与ElLoading 的问题2.1、解决问题2.2、下面是分析原因,有兴趣可以看一下1、添加ElementPlus组件库1.1、下载 npmnpminstallelement-plus--save  yarn  yarnaddelement-plus 1.2、下载element-iconnpminstall@element-p

项目在打包时Somechunksarelargerthan500kBsafterminification(一些区块在缩小后大于500kB);跳到提示的官网https://rollupjs.org/configuration-options/#output-chunkfilenames草草翻了下未果最后在CSDN找到解决方式【Vue3】vite打包报错：块的大小超过限制，Somechunksarelargerthan500kbafterminification非常感谢大佬的分享基于大佬处理逻辑最后加上适应的配置项outDir:BUILD_DIR,//指定打包文件的输出目录emptyOutDir:

Uncaught(inpromise)ReferenceError:Cannotaccess'BasicForm'beforeinitialization这是组件之间出现循环引用时导致，我们可以通过异步组件：defineAsyncComponent解决，在VUE3的官网：https://cn.vuejs.org/guide/components/async.html#basic-usage。直接引用官网提供的异步组件(defineAsyncComponent),写法多种。以下只是其中一种。如原来的写法：修改后的写法：

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助背景因为我们日常开发项目的时候，需要和同事对接api和文档还有UI图，所以有时候要同时打开多个窗口，并在多个窗口中切换，来选择自己要的信息，如果api和文档不多的情况还好，但是有时候就是要做大量的页面，为了提升效率我决定自己做一个截图工具，并把自己要的信息截图钉在窗口上。在做之前先看看最终展示效果吧：先是截图截图后的图片展示工具nodejspnpmelectronvitereact实现原理逻辑其实也并不难理解，首先是主窗体发起截图请求，然后会打开另一个负责截图透明且全屏的窗体，唤起后透明窗体会让electron截取整个屏幕发给逻辑页面

开发新版本Vue项目推荐你使用Vite脚手架构建开发环境，然而Vite脚手架更倾向于构建纯Web页面，而不是桌面应用，因此开发者要做很多额外的配置和开发工作才能把Electron引入到Vue项目中，这也是很多开发者都基于开源工具来构建Electron+Vue的开发环境的原因。但这样做有两个问题：第一个是这些开源工具封装了很多技术细节，导致开发者想要修改某项配置非常不方便；另一个是这些开源工具的实现方式我认为也并不是很好。所以，我还是建议你尽量自己写代码构建Electron+Vue的开发环境，这样可以让自己更从容地控制整个项目。具体应该怎么做呢？接下来我将带你按如下几个步骤构建一个Vite+El

开发新版本Vue项目推荐你使用Vite脚手架构建开发环境，然而Vite脚手架更倾向于构建纯Web页面，而不是桌面应用，因此开发者要做很多额外的配置和开发工作才能把Electron引入到Vue项目中，这也是很多开发者都基于开源工具来构建Electron+Vue的开发环境的原因。但这样做有两个问题：第一个是这些开源工具封装了很多技术细节，导致开发者想要修改某项配置非常不方便；另一个是这些开源工具的实现方式我认为也并不是很好。所以，我还是建议你尽量自己写代码构建Electron+Vue的开发环境，这样可以让自己更从容地控制整个项目。具体应该怎么做呢？接下来我将带你按如下几个步骤构建一个Vite+El

文章目录?写在前面?webpack?Vite是什么？?使用Vite创建项目?写在最后?写在前面专栏介绍：凉哥作为Vue的忠实粉丝输出过大量的Vue文章，应粉丝要求开始更新Vue3的相关技术文章，Vue框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是Vue框架之所以火起来的原因，和Vue框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事，随着Vue框架不断的被认可，现如今的Vue框架已经是前端工程师必备的技能了，记得尤大大开发Vue的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今V

文章目录?写在前面?webpack?Vite是什么？?使用Vite创建项目?写在最后?写在前面专栏介绍：凉哥作为Vue的忠实粉丝输出过大量的Vue文章，应粉丝要求开始更新Vue3的相关技术文章，Vue框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是Vue框架之所以火起来的原因，和Vue框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事，随着Vue框架不断的被认可，现如今的Vue框架已经是前端工程师必备的技能了，记得尤大大开发Vue的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今V

例子,vue3导入element-plus打包大小 1.加载插件cdn-importyarnaddvite-plugin-cdn-import-D2.配置vitevite.config.jsimport{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";import{autoComplete,PluginasimportToCDN}from"vite-plugin-cdn-import";//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),i