原地址：https://www.cnblogs.com/Reisentyan/p/19704971
一、 项目构建与静态资源 (public 文件夹)
在执行 npm run build 构建之后，src 目录下的所有文件都会被编译、压缩并塞进 dist 文件夹，原本的相对路径（如 ./src/assets/...）会因为文件被重命名（加上 Hash 码）而失效。
解决方案与最佳实践：
- 使用
public文件夹 ：对于不需要任何代码编译处理、直接原样提供给用户下载或展示的文件 （例如.pdf、.md文档、favicon.ico等），强烈建议放在项目根目录的public文件夹中。 - 绝对路径引用 ：在使用
public里的资源时，不需要写/public/xxx.pdf，必须直接写绝对路径/xxx.pdf。 - 底层原理 ：这是因为在执行
build时，Vite/Vue CLI 会将public文件夹里的所有内容，原封不动地直接复制到dist的根目录下。因此，开发环境和构建后的生产环境，路径表现完全一致。
二、 应对浏览器的缓存
由于单页应用（SPA）的特性，浏览器非常喜欢缓存已经访问过的页面资源。 当我们在服务器上更新了前端代码后，如果页面没有发生变化，必须使用 Ctrl + F5 （Mac 为 Cmd + Shift + R）进行强制刷新，以清除本地缓存，获取最新渲染的 DOM。
三、 Git 强制拉取（处理冲突）
当服务器拉取新代码（git pull）时，如果在此之前对服务器本地文件进行了直接修改，Git 会因为发现"当前代码和远程仓库不匹配"而中止合并，以防覆盖你的本地修改。
如果你确定不需要保留本地的修改，可以使用以下命令丢弃本地更改并强制覆盖：
Bash
# 1. 丢弃特定文件的本地修改，将其恢复到未修改状态
git restore [被修改的特定文件路径]
# 2. 重新拉取远程仓库的最新代码
git pull(注：如果不确定本地修改还有没有用，推荐使用 git stash 暂存修改，然后再 git pull。)
四、 JS 核心语法扫盲
由于平时写 C++ 较多，JavaScript 的一些特殊语法容易混淆。这里以项目中的真实代码进行拆解：
TypeScript
<script setup lang="ts">
import { ref } from 'vue';
defineOptions({ name: 'BodyPage' });
// 使用 activeTab 来记录当前点击了哪个按钮。null 表示全都没点（收起状态）
const activeTab = ref<string | null>(null);
// 切换面板的函数：如果点击的是当前已打开的按钮，就收起；否则打开新面板
const toggleTab = (tabName: string) => {
if (activeTab.value === tabName) {
activeTab.value = null;
} else {
activeTab.value = tabName;
}
};
</script>1. Vue 的响应式魔法：ref
ref 是 Vue 里极其核心的 API。它可以把一个普通的 JS 变量包装成一个"响应式"变量。当它的 .value 发生改变时，Vue 会立即察觉并自动刷新页面上用到它的部分（类似于游戏引擎里的实时帧渲染机制）。
2. 组件命名：defineOptions
defineOptions({ name: 'BodyPage' })：在 <script setup> 语法糖中，用于给当前组件在 Vue 开发者工具或调试栈中显式命名。
3. const 与 C++ 的核心区别
const activeTab = ref<string | null>(null); 这行代码声明了一个常量。 在 JS 中，const 与 C++ 的行为有显著区别：
- 当指向基础类型（如数字、纯字符串）时：完全不可修改，和 C++ 一样。
- 当指向复杂类型（如对象、数组，以及这里的
ref对象）时 ：const只锁定了该对象在内存中的地址，但地址内部的属性（如.value）是可以随意修改的 。这就解释了为什么我们可以用const声明activeTab，却能在下方函数中修改activeTab.value。
4. 函数是一等公民与箭头函数 =>
在 JS 的设计中，函数被赋予了极高的地位，它可以像普通数据一样赋值给变量。
=号：将右侧的整个函数逻辑，作为一个值赋给toggleTab变量。=>符号（箭头函数）：这是替代老旧function关键字的语法糖。可以直观地理解为：(输入参数) => { 执行逻辑 }。
五、 Vue Template (模板) 语法拆解
Vue 赋予了 HTML 标签动态执行逻辑的"超能力"。
1. 动态 Class 绑定 (:class)
HTML
<button
class="action-btn"
:class="{ active: activeTab === 'notice' }"
@click="toggleTab('notice')"
>class="action-btn"：这是静态的默认皮肤，永远存在。:class="{ active: ... }"：前缀的冒号:是v-bind:的简写，意思是告诉 Vue："后面引号里的内容不是普通字符串，而是 JS 逻辑表达式"。- 执行逻辑 ：大括号内是
{ 样式名: 布尔值判断 }。如果判断条件为true，Vue 会将active样式追加/合并 到原本的 class 列表中；如果为false，则移除。
2. 胡子语法 (Mustache)
HTML
<span class="btn-text">公告</span>
<span class="btn-icon">{{ activeTab === 'notice' ? '−' : '+' }}</span>双大括号 {``{ }} 在 Vue 中被称为胡子语法（文本插值）。它相当于在 HTML 页面上开了一个"天窗"，允许我们直接在页面上输出 JS 变量的值，或执行简单的单行逻辑（如上文使用的三元运算符）。
3. 显示与隐藏指令 (v-show)
HTML
<div class="expanded-panel" v-show="activeTab !== null">
<div v-show="activeTab === 'notice'" class="tab-content">
</div>
</div>v-show是 Vue 的专属指令。它的判断标准不是"是否为空"，而是"表达式的计算结果是否为 True（真）"。- 底层原理 ：如果
v-show里的条件成立，元素正常显示；如果条件不成立，Vue 会在底层自动给该 HTML 元素加上 CSS 样式display: none;从而让其瞬间隐身，全程无需手动操作 DOM。