简介：一套基于 Vue.js 的门户网站模板源码，定位给需要快速搭建企业展示、产品介绍或新闻资讯类站点的前端开发者与设计人员。项目采用组件化划分，导航、内容区块、侧栏、底部等模块边界清晰，移动端与 PC 端自适应适配，能有效减少二次开发时的重复改动。压缩包共 317 个文件，核心为 41 个 Vue 组件与 5 个 JS 脚本，配合 222 张 PNG、36 张 JPG 图片资源及 3 个 PSD 设计稿，分别用于页面结构、交互逻辑、UI 素材与视觉稿参考；CSS、HTML、JSON、SVG 等则承担全局样式、入口页面与站点配置。整包资源大小约 52.17MB，结构完整，已有 2933 人学习下载。无论想参考组件拆分思路、抽取通用模块，还是基于现有页面快速定制品牌门户，这套源码都能提供较规范的起点；对需要对接设计稿的前端开发者和希望在此基础上做二次主题改版的中高级用户尤其适用。同时组件命名与目录分组也清晰，便于维护和团队协作。 做网站模板这事，我踩过最大的坑不是功能写不出来，而是写完之后一次又一次的二次修改。客户说“帮我换个logo”“按钮改成圆角的”“首页加一个大板块”，听起来都是几分钟的小事，可真动起手来，经常要在HTML里翻半天找结构，再去CSS里找对应的class，一顿操作猛如虎，改完A页面，B页面的样式又乱了。这种经历，凡是碰过网站模板源代码的人，多少都体会过。
后来我才想明白：网站模板好不好用，根本不在于第一版做得多花哨，而在于二改的时候省不省力。而决定“二改省力”这个事儿的，恰恰是很多人一开始不重视的组件划分规范。这篇文章我就把自己在模板开发中沉淀下来的组件划分思路、目录结构、实操经验完整分享出来，希望能给正在做模板、或者经常被二改折磨的朋友一些参考。文章不涉及任何框架绑定，纯原生HTML/CSS/JS的思路也能直接落地，Vue、React工程里同样适用。
1. 二改模板为什么越改越乱，先找到病根再谈规范
要说清楚组件划分的价值，就得先搞清楚一个模板为什么改起来会越来越乱。我自己接过不少别人写的模板，也复盘过自己早期写的模板，发现“越改越乱”其实是有规律的症状。
1.1 三分钟小改动，耗掉一下午的真正原因
先看最典型的场景：客户说“导航栏的‘产品’改成‘解决方案’”。听起来就是改一个文字，结果你拿起编辑器一搜，发现“产品”两个字在HTML里出现三次，在JS里出现两次，在图片alt和SEO meta里还有一次。你不敢全局替换，因为怕把别的板块也改了，只能一个个手工定位，改完还要挨个页面验证。
再比如改一个按钮颜色。正常思路是找到按钮class，改background-color。但如果模板没划分组件，很可能是“btn”这个class被全站几十个地方共用，你改了之后发现首页轮播图的按钮、侧边栏的按钮、弹窗的关闭按钮全都变了色。这种混乱的本质，是样式的作用域没有边界。更麻烦的是HTML结构嵌套过深，一个板块的代码从第120行延伸到第400行，中间还穿插着JS生成的节点，你想删掉这个板块，根本不知道哪些代码该跟着删。
还有一类问题藏在数据和结构里。很多模板习惯把导航菜单、轮播图内容、联系方式这些数据直接写死在HTML里，二改的时候必须钻到结构代码里去抠文字。一旦段落多、行数长，漏改一个地方是非常正常的事。
1.2 组件划分解决的核心矛盾：把变化隔离在最小范围
这些症状指向同一个病根：模板里面，静态结构、动态数据、样式规则这三种东西紧紧耦合在一起，谁都可以影响谁。而组件划分要解决的，就是把这个耦合解开，把“可能变化的部分”隔离到最小范围。
打个比方，一个模板就像一栋房子。如果水电管线都埋在墙里，你想换个水龙头，就得砸墙；如果每个功能区域都是独立模块，水龙头只控制自己的水管，换起来就很简单。组件划分本质上就是把“墙”预先设计好：每个组件是一间独立房间，里面的结构、样式、数据自己管好，外部只通过门（对外接口）联系。这样二改的时候，你只需要打开目标房间的门，而不是把整栋楼拆了重装。
这个思路对任何规模的模板都适用。哪怕你做的只是一个企业官网首页，把header、轮播、产品列表、新闻区块、footer各切一刀，后续每一次修改变动范围都被锁在对应的组件文件里，改动风险会下降一个量级。
2. 组件划分的四个原则，把“省力”提前设计进模板里
聊完病根，再说说怎么做。组件划分不是“把一个页面切成几段”这么简单，它背后有几条实实在在的原则。这些年我反复用到的，总结下来是四条。
2.1 单一职责：一个组件只回答一个问题
第一条原则，每个组件只干一件事。导航栏组件就负责导航，不要顺手把搜索框、登录状态、公告栏全塞进去；产品卡片组件就负责展示一条产品信息，不要附带轮播逻辑。判断标准很简单：你描述这个组件的时候，能不能用一句话说清楚它是干什么的。如果说“这是头部区域，包含导航和搜索和轮播和公告”，那它就太胖了，得拆。
单一职责最大的好处，是修改目标明确。客户说“导航菜单加两项”，你打开header组件，导航相关的代码都在这里，不会跑到轮播组件里去找菜单。你在改动之前就能预判影响范围，这是二改省力的基础。
2.2 样式隔离：组件内部的CSS不出边界
第二条原则，也是我最开始容易忽略的。组件的样式必须只作用于自己，不能“越狱”影响其他组件。实现方式有几种：最原始但有效的是BEM命名规范，比如导航栏的class全部写成header__logo、header__menu-item、header__cta，或者加上组件前缀.header-nav，保证类名独一无二；如果用的是Vue或React，可以用scoped style或者CSS Modules，天然帮你隔离掉样式冲突。
为什么这个原则这么重要？因为样式冲突是二改中最难排查的问题。你改完一个组件，样式正常了，结果另一个页面莫名出了bug，排查半天发现是两个组件里出现了同名class。有了样式隔离，这个问题从源头上就不存在。我自己现在写原生模板，一律要求组件文件名、CSS类名前缀保持一致，靠约定来锁边界。
2.3 数据与结构分离：二改变成改配置
第三条原则，把页面上可能变化的文字、图片链接、跳转地址、颜色值这些内容，从HTML结构里抽出来，放到独立的数据文件或者配置对象里。导航菜单的每一项、轮播图的每一张图、联系方式、社交链接，通通做成数据项。
这样做的好处，在二改的时候会体现得非常明显。客户改菜单文案、换联系电话，你根本不用碰HTML，打开config文件，改一行是一个字，改完刷新页面就完事。数据与结构分离之后，非技术人员也能上手改一部分内容，这对模板的适用性是个很大的加分项。
2.4 稳定出口：对外接口越保守越好
第四条原则是针对组件之间协作的。一个组件对外暴露的接口（HTML里自定义属性、JS里暴露的方法、CSS里的自定义变量）一旦定下来，就尽量保持稳定。为什么？因为接口一变，所有使用这个组件的地方都要跟着改，那组件划分省下来的力气又全花在联调上了。
我见过一种反面案例：一个标签页组件，作者觉得参数名不够优雅，把所有attribute重命名了一遍，结果下游几十处引用全部报错。所以在模板开发阶段，接口设计宁可保守一点，想清楚再定；上线之后，不因为“强迫症”随意改接口。真要扩展功能，优先加新接口，而不是改旧接口。
3. 一套可以直接抄走的模板目录结构
原则讲完，上实战。下面这套目录结构是我几年做模板沉淀出来的，没有依赖任何框架，纯原生HTML/CSS/JS的网站模板工程可以直接抄。它最核心的思路，就是一个组件一个文件夹，组件内部自成一体。
3.1 顶层目录：组件、样式、数据各归其位
template/ ├── index.html ├── pages/ │ ├── about.html │ └── contact.html ├── components/ │ ├── header/ │ │ ├── header.html │ │ ├── header.css │ │ ├── header.js │ │ └── config.json │ ├── hero/ │ │ ├── hero.html │ │ ├── hero.css │ │ ├── hero.js │ │ └── config.json │ ├── features/ │ ├── product-card/ │ ├── testimonials/ │ ├── cta/ │ └── footer/ ├── assets/ │ ├── css/ │ │ ├── base/ │ │ │ ├── reset.css │ │ │ └── variables.css │ │ └── main.css │ ├── js/ │ │ └── main.js │ └── images/ └── data/ ├── site.config.js └── nav.json这个结构有几个关键设计。第一，components目录只放组件，每个组件有自己独立的HTML片段、CSS、JS和配置，彼此不串门。第二，data目录放全站数据，像导航菜单、站点信息这种所有页面都可能用到的数据，放在这里统一管理。第三，assets/css/base下面是全局基础样式和变量文件，组件样式在components各自的文件夹里，全局样式尽量只放reset和变量，不放具体业务样式。
3.2 组件内部的文件构成与命名约定
每个组件文件夹里，我用统一的命名规则：组件名.html是组件结构，组件名.css是组件样式，组件名.js是组件交互，config.json是组件数据。这样做的好处是，你进入任何一个组件文件夹，不需要看文档就能知道每个文件是干嘛的。
命名规范上，组件目录用小写字母加短横线，比如product-card、contact-form，不要用驼峰，因为文件系统对大小写敏感的协作环境里，驼峰容易出现引用错乱。CSS类名统一加组件前缀，比如product-card__title、product-card__price，这样即使两个组件里都有“标题”，也不会冲突。
组件之间如果需要互相引用，原则是“页面负责拼装，组件不直接管别的组件”。比如首页要展示产品卡片，就在index.html里引入product-card组件，而不是让product-card自己去读取其他组件的数据。
3.3 全局主题变量：换肤不动代码的基础
组件都隔离好之后，还要有办法做全站统一样式。我的做法是，在variables.css里定义一套CSS变量，把颜色、字体、间距、圆角这些主题相关的值全部变量化。
:root { --color-primary: #1a73e8; --color-primary-hover: #1558b0; --color-text: #333333; --color-bg: #ffffff; --color-border: #e5e5e5; --font-base: 16px; --font-heading: 28px; --radius-sm: 4px; --radius-md: 8px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --header-height: 64px; }这样设计的意义是，改主题色、改间距、改圆角，全部在变量文件里完成，组件里的CSS只要引用变量，就自动跟着变。我用这种方式做过一个快速换肤功能：建三套变量文件，切换html上的><header class="header" id="site-header"> <div class="header__inner"> <a href="/" class="header__logo"> <img src="" alt="" class="header__logo-img" /> <span class="header__logo-text"></span> </a> <nav class="header__nav" aria-label="主导航"> <ul class="header__menu"> <li class="header__menu-item"> <a href="" class="header__menu-link"></a> </li> </ul> </nav> <a href="" class="header__cta btn"></a> </div> </header>
结构上注意几个细节：使用语义化标签header、nav，方便阅读代码的人一眼理解区块用途；所有需要动态填充的地方，比如href、src、文字内容，都留空或者用占位属性，后面交给数据填充；类名全部带header__前缀，把样式的作用域锁在这个组件里。
4.2 数据配置：菜单变化不再碰模板
导航栏的数据放在config.json里：
{ "logo": { "text": "我的网站", "image": "assets/images/logo.png", "alt": "网站首页" }, "menu": [ { "text": "首页", "url": "/" }, { "text": "产品中心", "url": "/products" }, { "text": "关于我们", "url": "/about" }, { "text": "联系我们", "url": "/contact" } ], "cta": { "text": "免费咨询", "url": "/contact" } }然后写一个非常轻量的渲染函数，在页面加载时把配置数据填进结构里。这里我用纯JS示例：
// components/header/header.js async function renderHeader() { const res = await fetch('components/header/config.json'); const config = await res.json(); document.querySelector('.header__logo-img').src = config.logo.image; document.querySelector('.header__logo-img').alt = config.logo.alt; document.querySelector('.header__logo-text').textContent = config.logo.text; const menuList = document.querySelector('.header__menu'); menuList.innerHTML = config.menu .map(item => `<li class="header__menu-item"> <a class="header__menu-link" href="${item.url}">${item.text}</a> </li>`) .join(''); document.querySelector('.header__cta').href = config.cta.url; document.querySelector('.header__cta').textContent = config.cta.text; } document.addEventListener('DOMContentLoaded', renderHeader);这段代码逻辑非常简单，但它带来了一个巨大利好：以后改导航菜单，只需要打开config.json，增删数组里的对象，字体颜色、大小、间距完全不用管。菜单内容和结构彻底解耦，二改成本几乎为零。如果你的模板服务端有模板引擎（比如PHP、Python的模板），也可以在服务端渲染阶段直接读配置输出HTML，思路是一样的。
4.3 样式边界：把导航栏的样式锁在自己的文件里
样式文件header.css只写和导航栏相关的内容。简单说几个关键点：
.header { height: var(--header-height); background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .header__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--space-md); } .header__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; } .header__logo-img { height: 32px; width: auto; } .header__logo-text { font-size: 18px; font-weight: 600; color: var(--color-text); } .header__menu { display: flex; list-style: none; gap: var(--space-lg); margin: 0; padding: 0; } .header__menu-link { color: var(--color-text); text-decoration: none; transition: color 0.2s; } .header__menu-link:hover { color: var(--color-primary); } .header__cta { padding: 8px 20px; background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); text-decoration: none; }注意看，所有颜色、间距、高度都是从全局CSS变量读取的，自身不写死具体像素值。这样一个导航栏组件，既能在全站任何页面复用，又能跟随全局主题变化，还不会污染别的组件。二改的时候，结构问题改header.html，样式问题改header.css，内容问题改config.json，各找各的文件，思路清晰得很。
5. 三个高频二改场景，验证组件划分的真实效率
原则和案例都摆出来了，这部分我拿真实高频出现的三个二改需求，把组件化模板的完整操作流程走一遍，顺便和没划分的模板做个对比。这几个场景你大概率都遇到过。
5.1 场景一：换logo、改菜单项
客户需求：把logo换成新图，“产品中心”改成“解决方案”，菜单加一个“客户案例”。
组件化模板的操作流程是：打开components/header/config.json，把image路径换成新图，菜单数组里把"text": "产品中心"改成"text": "解决方案"，再往数组里加一项{ "text": "客户案例", "url": "/cases" }。保存、刷新，完事。整个过程不超过一分钟，而且你非常确定不会有其他位置被误改，因为导航菜单只有这一份数据源。
如果换成没做数据分离的模板，你得打开header.html，找到logo的img标签，再在HTML里找出菜单那几行手工改文字，多一个菜单就要复制粘贴一个<li>结构，还要小心缩进和class写错。工作量从一分钟变成十分钟，关键是容易漏。
5.2 场景二：全站换主题色
客户需求：品牌色从蓝色改成绿色，按钮、链接、导航高亮、CTA全都要跟着变。
组件化模板的操作流程是：打开assets/css/base/variables.css，找到--color-primary: #1a73e8;，改成#2e7d32，再顺手把--color-primary-hover改成对应的深绿色。因为所有组件的按钮、链接、高亮状态都引用这个变量，一改全站生效，不会出现某个角落漏掉的情况。如果还想要更省事，可以准备两套变量文件，通过style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />
