构建electron项目

1. 使用electron-vite构建工具

官网链接
安装构建工具

typescript 复制代码
pnpm i electron-vite -g

创建electron-vite项目

typescript 复制代码
pnpm create @quick-start/electron

安装所有依赖

typescript 复制代码
pnpm i

其他

typescript 复制代码
pnpm -D add sass scss

1. 启动项目

2. 配置

  • package.json
typescript 复制代码
"dev": "electron-vite dev --watch",

2. 使用tailwind

tailwind官网

安装

typescript 复制代码
pnpm add -D tailwindcss postcss autoprefixer  

初始化tailwindcss

  • 创建两个配置文件
typescript 复制代码
npx tailwindcss init -p
// Created Tailwind CSS config file: tailwind.config.js
// Created PostCSS config file: postcss.config.js

修改tailwind.config.js

  • 官网上缺少vue的配置
typescript 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

renderer/src目录创建index.css文件

typescript 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.ts文件中引入index.css

  • 脚手架自动创建了别名:@renderer': resolve('src/renderer/src')
typescript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import '@renderer/index.css'

createApp(App).mount('#app')

安装插件Tailwind CSS IntelliSense

  • 插件的作用:写tailwind代码就有提示了

App.vue

  • 测试tailwind是否可以使用
typescript 复制代码
<div class="bg-red-600">tailwind测试</div>

打包

electron-vite 打包makensis.exe报错解决记录

相关推荐
Jinuss5 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
Jinuss12 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
喂_balabala16 小时前
electron安装失败
electron
EndingCoder18 小时前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge
胖墩会武术18 小时前
由浅及深:扫描电子显微镜(Scanning Electron Microscope,SEM)
人工智能·electron
li35741 天前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
EndingCoder2 天前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
EndingCoder2 天前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
叫我阿柒啊3 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
至善迎风3 天前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron