XXX有限公司官网

项目介绍

这是基于 Vue3 + ElementPlus 重构的公司官方网站,原项目为传统HTML静态网站。

技术栈

• Vue 3 - 渐进式JavaScript框架
• Vue Router - 官方路由管理器
• Element Plus - 基于Vue 3的组件库
• Vite - 新一代前端构建工具
• Sass - CSS预处理器

项目结构

vue-project/
├── public/                 # 静态资源
│   └── images/            # 图片资源
├── src/
│   ├── assets/            # 资源文件
│   │   └── styles/        # 全局样式
│   ├── components/        # 公共组件
│   │   ├── NavigationBar.vue  # 导航栏
│   │   └── Footer.vue        # 页脚
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── views/             # 页面组件
│   │   ├── Home.vue           # 首页
│   │   ├── About.vue          # 关于我们
│   │   ├── Products.vue       # 产品中心
│   │   ├── News.vue           # 新闻资讯
│   │   ├── Contact.vue        # 联系我们
│   │   └── ...                # 其他页面
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML模板
├── package.json           # 项目依赖
├── vite.config.js         # Vite配置
└── README.md              # 项目说明

安装依赖

npm install

开发运行

npm run dev

项目将在 http://localhost:3000 启动

生产构建

npm run build

构建产物将输出到 dist 目录

预览构建结果

npm run preview

功能特性

已实现

• ✅ 响应式导航栏(PC端/移动端自适应)
• ✅ 轮播图组件
• ✅ 产品展示列表
• ✅ 新闻资讯列表
• ✅ 公司简介页面
• ✅ 联系我们页面(含表单)
• ✅ 页脚组件
• ✅ 移动端适配
• ✅ 路由管理
• ✅ 全局样式

待完善

• ⏳ 产品详情页
• ⏳ 新闻详情页
• ⏳ 企业文化页面
• ⏳ 企业荣誉页面
• ⏳ 发展历程页面
• ⏳ 技术优势页面
• ⏳ 核心专利页面
• ⏳ 资质认证页面
• ⏳ 搜索功能
• ⏳ 后台API集成
• ⏳ 图片懒加载

样式还原说明

项目按照原HTML项目的样式进行了1:1还原,包括:

1. 导航栏: 包含PC端和移动端两种样式,支持下拉菜单
2. 首页轮播图: 保持原有的轮播效果
3. 产品展示: 卡片式布局,悬停效果
4. 新闻资讯: 图片+日期+标题的卡片布局
5. 页脚: 包含导航、联系信息、社交媒体等
6. 响应式设计: 完美适配移动端设备

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge
• IE 11+ (需要polyfill)

注意事项

1. 图片资源需要从原项目迁移到 public/images/ 目录
2. 部分页面使用了占位符,需要根据实际需求完善
3. 表单提交功能需要对接后端API
4. 地图组件需要申请相应的地图API密钥

开发建议

1. 使用组件化开发,复用性更高
2. 遵循Vue3组合式API风格
3. 使用ElementPlus组件库提高开发效率
4. 保持代码风格统一
5. 注意移动端适配

许可证

Copyright © 2026 山西坤龙科技有限公司