CSS
优先使用 **scoped**
防止样式污染全局，每个组件样式必须局部化。
错误示例：无作用域
<style>
.button {
color: red;
}
</style>
不加 scoped 会影响全局所有 .button
正确示例：使用 scoped
<style scoped>
.button {
color: red;
}
</style>
限制嵌套层级 ≤ 3 层
嵌套超过 3 层说明选择器设计有问题，建议拆分样式或使用 BEM。
错误示例：嵌套过深（5 层）
.card {
.header {
.title {
.icon {
span {
color: red;
}
}
}
}
}
正确方式是进行合理拆分
避免使用 !important
!important 会带来样式权重混乱，除非必要不推荐使用 !important
错误示例
.button {
color: red !important;
}
.alert {
display: none !important;
}
正确示例：提升选择器权重
/* 通过增加父级选择器权重覆盖 */
.container .button {
color: red;
}
合理使用 v-deep
在 Vue3 中，如果要覆盖子组件或第三方库的内部样式，必须使用 ::v-deep。禁止使用老版的 /deep/ 或 >>>，因为它们已废弃。同时要避免滥用 ::v-deep，只在必要时使用，并保持选择器短小。
错误示例
<style scoped>
.child-component .btn {
color: red;
}
</style>
正确示例
<style scoped>
::v-deep(.btn) {
color: red;
}
</style>
优先使用 UnoCSS
因为项目中引入 UnoCSS，首选使用 UnoCSS。
错误示例
使用了传统的 CSS 类名来定义样式，而不是利用 UnoCSS 的原子化类。这违背了优先使用 UnoCSS 的原则。
<template>
<div class="my-button">
点击我
</div>
</template>
<style scoped>
.my-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
正确示例
充分利用了 UnoCSS 的原子化类来定义相同的样式
<template>
<div class="bg-blue-500 text-white p-x-5 p-y-2 rounded-md cursor-pointer">
点击我
</div>
</template>
<style scoped>
/* 无需额外的 style 标签，因为样式已通过 UnoCSS 类名定义 */
</style>
JavaScript
变量与方法应采用统一的命名规范
命名应遵循语义清晰、风格一致、可读性高的原则，变量名体现数据类型/用途，方法名体现行为。团队建议统一小驼峰（camelCase） 风格，并避免无意义缩写或混用语言。
错误示例：变量命名不语义化
let a = true;
let b = [];
let c = "http://api.example.com";
正确示例如下
-
语义化命名
let isActive = true;
let userList: User[ ] = [ ];
const API_BASE_URL = "http://api.example.com";
-
方法名包含动词
function fetchData() { ... }
function saveUser() { ... }
function deleteUser() { ... }
-
布尔值变量以 is/has 开头
const isVisible = false;
const hasError = true;
> 1. 布尔值遵循语法准确是前提 2 推荐用 has 开头
dev.to/michi/tips-… 参考写布尔值的工具
使用可选链
当访问对象的深层次属性时，如果中间某一级可能为 null 或 undefined， (?.) 替代传统的逐层判断，代码更简洁且避免运行时异常。
错误示例
if (
response &&
response.data &&
response.data.user &&
response.data.user.profile
) {
console.log(response.data.user.profile.name);
}
上面的代码示例中判断条件冗长且可读性差、容易漏掉某一级判断和难以维护
正确示例
const name = response?.data?.user?.profile?.name;
if (name) {
console.log(name);
}
函数参数超过 3 个应封装成对象
当函数参数 超过 3 个 或存在多个相同类型的参数时，推荐将这些参数封装为一个对象。这样可以提升代码可读性、维护性，并支持命名参数调用，避免顺序错误。
错误示例：多个参数直接传递
function createUser(
name: string,
age: number,
role: string,
isActive: boolean,
department: string
) {
// 创建用户逻辑
}
createUser("Alice", 28, "admin", true, "Engineering");
正确示例
interface CreateUserOptions {
name: string;
age: number;
role: string;
isActive?: boolean;
department?: string;
}
function createUser(options: CreateUserOptions) {
const { name, age, role, isActive = true, department = "General" } = options;
// 创建用户逻辑
}
createUser({
name: "Alice",
age: 28,
role: "admin",
department: "Engineering",
});
使用 ResizeObserver 替代 onResize
window.onresize 只能监听浏览器窗口尺寸变化，无法感知单个 DOM 元素尺寸变化。Vue3 项目应使用 ResizeObserver 监听任意 DOM 元素的尺寸变化，支持多元素、精准触发、性能更优。
错误示例
<script setup lang="ts">
const width = ref(0);
onMounted(() => {
window.onresize = () => {
const el = document.getElementById("container");
width.value = el?.offsetWidth || 0;
};
window.onresize(); // 初始化
});
</script>
<template>
<div id="container" style="width: 50%;">宽度：{{ width }}px</div>
</template>
问题
正确示例
<script setup lang="ts">
const elRef = ref<HTMLDivElement>();
const size = ref({ width: 0, height: 0 });
onMounted(() => {
const observer = new ResizeObserver((entries) => {
const rect = entries[0].contentRect;
size.value.width = rect.width;
size.value.height = rect.height;
});
observer.observe(elRef.value!);
onUnmounted(() => observer.disconnect());
});
</script>
<template>
<div ref="elRef" style="width: 50%;">
宽度：{{ size.width }}px，高度：{{ size.height }}px
</div>
</template>
TypeScript
避免在组件/逻辑中使用 any
在 Vite + TS 项目里，一旦滥用 any，类型检查形同虚设。要尽量用明确类型或 unknown（再做类型收窄）。
错误示例
function parseData(data: any) {
return JSON.parse(data);
}
const user: any = getUser();
console.log(user.name);
正确示例
function parseData(data: unknown): Record<string, unknown> {
if (typeof data === "string") {
return JSON.parse(data);
}
throw new Error("Invalid data type");
}
interface User {
name: string;
age: number;
}
const user: User = getUser();
console.log(user.name);
目前有两种情况，
- stores 中没有写类型 （旧的不补类型，新的 stores 补类型） 新接口，新枚举，新常量
使用 enum 避免硬编码
所有固定集合值（角色、状态、方向等）必须使用 TypeScript 的 enum 定义，禁止使用字符串字面量或硬编码。
错误示例：硬编码字符串
if (user.role === 'admin') { ... }
if (status === 'PENDING') { ... }
正确示例：使用 enum
enum UserRole {
Admin = 'admin',
User = 'user',
Guest = 'guest'
}
enum OrderStatus {
Pending = 'PENDING',
Shipped = 'SHIPPED',
Delivered = 'DELIVERED'
}
if (user.role === UserRole.Admin) { ... }
if (status === OrderStatus.Pending) { ... }
Props、Emits 必须类型化
在 Vue3 的 SFC 中，defineProps 和 defineEmits 必须声明类型。
错误示例
defineProps(['title', 'count'])
defineEmits(['update'])
正确示例
interface Props {
title: string
count: number
}
interface Emits {
(e: 'update', value: number): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
3.3 以上有另一种方式
泛型必须具备边界约束
使用泛型时必须加上约束，防止过宽的类型导致不安全操作。
错误示例
function getValue<T>(obj: T, key: string) {
return obj[key]
}
正确示例
function getValue<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
组合式 API 必须有返回值类型
composables API 应该明确返回值类型，方便调用处类型推断。
错误示例
export function useUser() {
const user = ref<User>()
return { user }
}
正确示例
export function useUser(): { user: Ref<User> } {
const user = ref<User>()
return { user }
}
Vue3
不要在 defineProps() 里混用类型和 runtime 校验
Vue3 允许 defineProps() 使用 runtime 声明和类型声明，但二者混用易出 bug。推荐统一使用 泛型声明类型。
错误示例
<script setup lang="ts">
defineProps({
title: String,
});
interface Props {
title: string;
}
</script>
正确示例
<script setup lang="ts">
interface Props {
title: string;
}
const props = defineProps<Props>();
</script>
类型声明统一放在 types 文件夹或模块中
全局类型或接口建议集中管理，避免散落在组件里难以维护。
错误示例
// 在多个组件里重复定义 interface User { name: string; age: number }
正确示例
src/types/user.d.ts
export interface User { name: string age: number }
在模板中使用类型提示
通过 defineExpose 和 defineEmits 的泛型参数在模板中获得类型提示。
错误示例
<template>
<button @click="emit('save', 123)">Save</button>
</template>
<script setup lang="ts">
const emit = defineEmits(["save"]);
</script>
正确示例
<script setup lang="ts">
const emit = defineEmits<{
(e: "save", id: number): void;
}>();
</script>
优先使用 <script setup> 而不是 defineComponent
Vue 3 的 <script setup> 更简洁、性能更好（编译优化），避免不必要的模板变量暴露。
错误示例
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const count = ref(0);
return { count };
},
});
</script>
正确示例
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
在模板中避免复杂逻辑表达式
模板里只做展示，不要做复杂逻辑，逻辑应移到计算属性或方法。
错误示例
<template>
<div>
{{
users
.filter((u) => u.age > 18)
.map((u) => u.name)
.join(", ")
}}
</div>
</template>
正确示例
<script setup lang="ts">
const adultNames = computed(() =>
users.value
.filter((u) => u.age > 18)
.map((u) => u.name)
.join(", ")
);
</script>
<template>
<div>{{ adultNames }}</div>
</template>
事件名统一使用 kebab-case
Vue 3 推荐自定义事件名用 kebab-case，避免与 DOM 属性冲突。
错误示例
<ChildComponent @saveData="handleSave" />
正确示例
<ChildComponent @save-data="handleSave" />
组件通信避免滥用 $emit，优先使用 props + v-model
小型数据通信用 props/v-model，大型数据或频繁通信建议使用 Pinia/Composable。
错误示例
<ChildComponent @updateValue="parentValue = $event" />
正确示例
<ChildComponent v-model="parentValue" />
避免复杂嵌套三元运算
三元表达式适合简单条件切换，若逻辑复杂或嵌套，应使用 if-else、computed 或方法代替。 在模板中，复杂三元表达式严重降低可读性，且容易遗漏分支，Review 时应强制重构
错误示例
<template>
<div>
{{ status === "loading" ? "加载中" : status === "error" ? "错误" : "完成" }}
</div>
</template>
正确示例
<script setup lang="ts">
const statusText = computed(() => {
if (status.value === "loading") return "加载中";
if (status.value === "error") return "错误";
return "完成";
});
</script>
<template>
<div>{{ statusText }}</div>
</template>
定时器必须在卸载时清理
在 Vue 组件中使用 setInterval、setTimeout、requestAnimationFrame 等定时器，必须在组件卸载（onUnmounted）时清理，否则会导致内存泄漏或意外触发逻辑
错误示例
<script setup lang="ts">
onMounted(() => {
setInterval(() => {
console.log("轮询接口");
}, 1000);
});
</script>
正确示例
<script setup lang="ts">
let timer: ReturnType<typeof setInterval>;
onMounted(() => {
timer = setInterval(() => {
console.log("轮询接口");
}, 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
</script>
IO（API 请求、文件处理等）必须做错误处理
网络请求（fetch/axios）、文件操作等 IO 行为容易失败，必须捕获异常并反馈用户，防止应用无响应或白屏
错误示例
const fetchData = async () => {
const res = await fetch("/api/data");
const data = await res.json();
console.log(data);
};
正确示例
const fetchData = async () => {
try {
const res = await fetch("/api/data");
if (!res.ok) throw new Error("请求失败");
const data = await res.json();
console.log(data);
} catch (err) {
console.error("数据请求错误:", err);
alert("网络错误，请稍后重试");
}
};
避免数据竞态（Race Condition）
当组件内多次发起异步请求或副作用操作（如用户快速切换选项），后发出的请求可能比先发出的请求先返回，导致数据状态错乱。必须通过请求标记、AbortController 或最新响应检查防止。
错误示例 具体场景：用户快速切换 Item 1 → Item 2 → Item 1，可能 Item 1 的旧请求最后返回，把数据覆盖成错误值。
<script setup lang="ts">
const selectedId = ref(1);
const data = ref(null);
watch(selectedId, async (id) => {
const res = await fetch(`/api/item/${id}`);
data.value = await res.json();
});
</script>
<template>
<select v-model="selectedId">
<option :value="1">Item 1</option>
<option :value="2">Item 2</option>
</select>
<div>{{ data }}</div>
</template>
解决思路
正确示例 1：使用请求标记（Token）
<script setup lang="ts">
const selectedId = ref(1);
const data = ref(null);
let requestToken = 0;
watch(selectedId, async (id) => {
const token = ++requestToken;
const res = await fetch(`/api/item/${id}`);
if (token !== requestToken) return; // 旧请求，丢弃
data.value = await res.json();
});
</script>
正确示例 2：使用 AbortController
<script setup lang="ts">
const selectedId = ref(1);
const data = ref(null);
let controller: AbortController;
watch(selectedId, async (id) => {
controller?.abort(); // 中断上一个请求
controller = new AbortController();
try {
const res = await fetch(`/api/item/${id}`, { signal: controller.signal });
data.value = await res.json();
} catch (err) {
if (err.name !== "AbortError") console.error(err);
}
});
</script>
正确示例 3：封装 Composable，统一竞态处理
// composables/useSafeFetch.ts
export function useSafeFetch() {
let controller: AbortController;
return async function safeFetch(url: string) {
controller?.abort();
controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });
return res.json();
};
}
<script setup lang="ts">
const { safeFetch } = useSafeFetch();
const data = ref(null);
watch(selectedId, async (id) => {
data.value = await safeFetch(`/api/item/${id}`);
});
</script>
列表渲染中不推荐使用索引作为 key
Vue 的虚拟 DOM 需要依赖 key 来准确地跟踪节点身份，保证列表渲染的高效与正确。**key** 必须唯一且稳定，通常来自数据的唯一标识字段（如数据库 ID）。避免使用数组索引 **index** 作为 **key**，除非数据列表静态且无增删排序需求。
错误示例：使用索引作为 key
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>
</template>
正确示例：使用稳定唯一标识作为 key
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
国际化
-
代码中的文案一定要做国际化处理 （比如中文正则表达式搜索检查）
-
国际化后的文案由 PM 提供，PM 不提供，使用 ChatGPT/Cursor 处理后与 PM 一起校对（拿不准找 Perry ）
-
标点符号与语言对应，比如英文中不能出现中文括号
-
新增的国际化内容设置独立命令空间或者全文检索，避免 key 冲突
-
国际化内容的 key 是英文短语，不能是中文
-
PR 的 Code Review 中涉及国际化内容必须重点 review
正确示例
export default {
'Administrator has enabled Multi-Factor Authentication (MFA)': 'El administrador ha habilitado la autenticación de múltiples factores (MFA)',
'Open your app store': 'Abre tu tienda de aplicaciones',
};
在组件中这样使用
<li>{{ t('Open your app store') }}</li>
Vue 组件设计
统一组件命名 / 文件命名策略
统一组件名采用 PascalCase（或一致 kebab-case），基础组件保留 Base 前缀，名称应全拼避免缩写，提高可维护性
错误示例
components/
myComp.vue
btn.vue
正确示例
components/
MyComponent.vue
BaseButton.vue
在组件中这样使用
<BaseButton/>
如果是 element-plus 组件库，可以使用如下的使用方式
<el-button/>
统一文件夹（目录）命名规范
项目中的所有目录名称必须遵循统一的命名风格，确保路径清晰、可预测、跨平台无大小写冲突。
错误示例：目录命名混乱
components/
UserProfile/
loginForm/
Account_details/
auth/
正确示例：统一 kebab-case
components/
user-profile/
login-form/
account-details/
auth/
TS 文件名命名
项目中的 TS 文件命名应该是小驼峰格式
错误示例
user-list.ts
正确示例
userList.ts
组件的状态与 UI 分离
在 Vue3 组件开发中，所有数据处理逻辑（如 API 请求、数据格式化、状态管理等）应从 UI 层（模板 & 样式）中分离，放入 Composable、Store、Utils。模板只负责展示，逻辑放在单独模块便于测试、复用和维护。
错误示例
<script setup lang="ts">
import { ref, onMounted } from "vue";
const users = ref([]);
const loading = ref(false);
const error = ref("");
onMounted(async () => {
loading.value = true;
try {
const res = await fetch("/api/users");
users.value = await res.json();
} catch (e) {
error.value = "加载用户失败";
} finally {
loading.value = false;
}
});
const formatName = (user) => `${user.firstName} ${user.lastName}`;
</script>
<template>
<div v-if="loading">加载中...</div>
<div v-else-if="error">{{ error }}</div>
<ul v-else>
<li v-for="user in users" :key="user.id">
{{ formatName(user) }}
</li>
</ul>
</template>
上面的示例中存在的问题
正确示例 - 数据逻辑分离到 Composable
composables/useUsers.ts
import { ref } from "vue";
export function useUsers() {
const users = ref([]);
const loading = ref(false);
const error = ref("");
const fetchUsers = async () => {
loading.value = true;
try {
const res = await fetch("/api/users");
users.value = await res.json();
} catch (e) {
error.value = "加载用户失败";
} finally {
loading.value = false;
}
};
const formatName = (user) => `${user.firstName} ${user.lastName}`;
return { users, loading, error, fetchUsers, formatName };
}
UserList.vue
<script setup lang="ts">
import { onMounted } from "vue";
import { useUsers } from "@/composables/useUsers";
const { users, loading, error, fetchUsers, formatName } = useUsers();
onMounted(fetchUsers);
</script>
<template>
<div v-if="loading">加载中...</div>
<div v-else-if="error">{{ error }}</div>
<ul v-else>
<li v-for="user in users" :key="user.id">
{{ formatName(user) }}
</li>
</ul>
</template>
正确的案例中，UI 专注展示，逻辑由 useUsers 管理、useUsers 可被其他组件复用、只需要测试 useUsers 方法就行
UI组件 vs 业务组件
UI组件（Button, Modal, Table）：无业务逻辑，仅负责样式和交互
业务组件（UserList, OrderForm）：封装具体业务逻辑，复用 UI 组件
错误示例：业务逻辑写在 UI 组件
<!-- Button.vue -->
<script setup>
const handleSaveUser = async () => {
await api.saveUser()
}
</script>
<template>
<button @click="handleSaveUser">保存</button>
</template>
正确示例：UI 组件尽量保证纯组件
<!-- Button.vue -->
<template>
<button><slot /></button>
</template>
<!-- UserForm.vue -->
<Button @click="saveUser">保存</Button>
在写业务组件的时候，利用Composition API 分离逻辑，把 API 调用、数据处理抽离到 composable 中
避免直接操作 DOM
除非必要尽量不要使用 document.querySelector 等直接操作 DOM
错误示例
onMounted(() => {
const el = document.querySelector('.btn')
el?.addEventListener('click', () => { ... })
})
正确示例
<template>
<button @click="handleClick" class="btn">Click</button>
</template>
<script setup lang="ts">
function handleClick() {
// 处理逻辑
}
</script>
单元测试
1. 单元测试应覆盖核心业务逻辑，避免测试无意义的渲染细节
测试应聚焦于组件的行为和业务逻辑，而非仅仅验证静态的 DOM 结构，避免脆弱且维护成本高的测试。
错误示例
// 测试仅验证 DOM 具体标签和类名，DOM 结构细节变动即破坏测试
test('renders exact button markup', () => {
const wrapper = mount(MyButton)
expect(wrapper.html()).toBe('<button class="btn primary">Submit</button>')
})
正确示例
// 测试按钮是否存在且包含正确文本，关注业务效果而非具体标签细节
test('renders submit button', () => {
const wrapper = mount(MyButton)
const button = wrapper.find('button')
expect(button.exists()).toBe(true)
expect(button.text()).toBe('Submit')
})
2. 使用 Vue Test Utils 的异步渲染工具时，要正确等待 nextTick
Vue3 组件中很多行为是异步更新的，测试中操作后必须调用 await nextTick() 或使用 flushPromises() 等方法，确保断言是在 DOM 更新完成后进行。
错误示例
test('click increments count', () => {
const wrapper = mount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('Count: 1') // 断言过早，失败
})
正确示例
import { nextTick } from 'vue'
test('click increments count', async () => {
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
await nextTick()
expect(wrapper.text()).toContain('Count: 1')
})
3. 事件触发测试必须确保事件正确被捕获并处理
测试组件自定义事件或原生事件时，需确保事件被正确监听，并使用 emitted() 方法断言事件触发，避免事件未触发测试通过的假象。
错误示例
test('emits submit event', () => {
const wrapper = mount(FormComponent)
wrapper.find('form').trigger('submit')
expect(wrapper.emitted('submit')).toBeTruthy() // 可能事件未触发，但断言粗略
})
正确示例
test('emits submit event once', async () => {
const wrapper = mount(FormComponent)
await wrapper.find('form').trigger('submit.prevent')
const submitEvents = wrapper.emitted('submit')
expect(submitEvents).toHaveLength(1)
})
4. 不要在测试中硬编码组件内部状态，尽量从外部输入和输出测试
单元测试应以组件的公开接口（props、事件）为测试点，避免直接访问或修改组件内部私有数据，保持测试的稳健性和解耦。
错误示例
test('increments count internally', () => {
const wrapper = mount(Counter)
wrapper.vm.count = 5
wrapper.vm.increment()
expect(wrapper.vm.count).toBe(6) // 依赖内部状态
})
正确示例
test('increments count via user interaction', async () => {
const wrapper = mount(Counter)
await wrapper.find('button.increment').trigger('click')
expect(wrapper.text()).toContain('Count: 1')
})
5. 避免在测试中使用复杂的真实 API 请求，应使用 Mock 或 Stub
测试时不应依赖外部接口的真实请求，推荐使用 jest.mock、msw、sinon 等模拟数据，保证测试的独立性和稳定性。
错误示例
test('fetches data and renders', async () => {
const wrapper = mount(DataComponent)
await wrapper.vm.fetchData() // 真实请求导致测试不稳定
expect(wrapper.text()).toContain('Data loaded')
})
正确示例
import axios from 'axios'
jest.mock('axios')
test('fetches data and renders', async () => {
axios.get.mockResolvedValue({ data: { items: ['a', 'b'] } })
const wrapper = mount(DataComponent)
await wrapper.vm.fetchData()
expect(wrapper.text()).toContain('a')
})
6. 组件依赖的异步行为应通过 Mock 异步函数进行控制
若组件依赖异步方法（如定时器、异步 API），应在测试中 Mock 这些异步行为，避免测试时间过长或不稳定。
错误示例
test('auto refresh updates data', async () => {
const wrapper = mount(AutoRefresh)
await new Promise(r => setTimeout(r, 5000)) // 测试过慢且不确定
expect(wrapper.text()).toContain('Refreshed')
})
正确示例
jest.useFakeTimers()
test('auto refresh updates data', async () => {
const wrapper = mount(AutoRefresh)
jest.advanceTimersByTime(5000)
await nextTick()
expect(wrapper.text()).toContain('Refreshed')
jest.useRealTimers()
})
7. 使用快照测试时应谨慎，避免大规模快照导致维护困难
快照测试适合对关键 UI 做稳定性检测，但不应滥用，避免包含无关紧要的 DOM 变动。
错误示例
test('renders full component snapshot', () => {
const wrapper = mount(ComplexComponent)
expect(wrapper.html()).toMatchSnapshot() // 快照过大，难维护
})
正确示例
test('renders header snapshot only', () => {
const wrapper = mount(ComplexComponent)
expect(wrapper.find('header').html()).toMatchSnapshot()
})
8. 单元测试中避免使用全局依赖，推荐注入依赖或使用 provide/inject Mock
Vue3 组件可能依赖全局插件或 provide/inject，测试时应 Mock 这些依赖，避免测试受全局状态影响。
错误示例
test('uses global i18n', () => {
const wrapper = mount(ComponentUsingI18n)
expect(wrapper.text()).toContain('Hello') // 依赖真实 i18n，环境复杂
})
正确示例
import { createI18n } from 'vue-i18n'
const i18n = createI18n({ locale: 'en', messages: { en: { hello: 'Hello' } } })
test('uses mocked i18n', () => {
const wrapper = mount(ComponentUsingI18n, {
global: { plugins: [i18n] }
})
expect(wrapper.text()).toContain('Hello')
})
登录
可以看到，无论屏幕是 1920×1080 还是 3840×2160，布局都能自动适配，而且代码里写的都是设计稿的原始像素值。