1. 使用electron-vite构建工具
官网链接
安装构建工具
pnpm i electron-vite -g
创建electron-vite项目
pnpm create @quick-start/electron
安装所有依赖
pnpm i
其他
pnpm -D add sass scss
1. 启动项目
2. 配置
- package.json
"dev": "electron-vite dev --watch",
2. 使用tailwind
tailwind官网
安装
pnpm add -D tailwindcss postcss autoprefixer
初始化tailwindcss
- 创建两个配置文件
npx tailwindcss init -p
// Created Tailwind CSS config file: tailwind.config.js
// Created PostCSS config file: postcss.config.js
修改tailwind.config.js
- 官网上缺少vue的配置
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: []
}
在renderer/src目录创建index.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;
在main.ts文件中引入index.css
- 脚手架自动创建了别名：
@renderer': resolve('src/renderer/src')
import { createApp } from 'vue'
import App from './App.vue'
import '@renderer/index.css'
createApp(App).mount('#app')
安装插件Tailwind CSS IntelliSense
- 插件的作用：写tailwind代码就有提示了
App.vue
- 测试tailwind是否可以使用
<div class="bg-red-600">tailwind测试</div>
打包
electron-vite 打包makensis.exe报错解决记录
