区块齐全:从导航、Hero 到定价、FAQ、团队、联系与页脚均有对应组件
landingpage_mhub — Vue 企业官网模板
作者 malo-dev
基于 Vue 与 Shadcn-Vue 的落地页模板,包含导航、Hero、定价、FAQ、团队等完整区块,支持深色模式与响应式布局。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
移动端提供 Sidebar 导航,配合响应式布局适配不同屏幕
内置深色模式与 Meta 标签设置
使用 Shadcn-Vue 组件与 Tailwind 样式体系,便于按需调整外观
采用 TypeScript 编写,组件结构清晰
MIT 许可,允许免费使用、修改与分发
模板详细介绍
这是一个面向企业官网场景的落地页模板,技术栈为 Vue、Shadcn-Vue、TypeScript 与 Tailwind。README 说明其定位是易用的 Landing Page 模板,并提供了在线演示地址。
页面区块覆盖较完整,包含 Navbar、移动端 Sidebar、Hero、Sponsors、Benefits、Features、Services、HowItWorks、Testimonials、Pricing、FAQ、Team、Community、Contact 与 Footer,适合直接在此基础上替换文案与素材搭建单页站点。
功能层面列出响应式设计、导航交互、深色模式与 Meta 标签。仓库以 MIT 许可发布,可免费使用、修改与分发,但演示图片、字体、图标等第三方素材需单独核对授权。
适合你的项目吗?
适用场景
- 为 SaaS 或工具类产品搭建单页营销落地页
- 作为企业官网首页的起始模板,替换品牌文案与图片
- 用于快速验证落地页信息结构与区块排布
- 作为学习 Vue + Shadcn-Vue + Tailwind 组合的示例项目
适合人群
- 需要现成落地页区块结构的前端开发者
- 使用 Vue 技术栈并希望引入 Shadcn-Vue 的团队
- 需要快速产出营销页原型的设计或产品人员
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
README 中的克隆命令指向 leoMirandaa/shadcn-vue-landing-page,与本仓库地址不同,请以实际仓库地址为准
- 2
安装依赖后通过 npm run dev 启动本地开发环境
- 3
替换演示图片、字体与图标前,需确认其各自许可,代码的 MIT 许可不覆盖第三方素材
- 4
README 未说明构建与部署流程,部署前请自行核对项目脚本
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
https://github.com/malo-dev/landingpage_mhub/blob/man/LICENSEhttps://github.com/malo-dev/landingpage_mhub/blob/man/README.mdPermission is hereby granted, free of charge
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 68 / 100
- 技术栈
- Vue
- 网站类型
- 企业官网
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-26
- 截图检查日期
- 2026-10-01
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 5c86944a41ece7c5db2a2c3e0fa9c45cbdddfb00c2e0ec3f65182db37978134a
2026-10-01T14:12:44.248Z
来源文件 / 仓库# Shadcn/Vue Landing Page Template ## <a href="https://www.shadcn-vue.com/" target="_blank">Shadcn-Vue</a> + <a href="https://vuejs.org/" target="_blank">Vue.js</a> + <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> + <a href="https://tailwindcss.com/" target="_blank">Tailwind</a>.  Live demo is now available: <a href="https://shadcn-vue-landing-page.vercel.app" target="_blank">Live Demo</a> ## Sections - [x] Navbar - [x] Sidebar(mobile) - [x] Hero - [x] Sponsors - [x] Benefits - [x] Features - [x] Services - [x] HowItWorks - [x] Testimonials - [x] Pricing - [x] Frequently Asked Questions(FAQ) - [x] Team - [x] Community - [x] Contact - [x] Footer ## Features - [x] Fully Responsive Design - [x] User Friendly Navigation - [x] Dark Mode - [x] Meta tags ## How to install 1. Clone this repositoy: ```bash git clone https://github.com/leoMirandaa/shadcn-vue-landing-page.git ``` 2. Go into project ```bash cd shadcn-vue-landing-page ``` 3. Install dependencies ```bash npm install ``` 4. Run project ```bash npm run dev ```
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

shadcn-vue-landing-page
New design 🎉 Vue + Shadcn-vue + TypeScript + Tailwind. Landing page template ease-to-use
Vue · 企业官网

dasos
App Landing Page Template
Vue · 企业官网

hero-header-template
Hero Header Template 是一个为代理机构或服务商设计的落地页模板,基于 Vue 3、Vite 和 Tailwind CSS 构建。
Vue · 企业官网

vue-porto
VuePorto is a Bootstrap resume or CV landing page theme using Vuejs spa to help you create easy to use, stylis…
Vue · 作品集

nagency
Digatal agency web template
Vue · 企业官网

vitepress-marketing
VitePress set up as a real marketing site, not a docs site: a home page, a blog, and a working contact form.
Vue · 博客
