草庐IT

electron-vite

全部标签

使用 CRXJS、Vite、TypeScript、Vue3、Pinia、Less、Naive-ui 开发 Chrome 浏览器插件——自带热加载,无需手动配置 vite.config.ts 文件

一、CRXJS一、什么是CRXJS?CRXJSVitePlugin是一款使用现代Web开发技术制作Chrome扩展的工具二、CRXJS的作用CRXJS支持热加载和静态资源导入,无需手动构建配置工具CRXJSVite插件通过将Vite的精细功能与简单的配置策略相结合,简化了Chrome扩展开发者体验二、使用Vue开发Chrome插件一、创建Vue项目1.使用Vite创建Vue项目npmcreatevite@latest#npmyarncreatevite #yarnpnpmcreatevite #pnpm选择Vue和TS进入项目,并进行pnpmi安装node_modulespnpmi#安

【前端】Electron可以开发手机app吗?问答

问:Electron可以开发手机app吗?答:可以的,使用Electron可以开发跨平台的移动应用。Electron是一个使用JavaScript、HTML和CSS来构建跨平台桌面应用的框架。通过Electron打包的应用,不仅可以运行在桌面Windows、Mac和Linux系统上,也可以打包成Android和iOS应用运行在移动设备上。要使用Electron开发移动应用,主要有以下两种方式:1.使用Electron的主要竞争对手Capacitor-这是一个专门用于打包web应用为原生移动应用的框架。它支持iOS和Android,可以将Electron应用打包为这两个平台的应用。2.使用Apa

前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

前言在项目开发中,我们经常会使用一些工具函数,也经常会用到例如loadsh等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。一、通用类工具函数在src/utils目录下创建tools文件夹,用于存放通用类工具函数文件。在tools文件下创建index.ts文件import{ElMessage,MessageHandler}from'element-plus'/***@description文档注册enter事件*@param{Function}cb*@return{void}*/expo

vite+vue3+ts项目上线docker 配置反向代理API

这次重点的坑是反向代理。1。项目中配置代理,为了跨域请求数据项目根目录中新建vite.config.ts文件在文件中添加配置代理注意:其中'/api'和target的地址后面没有'/'2。在项目根目录中新建Httprequest.ts文件,引入axios,并封装请求引入axios就不多说了,npm自行安装就好importaxiosfrom'axios';import{LicId,FrontCode,getTime,WxAppId}from'./utils/index';import{getToken}from'./utils/token';//创建一个axios实例constinstance=

Electron 29.0.0 正式发布,跨平台桌面应用开发工具!

2月20日,Electron29.0.0正式发布!该版本包括了对Chrome122.0.6261.39、V812.2和Node.js20.9.0的升级。下面就来看看该版本都有哪些更新吧!可以通过以下命令来安装最新版本:npminstallelectron@latest依赖更新Chrome122.0.6261.39V812.2Node.js20.9.0重大变化通过contextBridge调用的函数现在使用预期的接收者(this)来调用(也适用于27、28版本)。应用上的gpu-process-crashed事件已被弃用(也适用于28版本)。应用上已弃用的gpu-process-crashed事

Electron桌面应用实战:Element UI 导航栏橙色轮廓之谜与Bootstrap样式冲突解决方案

目录引言   问题现象及排查过程描述问题 深入探索查明原因解决方案与策略探讨重写样式禁用Bootstrap样式片段深度定制ElementUI组件隔离样式作用域结语引言        在基于Electron开发桌面应用的过程中,我们可能时常遇到各种意想不到的问题。我在使用ElementUI构建应用程序导航栏时就遭遇了一个看似离奇的现象——未预设的焦点轮廓突然显现!经过一番细致排查,最终揭示了问题的根源并提出了有效的解决方案。问题现象及排查过程描述问题         在构建一个Electron应用时,为了获得良好的用户体验和高效的开发效率,选择了ElementUI作为界面组件库来实现导航栏功能。

前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)

文章目录⭐前言💖vue3系列文章💖node系列文章⭐功能设计与实现💖数据库设计💖koa接口实现💖vue3的展示代码模板页面⭐效果⭐总结⭐结束⭐前言大家好,我是yma16,本文分享关于前端vite+vue3结合后端node+koa——实现代码模板展示平台(助力初学者快速上手)。背景2024年已经步入春天,马上到了毕业季,为了帮助学生快速搭建毕设框架,于是想着搭建一个模板代码平台,支持下载。技术选型前端:vite+vue3+antd后端:nodekoa数据库:mysql、redisvue3框架Vue3是一种用于构建用户界面的JavaScript框架。它是Vue.js框架的最新版本,于2020年9月

Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目

目录初始项目组成1.创建项目1.1下载项目依赖1.2项目自动启动1.3src别名设置vite.config.ts配置文件tsconfig.json配置若新创项目ts提示1.4运行测试2.清除默认样式2.1样式清除代码下载2.2src下创建公共样式文件夹`style`2.3main.js中引入样式2.4安装`sass`解析插件2.5运行测试3.Router-路由插件4.UI(Element-Plus)5.Axios5.1安装5.2简单配置axios5.3测试api接口6.pinia-状态管理6.1pinia文件6.2测试组件初始项目组成框架:Vue3打包构建工具:Vite网络请求:Axios状态

vite+react+ts+eslint+prettier构建react开发项目

目录一、构建项目二、安装eslint和prettier的依赖三、修改.eslintrc.cjs,创建.prettierrc.cjs1、.eslintrc.cjs文件配置2、ESlint忽略文件.eslintignore3、.prettierrc.cjs文件配置 4、prettierrc忽略配置文件.prettierignore

在终端使用npm run dev时,Vscode报错‘vite‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

报错如下:**解决方法:**在Vscode终端输入:npminstall-gvite下载成功后即可运行npmrundev命令。