当前位置: 首页 > news >正文

在electron-vite使用ShadCN

集成tailwind

这一步较为简单,仅需按照官网步骤即可~
这里不再赘述!

稍微需要注意的是,你的集成配置都需要在 electron.vite.config.ts!

补全tsconfig.json

600

{// ..."compilerOptions": {"composite": true,"types": ["electron-vite/node"],"baseUrl": ".","paths": {"@/*": ["./src/renderer/src/*"]}}
}

创建vite.config.ts

修改 electron.vite.config.ts, renderer>resolve>alias增加一行

export default defineConfig({// ...renderer: {resolve: {alias: {// ...'@': resolve('src/renderer/src') // Add this line}}}
})

复制一份electron.vite.config.ts,并将其改为为 vite.config.ts!

安装shadcn

现在你可以正常执行安装步骤了

npx shadcn@latest init

最后我们来使用一个插件来试试pnpm dlx shadcn@latest add button,在组件中使用它

import { Button } from "@renderer/components/ui/button"export default function Demo() {return  <Button>Button</Button>
}
http://www.gsyq.cn/news/11946.html

相关文章:

  • 9-23
  • Ubuntu Uninstall App
  • day11 课程(学员管理系统案例)
  • US$128 OBD II Adapter Plus OBD Cable Works with CKM100 and DIGIMASTER III for Key Programming
  • jmeter函数
  • Windows 10 C盘占用释放 - tfel
  • CherryStudio+cpolar:让智能工作流突破组织边界 - 详解
  • 科学计算方法--矩阵分析记录
  • 分布式链路追踪-SkyWalking - 指南
  • Say 题选记(9.21 - 9.27)
  • 9.25总结
  • Day08-C:\Users\Lenovo\Desktop\note\code\JavaSE\Basic\src\com\David\array-ArrayDemo01~07
  • ansible注意的和错误代码分析
  • 用 Rust 和 Tesseract OCR 识别验证码
  • 基于寄存器地址amp;标准外设库的LED流水灯
  • Rust 和 Tesseract OCR 实现验证码识别
  • AI-Powered-ToDo-List
  • Python 在 Web 开发中的应用与趋势
  • LLM MOE的进化之路
  • 【pytorch】关于深度学习模型是怎么使数据从头流动到尾的
  • AtCoder ARC114 总结 (A-C)
  • 日总结 8
  • 完整教程:讲一下ZooKeeper的持久化机制
  • AI变现攻略 - 教程
  • 英语_阅读_A farmer dream_待读
  • docker 私有仓库 harbor
  • Selenium工作原理详解 - 教程
  • 2025秋_3
  • 2025秋_4
  • 【STM32H7】从零开始搭建的HAL库工程模板(基于CubeMX)