39 lines
1019 B
Plaintext
39 lines
1019 B
Plaintext
 
|
---
|
||
|
|
description: Vue 单文件组件与本仓库写法
|
||
|
|
globs: src/**/*.vue
|
||
|
|
alwaysApply: false
|
||
|
|
---
|
||
|
|
|
||
|
|
# Vue SFC 约定
|
||
|
|
|
||
|
|
## 结构
|
||
|
|
|
||
|
|
- 路由页：`views/*` 根节点使用 `<AppPage>`；标题/导语可用 `.app-page__title`、`.app-page__lead`。
|
||
|
|
- 样式：`<style scoped lang="scss">`；需要断点时用 `respond-up` / `respond-down` mixin。
|
||
|
|
- 路径别名：`@/` → `src/`。
|
||
|
|
|
||
|
|
## 导航与 URL 参数
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useRouteWithPreferences } from '@/composables/useRouteWithPreferences'
|
||
|
|
const { linkTo } = useRouteWithPreferences()
|
||
|
|
</script>
|
||
|
|
<RouterLink :to="linkTo('/')">...</RouterLink>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 表单示例（响应式）
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useBreakpoint } from '@/composables/useBreakpoint'
|
||
|
|
const { isMobile } = useBreakpoint()
|
||
|
|
</script>
|
||
|
|
<el-form :label-position="isMobile ? 'top' : 'right'">
|
||
|
|
```
|
||
|
|
|
||
|
|
## 禁止
|
||
|
|
|
||
|
|
- 不要复制 PC/H5 两套页面文件。
|
||
|
|
- 不要绕过 URL 直接改 `i18n.global.locale` 或 `applyTheme`（应走 store + query 同步链路）。
|