构建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报错解决记录

相关推荐
豆豆(设计前端)14 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook2 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程2 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
一只小阿乐3 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
知识分享小能手3 天前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
梁辰兴4 天前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
字节架构前端4 天前
浅谈 Electron视频渲染跨端技术
electron
爱看书的小沐6 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow