干我们这行的人每天打交道最多的就是这几个名字Html、CSS、Flex、Vue、Ajax、ElementPlus、Vue Router。前阵子在技术群里看到有人把这一串列出来求超全总结我翻了翻自己这两年带新人整理的笔记发现这些东西组合起来恰好就是一个现代前端工程师的吃饭家伙。这篇内容不是教科书更像是我把平常踩过的坑、写过的代码、调过的样式拿出来跟你一条条捋一遍。新入行的朋友可以按顺序啃工作一两年的同学也能当补充材料看搞明白很多让你困惑的为什么。很多人在学习时容易犯一个毛病每一项技术都单独看结果一到项目里就不知道怎么串起来。HTML搭骨架CSS上妆Flex摆位置Vue管状态Ajax取数据ElementPlus提供现成组件Vue Router负责页面跳转——它们天生就是一套组合拳。下面我从头到尾把这些内容拆给你看。1. HTML与CSS先把地基打扎实1.1 文档头与语义化doctype、lang和meta为什么不能省刚学前端的时候谁也不爱看编辑器自动生成的那几行代码经常一上来就清空直接开写。后来接手的项目多了才慢慢意识到那个看起来废话连篇的文档头其实是页面表现正常的前提。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title页面标题/title /head /html!doctype html的作用是告诉浏览器按现代标准模式解析这个页面只要少了它浏览器就可能进入怪异模式盒模型的宽高计算方式说变就变写好的CSS布局直接崩给你看。html langzh-cn这个属性表面人畜无害实际上影响屏幕阅读器的发音、浏览器的翻译建议甚至页面在搜索引擎里的语种识别。meta charsetutf-8则是避免中文乱码的底线配置文件名带中文、内容里出现特殊字符时它的存在能让一切稳定下来。再说语义化标签。很多新手喜欢清一色写下div也不是不行但页面的结构会非常难维护。正确做法是顶部用header底部用footer主导航用nav文章主体用article与主体内容关联的辅助信息用aside。这样做的好处有两个。一是SEO——搜索引擎爬虫对语义化标签的权重判断更友好同等内容下语义化页面的抓取质量更高。二是可访问性——屏幕阅读器在遍历页面时能根据标签快速跳过导航、直达正文。我们实战中写页面通常先画一个结构草图把整体分块成顶栏、banner、内容区、侧边栏、底部再往每一个区块里填语义标签和实际内容不急着写样式先把结构搭对。这一步省下来的时间后面调布局的时候能明显感觉到。实践心得如果做一个纯落地页我会把标签精简到main、section、footer三个就够过度使用语义化标签反而会让嵌套层次变深。关键看页面复杂度千万别教条。1.2 CSS3的立体空间和动态效果rotateY、translateZ、涟漪光圈CSS3最容易被低估的能力是它不需要写一行JavaScript也能实现看起来很高级的视觉效果。我接过的很多需求客户看到的原型是设计师用C4D等软件做的动态效果落到前端时用纯CSS也能还原七八成。拿热搜里反复出现的transform: rotateY(60deg) translateZ(300px)来说很多人第一次看到这段代码都会懵这出来的是什么样子这里面的关键点是变换顺序。CSS的变换是按你写的顺序从右往左逐层执行的——先执行translateZ(300px)把元素沿Z轴向前推300像素然后再执行rotateY(60deg)绕Y轴旋转60度。如果顺序反过来写旋转先发生位移的参考坐标系就变了呈现的效果完全不一样。Z轴正方向是朝屏幕外负方向是朝屏幕内。所以translateZ(300px)让元素离眼睛更近配合适当的光影和透视perspective能做出类似卡片悬浮、3D相册的效果。正负判断的核心规则其实很简单Y轴旋转角度的正负决定元素哪一面朝向你Z轴位移的正负决定元素是靠近你还是远离你。零基础的读者可以这样类比你面前站一个人rotateY(0deg) 是他正面对着你rotateY(90deg) 是他侧身向右转90度只剩侧脸rotateY(-90deg) 是向左转90度rotateY(180deg) 则是背对着你。由这个角度再配合translateZ前后移动空间感立刻就出来了。如果配合动画还能加上涟漪光圈扩散这类效果。所谓涟漪光圈本质是用animation驱动一个圆形的box-shadow向外扩散、同时透明度逐渐降为0连续挂好几个时间上错开的元素视觉上就像水面的波纹一圈圈荡开。代码如下.ripple { width: 100px; height: 100px; border-radius: 50%; border: 2px solid rgba(64, 158, 255, 0.8); animation: ripple 2s ease-out infinite; } keyframes ripple { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }一个容易忽略的细节是动画要平滑最好配合transform-origin控制缩放中心点大多数情况下默认的center center就够用。但如果想做按钮点击处的涟漪把原点设置到点击坐标附近整体质感会提升很多。CSS动画的性能方面动画属性尽量只使用transform和opacity避开width、height、top、left这些会触发布局重排的属性。实测下来在大列表页面里用后者做动画低端移动设备会明显掉帧改用transform之后流畅度立刻回来了。1.3 日常高频CSS操作换行省略、鼠标移入、文本位置、原子化CSS做的页面多了会发现大部分CSS问题都在重复几个固定场景。文本溢出的处理是前端面试中出镜率奇高的问题。单行省略大家都会三件套一摆就完事.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行省略则需要-webkit-line-clamp.multiline-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这里有个坑-webkit-line-clamp必须配合display: -webkit-box才能生效而且对老版Firefox的支持不友好。如果项目里有大量这类需求不如封装成工具类全局统一使用。换行这块还要注意中文和英文的区别英文字符串默认不换行需要加word-break: break-all或者overflow-wrap: break-word中文字符则天然可以换行通常不用额外处理。鼠标移入事件是另一座高频坑。新手刚学交互时喜欢直接写JavaScript的mouseover、mouseout但纯CSS用:hover就能解决大部分悬浮显现、位移、变色的场景。比如一个图标按钮默认状态背景为透明鼠标移入时背景变成浅灰、图标稍微上移2像素只需要两行CSS.icon-btn { transition: background 0.2s, transform 0.2s; } .icon-btn:hover { background: #f0f2f5; transform: translateY(-2px); }不需要写任何事件监听代码渲染进程的负担也更小页面挂几十个按钮都不卡。调整容器里的文本位置很多人喜欢用padding硬怼导致不同字号下偏差明显。正确思路是区分场景单行文本的水平对齐看text-align垂直位置看line-height让父容器高度和行高一致即可多行文本的纵向居中则用flexalign-items: center更稳妥。小字号和按钮内的文本加text-align: center配合固定的line-height基本能搞定百分之九十的问题。另外我想聊聊原子化CSS。现在的项目里我越来越倾向于给团队定一套基础的原子类比如.text-center、.flex、.items-center、.mt-16再配合Tailwind这类工具类库在构建时生成最终样式。好处是写页面的样式代码数量大幅减少坏处是HTML标签上会堆一堆类名牺牲一点可读性。具体取舍没有标准答案但如果追求新人上手快、页面产出高工具类方案在团队协作中确实有不可忽视的优势。2. Flex布局一套拳法打天下2.1 Flex盒子的核心机制与关键属性在Flexbox出现以前前端做居中要靠text-align、line-height、position左算右算一不留神就歪掉。Flex布局的核心思想是给容器一根轴用轴来管理子项的排布方向、对齐方式和伸缩比例它彻底改变了我们写布局的方式。一个元素只要加上display: flex它的直接子元素就会沿着主轴排成一行。主轴的默认方向是水平向左但你可以用flex-direction: row | column控制它是横着排还是竖着排再配合换行属性flex-wrap: wrap让子元素超出容器时自动折行。这两者的组合flex-flow: row wrap是日常最常用的简写。对齐方面记住两个属性就够了justify-content控制所有子项在主轴上的分布方式align-items控制它们在交叉轴垂直方向上的对齐方式。水平垂直居中这个老难题在Flex下只需要三行.center { display: flex; justify-content: center; align-items: center; }如果你做过一段时间布局会发现这个三行组合是最高频代码没有之一。子项自己的伸缩规则由flex-grow、flex-shrink、flex-basis三个属性决定。flex-basis定义子项的初始尺寸flex-grow定义空间富余时子项按什么比例变大flex-shrink定义空间不足时子项按什么比例缩小。把它们简写成flex: 1就等于flex-grow: 1; flex-shrink: 1; flex-basis: 0%意思是尽可能占满剩余空间。2.2 真实项目的Flex布局实战Flex在实际项目里最常见的几个场景我直接给出可复用的套路。第一个是顶部导航栏。左侧放Logo中间放菜单右侧放操作按钮核心需求是左侧靠左、右侧靠右、菜单均匀分布。实现方式是把导航容器设为display: flex; align-items: center左侧Logo不伸缩菜单区域用flex: 1占据剩余空间右侧按钮再固定宽度。这种结构无论屏幕多宽菜单都能自动适配不会挤压两端内容。第二个是卡片列表。后台管理系统里最常见的布局是卡片们一行三列、超出一行自动换行。用Flex实现起来很直观.card-list { display: flex; flex-wrap: wrap; gap: 16px; } .card { width: calc((100% - 32px) / 3); }gap这个属性极大解放了生产力放在以前你得给每个卡片写margin再处理第一列的margin-left归零现在一行代码全都解决。需要留意的是gap对旧浏览器兼容性一般如果用户环境较老还是得退回margin的方案。第三个是圣杯/双飞翼布局中的底部贴合。页面内容较少时footer想固定在视口底部内容较多时正常跟随滚动。一个很实用的Flex方案是把整个页面容器设置成display: flex; min-height: 100vh; flex-direction: column中间内容区flex: 1footer自然被顶到底部。这个方案比传统的position: sticky更稳不会出现滚动穿透或贴合失败的问题。2.3 我踩过的Flex布局坑第一个坑是flex子项里的文本溢出。当你给一个子项设置flex: 1且内部有长文本时你会发现该子项会把容器撑爆导致整体布局超出。解决办法是给它加一个min-width: 0让flex子项允许自身内容溢出压缩。这个属性在Flex布局里几乎是个万金油遇到宽度不听话的地方可以先加上它。第二个坑是align-self和align-items的混用。很多新手只知道容器的统一对齐但想让某一个子项单独靠底或靠顶时不知道还有align-self: flex-end这种子项上的属性。它跟align-items的优先级关系是子项自身属性覆盖容器属性两者不冲突。第三个坑是Flex的等高问题。默认情况下同一行的Flex子项高度是自动拉伸到最高的那个这在很多场景是好事但如果你想让某几个子项保持固有高度需要给它们设置align-self: flex-start或固定height。此外flex-basis和width在主轴为row时容易让人混淆记住一个原则flex-basis优先级高于width主轴上有flex-basis优先用它。项目里出现过好几回设置了宽度的左侧栏被Flex压缩掉的情况排查半天最后发现是flex-basis: auto配合较大的flex-shrink在起作用。3. Vue 3从环境搭建到完整页面3.1 Vue安装与环境配置一分钟检查半小时装好不少人一开始学Vue就卡在环境搭建上报错一个接一个。以现在主流的方式为例我们使用Vite脚手架创建项目。首先确认本机的Node.js版本建议用LTS版本。然后执行npm create vitelatest my-app -- --template vue cd my-app npm install npm run dev如果你的网络环境偏慢可以把npm默认源切换为国内镜像npm config set registry https://registry.npmmirror.com这里提一个容易犯的错不要用编辑器自带的运行按钮去启动Vite很多VSCode插件直接调用npm run dev时会走错终端路径还是老老实实在终端里敲命令。装完之后项目结构里最重要的文件是main.js和App.vue。main.js是入口所有插件、路由、状态管理都在这里注册App.vue是根组件页面的整体骨架在这里绘制。用VSCode做Vue开发必装的两个插件是Volar和Vue VSCode Snippets。注意从2023年起Vue官方推荐用Volar取代VeturVetur已经进入维护模式在新版本Vue3项目里用它会有各种类型报错。装完Volar后在VSCode命令面板里选择Select TypeScript version并指向项目下的node_modules/typescript类型提示才能正常工作这个坑让很多人百思不解。如果做的是手机端的Vue项目记住一个常识Vue本身并不区分PC还是手机它只是运行在浏览器里的UI框架。想用Vue开发手机APP可以借助uni-app这类跨端框架它底层仍然编译成Vue组件同时输出iOS、Android、小程序等多端产物。VSCode里写好页面代码手机扫码预览、一键云打包流程比传统Android/iOS原生开发顺滑得多。3.2 Vue模板语法与样式处理的核心细节Vue的模板语法学习路径非常清晰高频内容就这几样文本插值{{ }}、属性绑定v-bind可简写为:、事件绑定v-on可简写为、双向绑定v-model、条件渲染v-if/v-show、循环列表v-for。template div h1{{ title }}/h1 input v-modeltitle / button clickhandleAdd :disabledloading添加/button ul li v-foritem in list :keyitem.id{{ item.name }}/li /ul /div /templatev-if和v-show的区别很多人到现在还犯浑。v-if是真正的条件渲染条件为假时元素根本不生成对应还有v-else、v-else-ifv-show只是通过display: none隐藏了元素DOM节点始终存在。性能上频繁切换用v-show更经济因为它没有创建和销毁DOM的开销首次渲染条件大概率为假且代价高的组件用v-if更省。这个选择不是玄学是要结合场景算的。循环里的:key也不是随便给的。它帮助Vue的虚拟DOM精准辨识哪个节点变了、哪个需要复用。给:key赋值时能用id就不用index因为基于索引的key在数组头部插入或删除元素时会导致列表项的状态错乱。我实际接手过一个bug列表项内部有输入框用户在第一行输入内容后在第二行追加一条数据第一行的内容就跑到第三行去了罪魁祸首就是用了index当key。样式处理方面Vue组件默认是全局样式如果你写的style没有加scoped组件内的类名可能污染其他组件。给style加上scoped属性后Vue会为当前组件的所有元素生成一个唯一ID选择器做到样式隔离。但注意scoped下如果使用:deep()可以穿透到子组件内部修改样式这在覆盖第三方组件库样式时几乎是必用的技能。还有一类需求是动态切换主题比如点击按钮改变按钮文字颜色直接用:class或:style绑定即可Vue在渲染时会智能合并样式不会把所有class重置。3.3 组件通信、路由与DevTools调试Vue的组件化思想简单说就是把页面拆成可以复用的积木。父组件把数据通过props传给子组件子组件通过$emit把事件抛回父组件这是最基础的单向数据流规范。很多新手一开始就想用全局状态Vuex/Pinia去解决问题其实组件之间的直系通信用props/emit就够了。跨多层级的共享Vue 3里可以用provide和inject一层注入后代组件随时取用省掉逐层搬运props的累活。路由这块单独在第五章展开。这里先提一句装Vue Router时不要手写HTML引入方式直接在创建项目后执行npm install vue-router4在main.js里app.use(router)注册。路由配置文件的编写方式我在后面给出完整示例。调试工具是必备品。Vue DevTools插件是浏览器端检查Vue组件状态的法宝它能在页面上直接看到每个组件的data、computed、props、events以及路由信息还可以从时间旅行式的调试面板里回放状态变化。如果你用的是Chrome去官方Chrome商店搜索Vue DevTools安装版本选Vue3对应的版本Firefox用户同样有对应扩展。装好之后即便是在普通浏览器页面里Vue应用的调试tab会自动出现不用额外配置。我在实际开发中还有一个偏好养成写console.log不如养成看DevTools的习惯。因为Vue的响应式数据在控制台里打印出来的引用关系往往看得到但摸不清直接在DevTools的Components面板里右键选中某个组件能实时看到它监听到的所有数据源排查响应式失效的问题效率高出好几倍。4. Ajax与异步通信数据交互的核心4.1 同步和异步到底差在哪Ajax全称是Asynchronous JavaScript and XML重点就在异步两个字。很多初学者分不清同步和异步我用一个排队买奶茶的类比同步请求像是你去柜台点单点完之后你站在原地一直等着奶茶做好才走期间什么都干不了异步请求像是你在小程序上点单下单之后该干嘛干嘛等到出餐通知到了再去取。浏览器的JavaScript是单线程语言如果请求都用同步方式页面会卡死在等待响应那一刻用户的滚动、点击、输入任何一个动作都得不到响应。所以Ajax请求在默认情况下是异步的这也是绝大多数业务场景的正确选择。那什么时候需要用同步呢坦白说现在越来越少。早期开发中有极少数场景需要同步等待请求返回后才能继续执行后续逻辑但这类写法容易造成页面无响应已经被各种交互改良替代了。在axios里如果非要用同步可以传async: false但不建议我在实际项目中从来没这么写过。4.2 请求编码、参数赋值与常见问题Ajax的实现方式经历了从XMLHttpRequest到fetch再到axios的演进现在的主流做法是直接用axios。原因很简单它封装好了拦截器、超时处理、请求取消、JSON序列化等大量细节代码量少一半错误处理还更清晰。axios里最容易踩的坑之一是编码格式。默认情况下axios会把Content-Type设成application/json;charsetutf-8请求体自动被序列化成JSON字符串。但如果你往一个表单接口发请求后端接口参数是接收application/x-www-form-urlencoded格式的直接传对象就会收不到参数。解决办法是先转成URLSearchParams格式import axios from axios; const params new URLSearchParams(); params.append(name, 张三); params.append(age, 18); axios.post(/api/user, params, { headers: { Content-Type: application/x-www-form-urlencoded } }).then(response { console.log(response.data); }).catch(error { console.error(error); });给Ajax请求参数赋值的另一个常见场景是GET请求拼接查询字符串。很多人喜欢手写一个个?keyvaluekeyvalue一旦参数多起来极易出错和遗漏。合理做法是把参数对象交给axios的params字段它会自动拼接并编码axios.get(/api/list, { params: { page: 1, keyword: 前端, status: active } });项目中还会遇到请求里头显式要求设置charset的情况特别是对接老后端或者需要下载文件流时。只要在请求头里声明Content-Type: text/plain;charsetUTF-8或单独设置responseType: blobaxios都能处理好。这个细节网上讨论得不多但在实际对接中遇到中文乱码时优先检查请求头里的charset设置几乎总是一找一个准。4.3 从流媒体播放到桌面端Ajax能力的延伸提到流媒体热搜词里有vue播放m3u8这个需求估摸是有人想在Vue项目里实现HLS视频播放。m3u8是苹果制定的流媒体协议文件格式里面存放的是分片视频文件的地址列表播放器拿到它之后会按顺序拉取一个个小片段并连续播放。前端播放m3u8的成熟方案有两个video.js配videojs-contrib-hls或者轻量一点的hls.js。两者都是库直接安装引入即可npm install hls.js然后在Vue组件基于video标签封装一个播放器template video idvideo controls muted autoplay/video /template script setup import Hls from hls.js; import { onMounted } from vue; onMounted(() { const video document.getElementById(video); const url https://example.com/playlist.m3u8; if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(url); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () { video.play(); }); } }); /script另一个有意思的提问是Electron主渲染进程IPC通信和Vue有关系吗。答案很直接没有直接关系。Electron里有两个进程主进程负责系统窗口、菜单、原生能力调用渲染进程负责页面UI展示。Vue只运行在渲染进程里它管的是界面的组织。IPC是Electron在不同进程间传递消息的桥梁Vue组件里可以通过系统API如window.electronAPI.xxx触发这些消息但Vue本身的响应式机制根本不知道IPC的存在。把这两件事关到一个盒子里想就越学越清晰了。5. ElementPlus与Vue Router组件和路由的落地配合5.1 ElementPlus安装与常用组件实战一个后台管理系统如果从头手写表格、表单、弹窗、消息提示工作量至少翻五倍。ElementPlus就是为这种场景准备的高质量组件库它基于Vue 3和TypeScript构建内置了大量开箱即用的中后台组件。中文官网的文档质量相当不错连组件源码和设计规范都开放你可以理解成前端界的高质量乐高套装。安装方式极简npm install element-plus在main.js里全局注册import { createApp } from vue; import ElementPlus from element-plus; import element-plus/dist/index.css; import App from ./App.vue; const app createApp(App); app.use(ElementPlus); app.mount(#app);全局注册的好处是起步快代价是打包体积偏大。项目上了规模后最好改成按需自动导入用官方推荐的unplugin-auto-import和unplugin-vue-components插件构建时会自动把用到的组件单独打包进输出文件体积能缩减将近一半。ElementPlus最常用的组件我按频率排个序el-table、el-form、el-dialog、el-select、el-date-picker、el-message。写表格时有个容易把新人绕晕的地方el-table配置列的方式不是一个个写死而是通过:data传入数组再用el-table-column的prop字段绑定数据项里的键。如果表格列里有自定义按钮或图片配合template插槽写覆盖模板即可不熟悉slot的会在这里卡很久。表单则是el-form配el-form-item每个表单项绑定prop与rules校验规则提交时先调用formRef.validate()通过后再发请求这套流程是所有后台管理系统的通用标答。样式定制方面ElementPlus用的是CSS变量体系你可以在全局样式中覆盖主色调:root { --el-color-primary: #409eff; }如果想要更彻底的品牌定制推荐用SCSS变量覆盖后重新编译但小项目直接用上述方式替换CSS变量就够了低成本见效快。记得我看过很多新人在检查完ElementPlus文档后仍然纠结怎么改主题色其实用浏览器把组件上的样式检查出来找到对应的CSS变量直接替换是最快的路径。5.2 Vue Router路由参数传递与守卫Vue Router是Vue生态里的官方路由方案核心价值在于不经刷新页面就能实现视图切换。它本质上是监听URL的hash变化或history模式下的路径变化再把对应的组件渲染到router-view里。安装配置方式我在3.3节提过这里重点说路由参数传递。路由传参常见的有两类query方式和params方式。query方式长这样router.push({ path: /detail, query: { id: 1 } });跳转后页面上可以通过route.query.id拿到1。它的特点是参数会出现在URL里可分享、可刷新不丢。params方式分两种使用场景。如果传参对象不要求出现在URL中从Vue 4开始处理的细节有点多稳定性欠佳我通常更推荐把参数放在sessionStorage或者状态管理库里再结合query传一个标识这样既避免刷新丢失又不暴露敏感信息。如果是用动态路由段路径本身携带参数// 路由配置 { path: /detail/:id, component: Detail } // 跳转 router.push({ name: Detail, params: { id: 1 } });这样页面组件里通过route.params.id读取就是最标准的路由参数实践。路由守卫是另一个核心技能。它解决某些页面必须在登录后才能访问这类的权限问题。最常用的是全局前置守卫beforeEach在每次路由跳转前执行router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next(/login); } else { next(); } });新手使用路由守卫时最常犯的错误是忘记调用next()导致跳转戛然而止。需要记住在守卫内部必须有且仅有一次next被调用或返回一个具体的路由地址否则页面会陷入永久空白。守卫执行顺序也要心里有数全局前置守卫 - 路由独享守卫 - 组件内守卫逐层递进。5.3 多页面打包、富文本转换与HTML邮件很多业务场景下SPA还不是全部需求你可能需要把多个独立页面打包成一个产物。这种打包多个HTML的需求很常见。Vite下多页面应用MPA的配置方式是在vite.config.js的build.rollupOptions.input里声明多个HTML入口import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], build: { rollupOptions: { input: { main: index.html, admin: admin.html, mobile: mobile.html } } } });这样执行npm run build之后dist目录下会生成多个HTML文件每个文件都对应一个独立可打开的页面。使用这种模式时要注意公共资源路径最好都设置为相对路径否则在子路径部署时静态资源404。html转为md的需求通常和富文本编辑器的内容清洗有关。WYSIWYG编辑器输出的HTML要转成Markdown最直接的方式是用turndown这个库它把HTML解析成语法树再重新序列化成Markdown基本能还原常见标题、段落、列表、代码块。反过来markdown转HTML则用marked或markdown-it。这套组合在博客系统、文档站、工单系统的前端里几乎人人都在用值得收藏。再聊一下HTML邮件。邮件客户端对HTML的解析能力停留在十年前的水平不能用Flex布局、不能有JavaScript、外部样式几乎全部失效样式只能用内联。所以做HTML邮件模板要遵守三条铁律第一布局用table嵌套table别想着用DIVCSS第二所有样式写在标签的style属性里第三图片地址必须用绝对路径因为邮件客户端里相对路径无效第四字体尽量用邮件系统内置的通用字体族类似微软雅黑、Arial、Tahoma不要依赖自定义字体加载。这套规则出来后我做的营销邮件在各大主流邮箱客户端的兼容性明显提升也验证了没有通用标准时先查兼容性的工作习惯才是硬道理。Vue Router和ElementPlus这两兄弟配合起来相当默契。后台页面的大致套路是路由表里配置好菜单和页面的映射关系页面里用ElementPlus的el-menu渲染侧边栏菜单的点击事件触发router.push路由守卫拦截未登录的跳转。前端新手刚开始做这种系统时容易把大量逻辑堆在单文件里踩坑多了就会发现把权限校验、菜单读取、路由表生成这三块拆成独立模块后面的维护体验会舒服得多。个人实操中的一些体会技术学得越多越觉得项目驱动才是掌握前端最快的路径。很多知识点单看很分散但当你亲手把一个后台管理系统从零写到上线流程里自然就把HTML、CSS、Flex、Vue、Ajax、ElementPlus、Vue Router全都串起来了。我见过不少朋友在语法细节上死磕比如纠结某个CSS属性在极端情况下的表现、某个API的底层实现这些在初期性价比并不高。我个人的建议是先用一个最小的目标把所有链路打通就做一个带登录、表格、增删改查、路由跳转的中台页面。遇到样式就查CSS文档遇到数据交互就用axios遇到布局优先Flex遇到组件需求就翻ElementPlus。整个项目跑通之后再回头读官方文档查漏补缺很多东西自然就理解了。最后再分享一个小技巧给自己建一个常用代码片段仓库按照页面骨架、列表页、表单页、图表页、路由配置分类存放写代码时直接复制改参数比从零敲效率高得多。这套方法帮我带过好几个新人上手速度普遍比照着视频教程边看边写快。
前端技术栈实战：HTML、Flex、Vue与ElementPlus组合拳详解
干我们这行的人每天打交道最多的就是这几个名字Html、CSS、Flex、Vue、Ajax、ElementPlus、Vue Router。前阵子在技术群里看到有人把这一串列出来求超全总结我翻了翻自己这两年带新人整理的笔记发现这些东西组合起来恰好就是一个现代前端工程师的吃饭家伙。这篇内容不是教科书更像是我把平常踩过的坑、写过的代码、调过的样式拿出来跟你一条条捋一遍。新入行的朋友可以按顺序啃工作一两年的同学也能当补充材料看搞明白很多让你困惑的为什么。很多人在学习时容易犯一个毛病每一项技术都单独看结果一到项目里就不知道怎么串起来。HTML搭骨架CSS上妆Flex摆位置Vue管状态Ajax取数据ElementPlus提供现成组件Vue Router负责页面跳转——它们天生就是一套组合拳。下面我从头到尾把这些内容拆给你看。1. HTML与CSS先把地基打扎实1.1 文档头与语义化doctype、lang和meta为什么不能省刚学前端的时候谁也不爱看编辑器自动生成的那几行代码经常一上来就清空直接开写。后来接手的项目多了才慢慢意识到那个看起来废话连篇的文档头其实是页面表现正常的前提。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title页面标题/title /head /html!doctype html的作用是告诉浏览器按现代标准模式解析这个页面只要少了它浏览器就可能进入怪异模式盒模型的宽高计算方式说变就变写好的CSS布局直接崩给你看。html langzh-cn这个属性表面人畜无害实际上影响屏幕阅读器的发音、浏览器的翻译建议甚至页面在搜索引擎里的语种识别。meta charsetutf-8则是避免中文乱码的底线配置文件名带中文、内容里出现特殊字符时它的存在能让一切稳定下来。再说语义化标签。很多新手喜欢清一色写下div也不是不行但页面的结构会非常难维护。正确做法是顶部用header底部用footer主导航用nav文章主体用article与主体内容关联的辅助信息用aside。这样做的好处有两个。一是SEO——搜索引擎爬虫对语义化标签的权重判断更友好同等内容下语义化页面的抓取质量更高。二是可访问性——屏幕阅读器在遍历页面时能根据标签快速跳过导航、直达正文。我们实战中写页面通常先画一个结构草图把整体分块成顶栏、banner、内容区、侧边栏、底部再往每一个区块里填语义标签和实际内容不急着写样式先把结构搭对。这一步省下来的时间后面调布局的时候能明显感觉到。实践心得如果做一个纯落地页我会把标签精简到main、section、footer三个就够过度使用语义化标签反而会让嵌套层次变深。关键看页面复杂度千万别教条。1.2 CSS3的立体空间和动态效果rotateY、translateZ、涟漪光圈CSS3最容易被低估的能力是它不需要写一行JavaScript也能实现看起来很高级的视觉效果。我接过的很多需求客户看到的原型是设计师用C4D等软件做的动态效果落到前端时用纯CSS也能还原七八成。拿热搜里反复出现的transform: rotateY(60deg) translateZ(300px)来说很多人第一次看到这段代码都会懵这出来的是什么样子这里面的关键点是变换顺序。CSS的变换是按你写的顺序从右往左逐层执行的——先执行translateZ(300px)把元素沿Z轴向前推300像素然后再执行rotateY(60deg)绕Y轴旋转60度。如果顺序反过来写旋转先发生位移的参考坐标系就变了呈现的效果完全不一样。Z轴正方向是朝屏幕外负方向是朝屏幕内。所以translateZ(300px)让元素离眼睛更近配合适当的光影和透视perspective能做出类似卡片悬浮、3D相册的效果。正负判断的核心规则其实很简单Y轴旋转角度的正负决定元素哪一面朝向你Z轴位移的正负决定元素是靠近你还是远离你。零基础的读者可以这样类比你面前站一个人rotateY(0deg) 是他正面对着你rotateY(90deg) 是他侧身向右转90度只剩侧脸rotateY(-90deg) 是向左转90度rotateY(180deg) 则是背对着你。由这个角度再配合translateZ前后移动空间感立刻就出来了。如果配合动画还能加上涟漪光圈扩散这类效果。所谓涟漪光圈本质是用animation驱动一个圆形的box-shadow向外扩散、同时透明度逐渐降为0连续挂好几个时间上错开的元素视觉上就像水面的波纹一圈圈荡开。代码如下.ripple { width: 100px; height: 100px; border-radius: 50%; border: 2px solid rgba(64, 158, 255, 0.8); animation: ripple 2s ease-out infinite; } keyframes ripple { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }一个容易忽略的细节是动画要平滑最好配合transform-origin控制缩放中心点大多数情况下默认的center center就够用。但如果想做按钮点击处的涟漪把原点设置到点击坐标附近整体质感会提升很多。CSS动画的性能方面动画属性尽量只使用transform和opacity避开width、height、top、left这些会触发布局重排的属性。实测下来在大列表页面里用后者做动画低端移动设备会明显掉帧改用transform之后流畅度立刻回来了。1.3 日常高频CSS操作换行省略、鼠标移入、文本位置、原子化CSS做的页面多了会发现大部分CSS问题都在重复几个固定场景。文本溢出的处理是前端面试中出镜率奇高的问题。单行省略大家都会三件套一摆就完事.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行省略则需要-webkit-line-clamp.multiline-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这里有个坑-webkit-line-clamp必须配合display: -webkit-box才能生效而且对老版Firefox的支持不友好。如果项目里有大量这类需求不如封装成工具类全局统一使用。换行这块还要注意中文和英文的区别英文字符串默认不换行需要加word-break: break-all或者overflow-wrap: break-word中文字符则天然可以换行通常不用额外处理。鼠标移入事件是另一座高频坑。新手刚学交互时喜欢直接写JavaScript的mouseover、mouseout但纯CSS用:hover就能解决大部分悬浮显现、位移、变色的场景。比如一个图标按钮默认状态背景为透明鼠标移入时背景变成浅灰、图标稍微上移2像素只需要两行CSS.icon-btn { transition: background 0.2s, transform 0.2s; } .icon-btn:hover { background: #f0f2f5; transform: translateY(-2px); }不需要写任何事件监听代码渲染进程的负担也更小页面挂几十个按钮都不卡。调整容器里的文本位置很多人喜欢用padding硬怼导致不同字号下偏差明显。正确思路是区分场景单行文本的水平对齐看text-align垂直位置看line-height让父容器高度和行高一致即可多行文本的纵向居中则用flexalign-items: center更稳妥。小字号和按钮内的文本加text-align: center配合固定的line-height基本能搞定百分之九十的问题。另外我想聊聊原子化CSS。现在的项目里我越来越倾向于给团队定一套基础的原子类比如.text-center、.flex、.items-center、.mt-16再配合Tailwind这类工具类库在构建时生成最终样式。好处是写页面的样式代码数量大幅减少坏处是HTML标签上会堆一堆类名牺牲一点可读性。具体取舍没有标准答案但如果追求新人上手快、页面产出高工具类方案在团队协作中确实有不可忽视的优势。2. Flex布局一套拳法打天下2.1 Flex盒子的核心机制与关键属性在Flexbox出现以前前端做居中要靠text-align、line-height、position左算右算一不留神就歪掉。Flex布局的核心思想是给容器一根轴用轴来管理子项的排布方向、对齐方式和伸缩比例它彻底改变了我们写布局的方式。一个元素只要加上display: flex它的直接子元素就会沿着主轴排成一行。主轴的默认方向是水平向左但你可以用flex-direction: row | column控制它是横着排还是竖着排再配合换行属性flex-wrap: wrap让子元素超出容器时自动折行。这两者的组合flex-flow: row wrap是日常最常用的简写。对齐方面记住两个属性就够了justify-content控制所有子项在主轴上的分布方式align-items控制它们在交叉轴垂直方向上的对齐方式。水平垂直居中这个老难题在Flex下只需要三行.center { display: flex; justify-content: center; align-items: center; }如果你做过一段时间布局会发现这个三行组合是最高频代码没有之一。子项自己的伸缩规则由flex-grow、flex-shrink、flex-basis三个属性决定。flex-basis定义子项的初始尺寸flex-grow定义空间富余时子项按什么比例变大flex-shrink定义空间不足时子项按什么比例缩小。把它们简写成flex: 1就等于flex-grow: 1; flex-shrink: 1; flex-basis: 0%意思是尽可能占满剩余空间。2.2 真实项目的Flex布局实战Flex在实际项目里最常见的几个场景我直接给出可复用的套路。第一个是顶部导航栏。左侧放Logo中间放菜单右侧放操作按钮核心需求是左侧靠左、右侧靠右、菜单均匀分布。实现方式是把导航容器设为display: flex; align-items: center左侧Logo不伸缩菜单区域用flex: 1占据剩余空间右侧按钮再固定宽度。这种结构无论屏幕多宽菜单都能自动适配不会挤压两端内容。第二个是卡片列表。后台管理系统里最常见的布局是卡片们一行三列、超出一行自动换行。用Flex实现起来很直观.card-list { display: flex; flex-wrap: wrap; gap: 16px; } .card { width: calc((100% - 32px) / 3); }gap这个属性极大解放了生产力放在以前你得给每个卡片写margin再处理第一列的margin-left归零现在一行代码全都解决。需要留意的是gap对旧浏览器兼容性一般如果用户环境较老还是得退回margin的方案。第三个是圣杯/双飞翼布局中的底部贴合。页面内容较少时footer想固定在视口底部内容较多时正常跟随滚动。一个很实用的Flex方案是把整个页面容器设置成display: flex; min-height: 100vh; flex-direction: column中间内容区flex: 1footer自然被顶到底部。这个方案比传统的position: sticky更稳不会出现滚动穿透或贴合失败的问题。2.3 我踩过的Flex布局坑第一个坑是flex子项里的文本溢出。当你给一个子项设置flex: 1且内部有长文本时你会发现该子项会把容器撑爆导致整体布局超出。解决办法是给它加一个min-width: 0让flex子项允许自身内容溢出压缩。这个属性在Flex布局里几乎是个万金油遇到宽度不听话的地方可以先加上它。第二个坑是align-self和align-items的混用。很多新手只知道容器的统一对齐但想让某一个子项单独靠底或靠顶时不知道还有align-self: flex-end这种子项上的属性。它跟align-items的优先级关系是子项自身属性覆盖容器属性两者不冲突。第三个坑是Flex的等高问题。默认情况下同一行的Flex子项高度是自动拉伸到最高的那个这在很多场景是好事但如果你想让某几个子项保持固有高度需要给它们设置align-self: flex-start或固定height。此外flex-basis和width在主轴为row时容易让人混淆记住一个原则flex-basis优先级高于width主轴上有flex-basis优先用它。项目里出现过好几回设置了宽度的左侧栏被Flex压缩掉的情况排查半天最后发现是flex-basis: auto配合较大的flex-shrink在起作用。3. Vue 3从环境搭建到完整页面3.1 Vue安装与环境配置一分钟检查半小时装好不少人一开始学Vue就卡在环境搭建上报错一个接一个。以现在主流的方式为例我们使用Vite脚手架创建项目。首先确认本机的Node.js版本建议用LTS版本。然后执行npm create vitelatest my-app -- --template vue cd my-app npm install npm run dev如果你的网络环境偏慢可以把npm默认源切换为国内镜像npm config set registry https://registry.npmmirror.com这里提一个容易犯的错不要用编辑器自带的运行按钮去启动Vite很多VSCode插件直接调用npm run dev时会走错终端路径还是老老实实在终端里敲命令。装完之后项目结构里最重要的文件是main.js和App.vue。main.js是入口所有插件、路由、状态管理都在这里注册App.vue是根组件页面的整体骨架在这里绘制。用VSCode做Vue开发必装的两个插件是Volar和Vue VSCode Snippets。注意从2023年起Vue官方推荐用Volar取代VeturVetur已经进入维护模式在新版本Vue3项目里用它会有各种类型报错。装完Volar后在VSCode命令面板里选择Select TypeScript version并指向项目下的node_modules/typescript类型提示才能正常工作这个坑让很多人百思不解。如果做的是手机端的Vue项目记住一个常识Vue本身并不区分PC还是手机它只是运行在浏览器里的UI框架。想用Vue开发手机APP可以借助uni-app这类跨端框架它底层仍然编译成Vue组件同时输出iOS、Android、小程序等多端产物。VSCode里写好页面代码手机扫码预览、一键云打包流程比传统Android/iOS原生开发顺滑得多。3.2 Vue模板语法与样式处理的核心细节Vue的模板语法学习路径非常清晰高频内容就这几样文本插值{{ }}、属性绑定v-bind可简写为:、事件绑定v-on可简写为、双向绑定v-model、条件渲染v-if/v-show、循环列表v-for。template div h1{{ title }}/h1 input v-modeltitle / button clickhandleAdd :disabledloading添加/button ul li v-foritem in list :keyitem.id{{ item.name }}/li /ul /div /templatev-if和v-show的区别很多人到现在还犯浑。v-if是真正的条件渲染条件为假时元素根本不生成对应还有v-else、v-else-ifv-show只是通过display: none隐藏了元素DOM节点始终存在。性能上频繁切换用v-show更经济因为它没有创建和销毁DOM的开销首次渲染条件大概率为假且代价高的组件用v-if更省。这个选择不是玄学是要结合场景算的。循环里的:key也不是随便给的。它帮助Vue的虚拟DOM精准辨识哪个节点变了、哪个需要复用。给:key赋值时能用id就不用index因为基于索引的key在数组头部插入或删除元素时会导致列表项的状态错乱。我实际接手过一个bug列表项内部有输入框用户在第一行输入内容后在第二行追加一条数据第一行的内容就跑到第三行去了罪魁祸首就是用了index当key。样式处理方面Vue组件默认是全局样式如果你写的style没有加scoped组件内的类名可能污染其他组件。给style加上scoped属性后Vue会为当前组件的所有元素生成一个唯一ID选择器做到样式隔离。但注意scoped下如果使用:deep()可以穿透到子组件内部修改样式这在覆盖第三方组件库样式时几乎是必用的技能。还有一类需求是动态切换主题比如点击按钮改变按钮文字颜色直接用:class或:style绑定即可Vue在渲染时会智能合并样式不会把所有class重置。3.3 组件通信、路由与DevTools调试Vue的组件化思想简单说就是把页面拆成可以复用的积木。父组件把数据通过props传给子组件子组件通过$emit把事件抛回父组件这是最基础的单向数据流规范。很多新手一开始就想用全局状态Vuex/Pinia去解决问题其实组件之间的直系通信用props/emit就够了。跨多层级的共享Vue 3里可以用provide和inject一层注入后代组件随时取用省掉逐层搬运props的累活。路由这块单独在第五章展开。这里先提一句装Vue Router时不要手写HTML引入方式直接在创建项目后执行npm install vue-router4在main.js里app.use(router)注册。路由配置文件的编写方式我在后面给出完整示例。调试工具是必备品。Vue DevTools插件是浏览器端检查Vue组件状态的法宝它能在页面上直接看到每个组件的data、computed、props、events以及路由信息还可以从时间旅行式的调试面板里回放状态变化。如果你用的是Chrome去官方Chrome商店搜索Vue DevTools安装版本选Vue3对应的版本Firefox用户同样有对应扩展。装好之后即便是在普通浏览器页面里Vue应用的调试tab会自动出现不用额外配置。我在实际开发中还有一个偏好养成写console.log不如养成看DevTools的习惯。因为Vue的响应式数据在控制台里打印出来的引用关系往往看得到但摸不清直接在DevTools的Components面板里右键选中某个组件能实时看到它监听到的所有数据源排查响应式失效的问题效率高出好几倍。4. Ajax与异步通信数据交互的核心4.1 同步和异步到底差在哪Ajax全称是Asynchronous JavaScript and XML重点就在异步两个字。很多初学者分不清同步和异步我用一个排队买奶茶的类比同步请求像是你去柜台点单点完之后你站在原地一直等着奶茶做好才走期间什么都干不了异步请求像是你在小程序上点单下单之后该干嘛干嘛等到出餐通知到了再去取。浏览器的JavaScript是单线程语言如果请求都用同步方式页面会卡死在等待响应那一刻用户的滚动、点击、输入任何一个动作都得不到响应。所以Ajax请求在默认情况下是异步的这也是绝大多数业务场景的正确选择。那什么时候需要用同步呢坦白说现在越来越少。早期开发中有极少数场景需要同步等待请求返回后才能继续执行后续逻辑但这类写法容易造成页面无响应已经被各种交互改良替代了。在axios里如果非要用同步可以传async: false但不建议我在实际项目中从来没这么写过。4.2 请求编码、参数赋值与常见问题Ajax的实现方式经历了从XMLHttpRequest到fetch再到axios的演进现在的主流做法是直接用axios。原因很简单它封装好了拦截器、超时处理、请求取消、JSON序列化等大量细节代码量少一半错误处理还更清晰。axios里最容易踩的坑之一是编码格式。默认情况下axios会把Content-Type设成application/json;charsetutf-8请求体自动被序列化成JSON字符串。但如果你往一个表单接口发请求后端接口参数是接收application/x-www-form-urlencoded格式的直接传对象就会收不到参数。解决办法是先转成URLSearchParams格式import axios from axios; const params new URLSearchParams(); params.append(name, 张三); params.append(age, 18); axios.post(/api/user, params, { headers: { Content-Type: application/x-www-form-urlencoded } }).then(response { console.log(response.data); }).catch(error { console.error(error); });给Ajax请求参数赋值的另一个常见场景是GET请求拼接查询字符串。很多人喜欢手写一个个?keyvaluekeyvalue一旦参数多起来极易出错和遗漏。合理做法是把参数对象交给axios的params字段它会自动拼接并编码axios.get(/api/list, { params: { page: 1, keyword: 前端, status: active } });项目中还会遇到请求里头显式要求设置charset的情况特别是对接老后端或者需要下载文件流时。只要在请求头里声明Content-Type: text/plain;charsetUTF-8或单独设置responseType: blobaxios都能处理好。这个细节网上讨论得不多但在实际对接中遇到中文乱码时优先检查请求头里的charset设置几乎总是一找一个准。4.3 从流媒体播放到桌面端Ajax能力的延伸提到流媒体热搜词里有vue播放m3u8这个需求估摸是有人想在Vue项目里实现HLS视频播放。m3u8是苹果制定的流媒体协议文件格式里面存放的是分片视频文件的地址列表播放器拿到它之后会按顺序拉取一个个小片段并连续播放。前端播放m3u8的成熟方案有两个video.js配videojs-contrib-hls或者轻量一点的hls.js。两者都是库直接安装引入即可npm install hls.js然后在Vue组件基于video标签封装一个播放器template video idvideo controls muted autoplay/video /template script setup import Hls from hls.js; import { onMounted } from vue; onMounted(() { const video document.getElementById(video); const url https://example.com/playlist.m3u8; if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(url); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () { video.play(); }); } }); /script另一个有意思的提问是Electron主渲染进程IPC通信和Vue有关系吗。答案很直接没有直接关系。Electron里有两个进程主进程负责系统窗口、菜单、原生能力调用渲染进程负责页面UI展示。Vue只运行在渲染进程里它管的是界面的组织。IPC是Electron在不同进程间传递消息的桥梁Vue组件里可以通过系统API如window.electronAPI.xxx触发这些消息但Vue本身的响应式机制根本不知道IPC的存在。把这两件事关到一个盒子里想就越学越清晰了。5. ElementPlus与Vue Router组件和路由的落地配合5.1 ElementPlus安装与常用组件实战一个后台管理系统如果从头手写表格、表单、弹窗、消息提示工作量至少翻五倍。ElementPlus就是为这种场景准备的高质量组件库它基于Vue 3和TypeScript构建内置了大量开箱即用的中后台组件。中文官网的文档质量相当不错连组件源码和设计规范都开放你可以理解成前端界的高质量乐高套装。安装方式极简npm install element-plus在main.js里全局注册import { createApp } from vue; import ElementPlus from element-plus; import element-plus/dist/index.css; import App from ./App.vue; const app createApp(App); app.use(ElementPlus); app.mount(#app);全局注册的好处是起步快代价是打包体积偏大。项目上了规模后最好改成按需自动导入用官方推荐的unplugin-auto-import和unplugin-vue-components插件构建时会自动把用到的组件单独打包进输出文件体积能缩减将近一半。ElementPlus最常用的组件我按频率排个序el-table、el-form、el-dialog、el-select、el-date-picker、el-message。写表格时有个容易把新人绕晕的地方el-table配置列的方式不是一个个写死而是通过:data传入数组再用el-table-column的prop字段绑定数据项里的键。如果表格列里有自定义按钮或图片配合template插槽写覆盖模板即可不熟悉slot的会在这里卡很久。表单则是el-form配el-form-item每个表单项绑定prop与rules校验规则提交时先调用formRef.validate()通过后再发请求这套流程是所有后台管理系统的通用标答。样式定制方面ElementPlus用的是CSS变量体系你可以在全局样式中覆盖主色调:root { --el-color-primary: #409eff; }如果想要更彻底的品牌定制推荐用SCSS变量覆盖后重新编译但小项目直接用上述方式替换CSS变量就够了低成本见效快。记得我看过很多新人在检查完ElementPlus文档后仍然纠结怎么改主题色其实用浏览器把组件上的样式检查出来找到对应的CSS变量直接替换是最快的路径。5.2 Vue Router路由参数传递与守卫Vue Router是Vue生态里的官方路由方案核心价值在于不经刷新页面就能实现视图切换。它本质上是监听URL的hash变化或history模式下的路径变化再把对应的组件渲染到router-view里。安装配置方式我在3.3节提过这里重点说路由参数传递。路由传参常见的有两类query方式和params方式。query方式长这样router.push({ path: /detail, query: { id: 1 } });跳转后页面上可以通过route.query.id拿到1。它的特点是参数会出现在URL里可分享、可刷新不丢。params方式分两种使用场景。如果传参对象不要求出现在URL中从Vue 4开始处理的细节有点多稳定性欠佳我通常更推荐把参数放在sessionStorage或者状态管理库里再结合query传一个标识这样既避免刷新丢失又不暴露敏感信息。如果是用动态路由段路径本身携带参数// 路由配置 { path: /detail/:id, component: Detail } // 跳转 router.push({ name: Detail, params: { id: 1 } });这样页面组件里通过route.params.id读取就是最标准的路由参数实践。路由守卫是另一个核心技能。它解决某些页面必须在登录后才能访问这类的权限问题。最常用的是全局前置守卫beforeEach在每次路由跳转前执行router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next(/login); } else { next(); } });新手使用路由守卫时最常犯的错误是忘记调用next()导致跳转戛然而止。需要记住在守卫内部必须有且仅有一次next被调用或返回一个具体的路由地址否则页面会陷入永久空白。守卫执行顺序也要心里有数全局前置守卫 - 路由独享守卫 - 组件内守卫逐层递进。5.3 多页面打包、富文本转换与HTML邮件很多业务场景下SPA还不是全部需求你可能需要把多个独立页面打包成一个产物。这种打包多个HTML的需求很常见。Vite下多页面应用MPA的配置方式是在vite.config.js的build.rollupOptions.input里声明多个HTML入口import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], build: { rollupOptions: { input: { main: index.html, admin: admin.html, mobile: mobile.html } } } });这样执行npm run build之后dist目录下会生成多个HTML文件每个文件都对应一个独立可打开的页面。使用这种模式时要注意公共资源路径最好都设置为相对路径否则在子路径部署时静态资源404。html转为md的需求通常和富文本编辑器的内容清洗有关。WYSIWYG编辑器输出的HTML要转成Markdown最直接的方式是用turndown这个库它把HTML解析成语法树再重新序列化成Markdown基本能还原常见标题、段落、列表、代码块。反过来markdown转HTML则用marked或markdown-it。这套组合在博客系统、文档站、工单系统的前端里几乎人人都在用值得收藏。再聊一下HTML邮件。邮件客户端对HTML的解析能力停留在十年前的水平不能用Flex布局、不能有JavaScript、外部样式几乎全部失效样式只能用内联。所以做HTML邮件模板要遵守三条铁律第一布局用table嵌套table别想着用DIVCSS第二所有样式写在标签的style属性里第三图片地址必须用绝对路径因为邮件客户端里相对路径无效第四字体尽量用邮件系统内置的通用字体族类似微软雅黑、Arial、Tahoma不要依赖自定义字体加载。这套规则出来后我做的营销邮件在各大主流邮箱客户端的兼容性明显提升也验证了没有通用标准时先查兼容性的工作习惯才是硬道理。Vue Router和ElementPlus这两兄弟配合起来相当默契。后台页面的大致套路是路由表里配置好菜单和页面的映射关系页面里用ElementPlus的el-menu渲染侧边栏菜单的点击事件触发router.push路由守卫拦截未登录的跳转。前端新手刚开始做这种系统时容易把大量逻辑堆在单文件里踩坑多了就会发现把权限校验、菜单读取、路由表生成这三块拆成独立模块后面的维护体验会舒服得多。个人实操中的一些体会技术学得越多越觉得项目驱动才是掌握前端最快的路径。很多知识点单看很分散但当你亲手把一个后台管理系统从零写到上线流程里自然就把HTML、CSS、Flex、Vue、Ajax、ElementPlus、Vue Router全都串起来了。我见过不少朋友在语法细节上死磕比如纠结某个CSS属性在极端情况下的表现、某个API的底层实现这些在初期性价比并不高。我个人的建议是先用一个最小的目标把所有链路打通就做一个带登录、表格、增删改查、路由跳转的中台页面。遇到样式就查CSS文档遇到数据交互就用axios遇到布局优先Flex遇到组件需求就翻ElementPlus。整个项目跑通之后再回头读官方文档查漏补缺很多东西自然就理解了。最后再分享一个小技巧给自己建一个常用代码片段仓库按照页面骨架、列表页、表单页、图表页、路由配置分类存放写代码时直接复制改参数比从零敲效率高得多。这套方法帮我带过好几个新人上手速度普遍比照着视频教程边看边写快。
