构建electron项目

YUELEI1182024-10-06 18:24

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