50 lines
4.1 KiB
Markdown
50 lines
4.1 KiB
Markdown
# Project Conventions and Technical Guidelines
|
|
|
|
This document outlines the core technical choices, coding conventions, and configuration details for this project. Adhering to these guidelines ensures consistency and leverages the project's setup effectively.
|
|
|
|
## 🚀 Core Technologies & Conventions
|
|
|
|
* **Framework:** Vue 3
|
|
* **Language:** TypeScript
|
|
* **API Style:** **Strictly use the Composition API with `<script setup>` syntax.** The Options API and the standard `<script>` block with the `setup()` function are **not** used in this project.
|
|
* **Single File Component (SFC) Structure:** Follow this order within `.vue` files:
|
|
1. `<script setup lang="ts">` (Imports, logic, composables, etc.)
|
|
2. `<template>` (HTML structure)
|
|
3. `<style>` (Preferably `<style scoped>`)
|
|
* **Code Comments:** All comments within the codebase **must be written in Chinese**. (代码中的所有注释**必须使用中文**。)
|
|
|
|
## 📦 UI Libraries & Components
|
|
|
|
* **UI Libraries:** This project utilizes both **Ant Design Vue** and **PrimeVue**.
|
|
* **Component Auto-Import:** Components from Ant Design Vue, PrimeVue, and those defined in `src/components/**/*.vue` (excluding filenames starting with `__`) are **automatically imported** via `unplugin-vue-components`.
|
|
* **Ant Design Vue:** Use components directly (e.g., `<a-button>`, `<a-table>`). Icons are also resolved (e.g., `<UserOutlined />`). CSS-in-JS is used; no manual style import is needed.
|
|
* **PrimeVue:** Use components directly with their standard names (e.g., `<Button>`, `<InputText>`, `<DataTable>`).
|
|
* **Custom Components:** Local components (e.g., `<MyCustomComponent />` defined in `src/components/MyCustomComponent.vue`) should be used directly in templates without explicit imports in `<script setup>`.
|
|
* **Custom Icons:** Custom SVG icons are available via `unplugin-icons` with the prefix `icon-`. Usage: `<icon-your-svg-file-name />`.
|
|
|
|
## ✨ API Auto-Import (unplugin-auto-import)
|
|
|
|
* **Automatic API Availability:** This project leverages `unplugin-auto-import` extensively. APIs from the following libraries/modules are globally available and **SHOULD NOT be explicitly imported** in `<script setup>` blocks unless necessary for specific type augmentation or rare cases:
|
|
* `vue` (e.g., `ref`, `computed`, `watch`, `onMounted`, `defineProps`, `defineEmits`, etc.)
|
|
* `pinia` (e.g., `defineStore`, `storeToRefs`)
|
|
* `vue-router/auto` (e.g., `useRouter`, `useRoute`, `useLink`) - Provided by `unplugin-vue-router` integration.
|
|
* `@vueuse/core` (Common utility functions)
|
|
* `vue-i18n` (e.g., `useI18n`)
|
|
* `consola/browser` (Available as the `consola` global for logging)
|
|
* **Auto-Imported Directories:** All exports from files within `src/stores/**` and `src/utils/**` are also auto-imported globally. Functions, variables, or stores defined and exported in these directories can be used directly without explicit import statements.
|
|
* **Template Usage:** Auto-import functionality also applies within the `<template>` block where appropriate (e.g., accessing store state or using certain utility functions directly).
|
|
* **Important:** Rely on the auto-import mechanism for the specified libraries and directories. Explicitly importing these APIs clutters the code unnecessarily.
|
|
|
|
## ✅ Summary of Key Rules & Conventions
|
|
|
|
* **Always** use `<script setup lang="ts">`.
|
|
* Composition API is the **only** accepted style.
|
|
* Code comments **must be in Chinese**.
|
|
* Vue 3 Composition API, Pinia, Vue Router (auto), VueUse functions, `consola`, and exports from `src/stores` & `src/utils` are globally available via auto-import; **do not** import them explicitly.
|
|
* Ant Design Vue, PrimeVue, and local `src/components` components are auto-imported; use them directly in templates without explicit imports.
|
|
* Use custom SVG icons via the `<icon-name />` syntax.
|
|
* Maintain the specified SFC structure: `<script setup>`, `<template>`, `<style>`.
|
|
|
|
---
|
|
|
|
*(Further details regarding state management patterns, routing configuration, specific linting rules, testing setup, or detailed coding style guides can be added to this document as needed.)* |