init
This commit is contained in:
zhangguoyun committed
1 parent
77544a5c30
commit
742eb7040f
10 files changed
+220
-233
No files matched your search
@@ -0,0 +1,220 @@
|
||||
# Vutron - Vite + Vue 3 + Electron Template
|
||||
|
||||
## Project Overview
|
||||
|
||||
Vutron is a preconfigured template for developing cross-platform desktop applications using modern web technologies. The project combines:
|
||||
- **Vite** as the build tool and development server
|
||||
- **Vue 3** with TypeScript for the user interface
|
||||
- **Electron** for creating desktop applications
|
||||
- **Vuetify** as the UI component library
|
||||
- **Pinia** for state management
|
||||
- **vue-i18n** for internationalization
|
||||
- **Playwright** for automated testing
|
||||
|
||||
The template provides a ready-to-use development environment with hot-reload, cross-platform build support, automated testing, and theme management (dark/light).
|
||||
|
||||
## Architecture
|
||||
|
||||
The project follows the typical Electron architecture with three main processes:
|
||||
|
||||
### Main Process (`src/main/`)
|
||||
- Handles application lifecycle
|
||||
- Manages windows and system integration
|
||||
- Located in `src/main/index.ts`
|
||||
- Also includes utilities, tray functionality, and IPC handlers
|
||||
|
||||
### Preload Process (`src/preload/`)
|
||||
- Acts as an isolated bridge between main and renderer processes
|
||||
- Uses `contextBridge` to securely expose APIs to the renderer
|
||||
- Located in `src/preload/index.ts`
|
||||
|
||||
### Renderer Process (`src/renderer/`)
|
||||
- Contains the Vue 3 application
|
||||
- Uses Vuetify for UI components
|
||||
- Located in `src/renderer/` with:
|
||||
- Components (`src/renderer/components/`)
|
||||
- Screens/views (`src/renderer/screens/`)
|
||||
- Router (`src/renderer/router/index.ts`)
|
||||
- State management with Pinia (`src/renderer/store/`)
|
||||
- Internationalization (`src/renderer/locales/`)
|
||||
- Utility functions (`src/renderer/utils/`)
|
||||
|
||||
## Building and Running
|
||||
|
||||
### Prerequisites
|
||||
- Node.js >= 20.0.0
|
||||
- pnpm package manager (recommended)
|
||||
|
||||
### Development
|
||||
```bash
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Start development server with hot-reload
|
||||
pnpm dev
|
||||
|
||||
# Development with debug info
|
||||
pnpm dev:debug
|
||||
|
||||
# Force reinstall dependencies and start development
|
||||
pnpm dev:debug:force
|
||||
```
|
||||
|
||||
### Building
|
||||
```bash
|
||||
# Build for all platforms
|
||||
pnpm build:all
|
||||
|
||||
# Build for specific platforms
|
||||
pnpm build:mac # macOS
|
||||
pnpm build:win # Windows
|
||||
pnpm build:linux # Linux
|
||||
|
||||
# Build without packaging (useful for quick testing)
|
||||
pnpm build:dir
|
||||
|
||||
# Run type checking, formatting, and build
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### Testing
|
||||
```bash
|
||||
# Run Playwright tests
|
||||
pnpm test
|
||||
|
||||
# Run tests on Linux with virtual display
|
||||
pnpm test:linux
|
||||
```
|
||||
|
||||
### Linting and Formatting
|
||||
```bash
|
||||
# Check for linting issues
|
||||
pnpm lint
|
||||
|
||||
# Fix linting issues automatically
|
||||
pnpm lint:fix
|
||||
|
||||
# Format code with Prettier
|
||||
pnpm format
|
||||
|
||||
# Format and fix code automatically
|
||||
pnpm format:fix
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **Hot Module Replacement**: Develop with instant feedback via Vite's fast hot-reload
|
||||
2. **Type Safety**: Full TypeScript support across the application
|
||||
3. **Internationalization**: Built-in multi-language support (11 languages available)
|
||||
4. **Theme Management**: Easy switching between dark and light themes
|
||||
5. **State Management**: Pinia for reactive state management
|
||||
6. **Cross-platform Builds**: Build for Windows, macOS, and Linux from a single codebase
|
||||
7. **Testing**: Integrated Playwright testing setup
|
||||
8. **Logging**: electron-log for both main and renderer processes
|
||||
9. **Security**: Secure IPC communication between processes
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
├── buildAssets/ # Build configurations and icons
|
||||
├── dist/ # Build output directory
|
||||
├── docs/ # Documentation
|
||||
├── node_modules/ # Dependencies
|
||||
├── src/ # Source code
|
||||
│ ├── main/ # Electron main process code
|
||||
│ ├── preload/ # Preload script for context isolation
|
||||
│ └── renderer/ # Vue application code
|
||||
│ ├── components/ # Vue components
|
||||
│ ├── locales/ # Translation files
|
||||
│ ├── plugins/ # Vue plugins (i18n, Pinia, Vuetify)
|
||||
│ ├── router/ # Vue Router configuration
|
||||
│ ├── screens/ # Application views/pages
|
||||
│ ├── store/ # Pinia stores
|
||||
│ ├── utils/ # Utility functions
|
||||
│ ├── App.vue # Root component
|
||||
│ ├── index.html # HTML entry point
|
||||
│ └── main.ts # Vue application entry point
|
||||
├── tests/ # Test files
|
||||
├── .vscode/ # VS Code settings
|
||||
├── .editorconfig # Editor configuration
|
||||
├── .gitignore # Git ignore rules
|
||||
├── .prettierignore # Prettier ignore rules
|
||||
├── .prettierrc # Prettier configuration
|
||||
├── eslint.config.ts # ESLint configuration
|
||||
├── package.json # Project dependencies and scripts
|
||||
├── playwright.config.ts # Playwright test configuration
|
||||
├── pnpm-lock.yaml # Dependency lock file
|
||||
├── pnpm-workspace.yaml # pnpm workspace configuration
|
||||
├── README.md # Project documentation
|
||||
├── tsconfig.json # TypeScript configuration
|
||||
├── tsconfig.node.json # TypeScript configuration for Node.js files
|
||||
└── vite.config.mts # Vite configuration
|
||||
```
|
||||
|
||||
## Development Conventions
|
||||
|
||||
1. **Code Style**:
|
||||
- Uses ESLint with TypeScript and Vue plugin
|
||||
- Formatted with Prettier
|
||||
- Follows Vue 3 Composition API with TypeScript
|
||||
|
||||
2. **Component Structure**:
|
||||
- Components use Vue 3's `<script setup>` syntax
|
||||
- Written in TypeScript with proper typing
|
||||
- Utilize Vuetify components for UI
|
||||
|
||||
3. **Internationalization**:
|
||||
- Uses vue-i18n for multi-language support
|
||||
- Translation files stored in `src/renderer/locales/`
|
||||
- Keys are organized in JSON format
|
||||
|
||||
4. **State Management**:
|
||||
- Uses Pinia for state management
|
||||
- Stores are defined in `src/renderer/store/`
|
||||
- Follow Pinia's composition store pattern
|
||||
|
||||
5. **Routing**:
|
||||
- Uses Vue Router with web hash history
|
||||
- Routes defined in `src/renderer/router/index.ts`
|
||||
|
||||
6. **IPC Communication**:
|
||||
- Secure communication between main and renderer processes
|
||||
- Uses whitelisted channels defined in preload script
|
||||
- Accessible via `window.mainApi` in renderer process
|
||||
|
||||
## Internationalization
|
||||
|
||||
The application supports multiple languages with the following locale files:
|
||||
- English (`en`)
|
||||
- Korean (`ko`)
|
||||
- Simplified Chinese (`zh-hans`)
|
||||
- Traditional Chinese (`zh-hant`)
|
||||
- German (`de`)
|
||||
- Spanish (`es`)
|
||||
- Japanese (`ja`)
|
||||
- French (`fr`)
|
||||
- Russian (`ru`)
|
||||
- Portuguese (`pt`)
|
||||
- Dutch (`nl`)
|
||||
|
||||
## Electron Integration
|
||||
|
||||
The application integrates with Electron features through:
|
||||
- IPC communication for sending messages between processes
|
||||
- Native file dialog support
|
||||
- External link opening
|
||||
- Application version retrieval
|
||||
- Error handling and logging
|
||||
|
||||
## Testing
|
||||
|
||||
The project includes Playwright for end-to-end testing, with configuration in `playwright.config.ts` and test files in the `tests/` directory.
|
||||
|
||||
## Build Outputs
|
||||
|
||||
Building creates different distribution formats based on the platform:
|
||||
- **macOS**: DMG installer for x64, arm64, and universal architectures
|
||||
- **Windows**: APPX, ZIP, Portable, and NSIS installers (x64)
|
||||
- **Linux**: SNAP, DEB, and RPM packages (x64)
|
||||
|
||||
Artifacts are named with the format `${productName} ${version}_${arch}.${ext}` and stored in the `release/${version}` directory.
|
||||
Reference in new issue
Block a user