73 lines
1.5 KiB
Plaintext
73 lines
1.5 KiB
Plaintext
---
|
|
description: Vue 组件开发规范，适用于落地页组件
|
|
globs: "**/*.vue"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Vue 组件规范
|
|
|
|
## 组件结构
|
|
|
|
遵循 `<template>` → `<script>` → `<style>` 顺序:
|
|
|
|
```vue
|
|
<template>
|
|
<div class="pageName">
|
|
<!-- 内容 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["os", "configs", "switchData"],
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {},
|
|
mounted() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pageName {
|
|
/* 样式 */
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## 命名约定
|
|
|
|
- 文件名: 小写或 camelCase (`mobile1.vue`, `selectLinePopup.vue`)
|
|
- 新落地页模板: `mobile{N}.vue` (移动端) / `pc{N}.vue` (PC 端)
|
|
- CSS 类名: camelCase (`headerBox`, `floatingBox`, `bottomBox`)
|
|
- 事件名: camelCase (`getApkInfo`, `recordClick`)
|
|
|
|
## Props 通信
|
|
|
|
落地页组件接收三个核心 props:
|
|
|
|
| Prop | 说明 |
|
|
|------|------|
|
|
| `os` | 设备信息 (isPhone, userAgent 等) |
|
|
| `configs` | 配置列表 (tg_group, potato_group 等) |
|
|
| `switchData` | 开关数据 (下载链接、功能开关) |
|
|
|
|
## 事件追踪
|
|
|
|
使用 `landingPageClick` 上报用户点击行为，传入 tab 和坐标:
|
|
|
|
```js
|
|
import { landingPageClick } from "@/utils/eventTracker";
|
|
landingPageClick(this, { tab_key, tab_name, click_coordinates_x, click_coordinates_y });
|
|
```
|
|
|
|
## 图片资源引用
|
|
|
|
图片放在 `src/assets/images/{templateName}/` 下，在 SCSS 中通过相对路径引用:
|
|
|
|
```scss
|
|
background: url("./../../../assets/images/mobile1/logo.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
```
|