Vue3.5+Electron项目二

人工智能桌面对话系统

• Bili
• Electron鸿蒙化【待实践】

新建项目

npx create-electron-app@latest vchat --template=vite-typescript
cd vchat
npm run start

# .npmrc【C:\Users\zhangsan\.npmrc】

```npmrc
registry=https://registry.npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

安装 vue

npm install vue
npm install --save-dev @vitejs/plugin-vue

• 代码修改 vite.renderer.config.ts

Tailwindcss 安装

【tailwindcss@3.4.6】安装

# 1. 安装 tailwindcss
npm install -D tailwindcss@3.4.6 postcss autoprefixer

# 2. 生成配置文件 tailwind.config.js、postcss.config.js
npx tailwindcss init -p

• 代码修改 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 代码修改 ./src/index.css

/* 清空代码，替换 */
@tailwind base;
@tailwind components;
@tailwind utilities;

• vscode 插件安装【Tailwind CSS IntelliSense】

【tailwindcss@4.1.18】安装

【tailwindcss@4.1.18】目前最新版【2026/01/22】
npm uninstall -D vite
npm install -D vite@7.2.6
npm install -D vite@latest 更新到最新版本
npm install -D typescript@5.9.3
npm install tailwindcss @tailwindcss/vite