草庐IT

electron-vite

全部标签

Vite 源码(六)解析 importAnalysis 插件

theme:cyanosishighlight:monokai介绍importAnalysis是Vite中内置的很重要的一个插件,它的作用如下解析请求文件中的导入,确保它们存在;并重写导入路径为绝对路径如果导入的模块需要更新,会在导入URL上挂载一个参数,从而强制浏览器请求新的文件对于引入CommonJS转成ESM的模块,会注入一段代码,以支持获取模块内容如果代码中有import.meta.hot.accept,注入import.meta.hot定义更新ModuleGraph,以及收集请求文件接收的热更新模块如果代码中环境变量import.meta.env,注入import.meta.env定

前端框架搭建(六)搭建页面框架【vite】

1.安装所需依赖需要安装vue-routernaive视图框架npmnpminstallvue-router@4yarnyarnaddvue-router@4npmi-Dnaive-ui2.搭建naive适配框架创建文件夹——存放通用组件在components下创建文件夹common全局配置常用组件在之前创建的global.d.ts中添加Windows的配置interfaceWindow{$loadingBar?:import('naive-ui').LoadingBarProviderInst;$dialog?:import('naive-ui').DialogProviderInst;$m

【Electron】vue+electron实现无边框窗口

一、前言无边框窗口是不带外壳(包括窗口边框、工具栏等),只含有网页内容的窗口。对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得–与我无关-.-)。因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑。二、实现方案1.创建无边框窗口要创建无边框窗口,只需在BrowserWindow的options中将frame设置为false:const{BrowserWindow}=require('electron')constwin=newBrowserWindow({width:800,height:600,//设置为`false`时可以创建一个无边框窗口。默认值为`tru

Vue3+Vite+TypeScript常用项目模块详解

目录1.Vue3+Vite+TypeScript概述1.1vue3 1.1.1Vue3 概述1.1.2 vue3的现状与发展趋势1.2Vite1.2.1现实问题1.2搭建vite项目1.3TypeScript1.3.1TypeScript定义1.3.2TypeScript基本数据类型 1.3.3TypeScript语法简单介绍2.项目配置简单概述2.1eslint校验代码工具配置2.1.1eslint定义2.1.2eslint安装2.2prettier格式化工具配置2.2.1prettier定义2.2.2prettier安装2.3 stylelint配置2.3.1stylelint定义2.3.

VUE3+vite项目中动态引入组件和异步组件

一、全量注册,随用随取1.把项目中所有vue文件注册成异步组件。constapp=createApp(App);functionregisterGlobalAsyncComponents(app:VueApp){constmodules=import.meta.glob('./**/*.vue');for(constpathinmodules){constresult=path.match(/.*\/(.+).vue$/);if(result){constname=result[1];constcomponent=modules[path];app.component(name,defineA

vite项目低版本浏览器兼容性问题

技术:vite+vue3.2+ts+element-plus开发环境没有问题,但是打包后的代码放到正式环境,页面空白...现场的小伙伴发来报错问题 UncaughtSynntaxError:Unexpectedtoken?纳尼,这这这...什么原因,一头雾水用火狐浏览器访问,没有报错,开始狂摆...时间一点点流逝,全网没有找到解决方法....猜测谷歌浏览器版本问题,测试了90版本,页面出来了!用户用的浏览器大部分是65和70的,太老了吧定位到问题就好办了!换关键词搜索“vite低版本浏览器兼容问题”,果然很多人遇到问题问题分析:浏览器内核版本太低,导致用浏览器打开,会出现白屏。该语句是ES6的

Electron-ChatGPT桌面端ChatGPT实例|electron25+vue3聊天AI模板EXE

基于electron25+vite4+vue3仿制chatgpt客户端聊天模板ElectronChatGPT。electron-chatgpt使用最新桌面端技术Electron25.x结合Vite4.x全家桶技术开发跨端模仿ChatGPT智能聊天程序模板。支持经典+分栏两种布局、暗黑+明亮主题模式,集成electron封装多窗口及通讯功能。技术栈编码工具:vscode框架技术:electron25+vite4+vue3+pinia2组件库:veplus(基于vue3自定义组件库)打包工具:electron-builder^23.6.0调试工具:electron-devtools-install

浅析:如何在Vue3+Vite中使用JSX

目录0.Vue3,Vite,JSX三者的关系JSX介绍在Vue3中使用JSX安装插件(@vitejs/plugin-vue-jsx)新建jsx文件语法补充知识:注意事项0.Vue3,Vite,JSX三者的关系Vue3、Vite和JSX都是现代前端开发中常用的技术。Vue3是一款流行的JavaScript前端框架,它通过提供组件化开发的方式,使得构建复杂的用户界面变得更加容易。Vue3还引入了一些新的功能,如更快的渲染速度、更好的类型支持以及更好的可组合性,使得开发人员可以更加轻松地构建高质量的应用程序。Vite是一个基于现代浏览器原生ES模块导入的开发服务器,旨在提供快速的开发体验和优化的构建

win10配置Electron安装环境以及解决报错

学习electron做桌面应用程序开发,从安装到HellowWorld,过程中遇到的问题以及解决方式。开始学习这边Electron官方文档有详细的步骤。基本要求检查Node.js是否正确安装,请在您的终端输入以下命令:node-vnpm-v创建程序Electron应用程序遵循与其他Node.js项目相同的结构。首先创建一个文件夹并初始化npm包。mkdirmy-electron-app&&cdmy-electron-appnpminit有几条规则需要遵循:entrypoint应为main.jsauthor与description可为任意值,但对于应用打包是必填项你的package.json文件

写了个辅助学习vite的小工具(mini-vite)

 话不多说先贴上仓库地址mini-vite看源码的几个问题封装的方法太多,不知道从哪个方法看起随便一个文件就是一两千行代码,看得头皮发麻不知道该怎么去debug,到底应该在哪个方法里面debug没关系,这些问题在我这都能解决我做了什么移除了vite仓库中的所有注释和其他对于所要学习的vite功能用不上的方法,并为核心方法添加上了注释为需要实现的核心功能画上了简易的思维导图配置了debug功能,直接就能在代码内debug本仓库只实现了vite比较常用的几个功能,后续在vite的学习中,我可能也会不断的往mini-vite里面加上新功能失业程序员待业中,希望大家能给几个star,让我能找工作稍微轻