h5网页模板下载(h5模板素材) 收藏 0

Vue + H5 最佳实践模板

模板基于 vue-cli4 和 Vant-ui 搭建，进行大型 H5 项目开发最佳实践方案，让我们来一探究竟

本项目已经为你生成了一个完整的开发框架，下面是整个项目的目录结构。

TIP

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案。

另外因为 node-sass 是依赖 python环境的，如果你之前没有安装和配置过的话，需要自行查看一下相关安装教程。

启动完成后会自动打开浏览器访问 [http://localhost:9000， 你看到下面的页面就代表操作成功了。

接下来你可以修改代码进行业务开发了，本项目内建了典型业务模板、模拟数据、状态管理、国际化、全局路由等等各种实用的功能来辅助开发

目前前端的一个开发趋势是以搭建单页应用 (SPA) 为主的。当应用体系比较大，或者你的应用业务逻辑足够复杂的时候，会遇到各种各样的问题，我们随便提两点：

• 产品需要多人协作时，每个人的代码风格和对业务的理解不同，导致业务逻辑分布杂乱无章
• 对产品的理解停留在页面驱动层面，导致实现的技术模型与实际业务模型出入较大，当业务需求变动时，技术模型很容易被摧毁
• …

针对上面所遇到的问题，我们以下面这张架构图做讲解：

其中 视图层/View 是大家接触最多的，想必大家都很了解，就不在这里介绍了，重点介绍其他几个层的含义：

Services 层是用来对底层技术进行操作的，例如封装 AJAX 请求,操作浏览器 Cookie、LocaStorage、IndexedDB，操作 Native 提供的能力（如调用摄像头等），以及建立 Websocket 与后端进行交互等。

Axios 封装

IndexedDB

…….

实体 Entity 是领域驱动设计的核心概念，它是领域服务的载体，它定义了业务中某个个体的属性和方法。区分一个对象是否是实体，主要是看他是否有唯一的标志符（例如 id）

通过上面的代码可以看到，这里主要是以实体本身的属性以及派生属性为主，当然实体本身也可以具有方法，用于实现属于实体自身的业务逻辑。

并不是所有的实体都应该按上面那样封装成一个类，如果某个实体本身业务逻辑很简单，就没有必要进行封装，例如本模板中的 Test 只是做个演示。

Interactors 层是负责处理业务逻辑的层，主要是由业务用例组成

通过上面的代码可以看到，Sevices 层提供的类的实例主要是通过 Interactors 层的类的构造函数获取到，这样就可以达到两层之间解耦，实现快速切换 service 的目的了，当然这个和依赖注入 DI 还是有些差距的，不过已经满足了我们的需求。

另外 Interactors 层还可以获取 Entities 层提供的实体类，将实体类提供的与实体强相关的业务逻辑和 Interactors 层的业务逻辑融合到一起提供给 View 层，例如：

当然这种分层架构并不是银弹，其主要适用的场景是：实体关系复杂，而交互相对模式化，例如企业软件领域。相反实体关系简单而交互复杂多变就不适合这种分层架构了。

然后需要明确的是，架构和项目文件结构并不是等同的，文件结构是你从视觉上分离应用程序各部分的方式，而架构是从概念上分离应用程序的方式。你可以在很好地保持相同架构的同时，选择不同的文件结构方式。没有完美的文件结构，因此请根据项目的不同选择适合你的文件结构。

页面整体布局是一个产品最外层的框架结构, 这里使用了 vue-router 路由嵌套, 所以一般情况下，你增加或者修改页面只会影响 app-main这个主体区域。其它配置在 layout 中的内容如：底部导航都是不会随着你主体页面变化而变化的。

这里在 app-main 外部包了一层 keep-alive 主要是为了缓存 的，如不需要可自行去除。

在样式开发过程中，有两个问题比较突出：

• 全局污染 —— CSS 文件中的选择器是全局生效的，不同文件中的同名选择器，根据 build 后生成文件中的先后顺序，后面的样式会将前面的覆盖；
• 选择器复杂 —— 为了避免上面的问题，我们在编写样式的时候不得不小心翼翼，类名里会带上限制范围的标示，变得越来越长，多人开发时还很容易导致命名风格混乱，一个元素上使用的选择器个数也可能越来越多，最终导致难以维护。

好在 vue 为我们提供了 scoped 可以很方便的解决上述问题。 它顾名思义给 css 加了一个域的概念。

只要加上 style scoped 这样 css 就只会作用在当前组件内了。

TIP

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

vue-h5-template 所有全局样式都在 @/src/styles 目录下设置

在 vue-h5-template 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1. UI 组件交互操作
2. 调用统一管理的 api service 请求函数
3. 使用封装的 request.js 发送请求
4. 获取服务端返回
5. 更新 data

其中，@/src/utils/request.js 是基于 Server目录的 http 的二次封装，便于统一处理 POST，GET 等请求方式。具体可以参看项目代码。

定义接口地址统一管理 src/constants/api/test.js

请求方法 src/core/interactors/test-interactor.js

请求方式 src/utils/request.js

TIP

目录结构不要纠结，个人习惯而定

页面使用 src/pages/test/index.vue

可能大家会觉得很繁琐，这么多文件容易搞混，重复编写代码等等，不要着急，本模板配置了自动生成文件，上述除了视图/View层这块需要你手动去编写代码，其他的我们都会去一键生成，接下来我们就来讲讲使用方法。

在开发过程中,无论我们添加页面也好还是添加组件等等。都需要不停地新建 .vue文件(或者其他框架或者html/js/css文件)

以Vue项目为例, 我们新建一个component 或 view 的时候，需要新建一个.vue文件，然后写 <template>、<script>、<style>。最后写我们的业务代码。如果使用 class 风格来写 Vue 还需要在每个页面都引入 Vue 和Component

既然这种重复性的工作，而且并没有实际的操作难度，我们是学不到任何东西的，那有没有什么办法可以告别手敲呢， 在这里给大家介绍一个插件 plop，它的使用方式比较简单，在这里我不做过多介绍了，大家可以查阅文档，或者直接拉取本模板进行查阅

本项目中我一个配置了5项，他们分别代表着什么呢？

TIP

创建模板指令是 npm run new，记得属于目录或文件名称哦

• DSBridge 真正跨平台，官方同时支持 ios 和 android。
• DSBridge 支持同步调用。
• 三端友好；无论是在 ios、android 或者 web，使用起来都非常简单优雅，这一点和 WebViewJavascriptBridge 相比，简直就是艺术。
• DSBridge 为国人项目，有详细中文文档和问题反馈渠道。

• 跨平台；同时支持 ios 和 android。
• 双向调用；js 可以调用 native， native 可以调用 js
• 不仅支持异步调用，而且页支持同步调用（dsbridge 是唯一一个支持同步调用的 javascript bridge）
• 支持进度回调，多次返回（常用于文件下载进度、计时器等）
• Android 支持腾讯 x5 内核
• 三端易用；无论是前端还是 android 或 ios，使用都非常简单，极大的降低集成／学习成本

不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。

ESLint 所有的配置文件都在 .eslintrc.js 中。 本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。大家可以按照自己的需求进行定制化配置。

代码风格在 .editorconfig，大家可以按照个人喜欢个性化修改。

如果你没有在本项目 Icon 中找到需要的图标，可以到 iconfont.cn 上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。

首先，搜索并找到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。

现在本项目支持和推荐单独导出 svg 的引入使用方式。下载方式如下图：

下载完成之后将下载好的 .svg 文件放入 @/icons/svg 文件夹下之后就会自动导

已经配置指令，只需要执行相关指令就好：

本项目集合了国际化 i18n 方案。通过 vue-i18n而实现。

由于本项目 ui 框架使用了 Vant UI，所以国际化的同时也要将其国际化。同时将当前 lang 语言存在 cookie之中，为了下次打开页面能记住上次的语言设置。

Html 中使用：

Js 中使用：

由于本模板是H5开发模板，所以一定要有样式适配啦。对此目前主流方案有 vw 和 rem，我们来使用一个工具来帮助我们完成屏幕的适配，postcss-px-to-viewport，安装之后我们只需要在 postcss.config.js 配置即可，具体配置说明还请查阅文档。

在调试方面，本项目使用 vconsole 作为手机端调试面板，功能相当于打开 PC 控制台，可以很方便地查看 Console, Network, Element、Storage 等关键调试信息。

## 错误监控平台

对别的错误监控平台也不太了解，只记得当时在写 PHP 的时候有用过 sentry，所以本项目中就配置了它作为错误监控平台。同时使用了这个大佬的插件 编译时自动在 try catch 中添加错误上报函数的 babel 插件，相关配置在 .sentryclirc 这个文件中，具体相关配置在你创建时就会给出提示。还不清楚的请查阅 配置sentry

代码提交记录是一个很好的代码修改日志。规范的代码提交记录，不管在平时代码开发维护过程中，还是在定位 bug 或者回退版本来说都是极为重要。

也已经配置相关指令：

就会出现类似与这种的文件格式：

PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。

• 可以生成桌面小图标，不需要打开浏览器，方便用户访问
• 通过网络缓存提升页面访问速度，达到渐进式的页面甚至离线访问，提升用户体验
• 实现类似app的推送功能，生成系统通知推送给用户

vue 最新脚手架中集成了 pwa 的插件，将 pwa 的实现变得更加的简单，只需要在 vue.config.js 文件中配置 pwa 属性就可以自动生成对应的 service-worker.js 配置文件，在这不做过多介绍。

• vconsole-webpack-plugin
• @sentry/webpack-plugin
• lodash-webpack-plugin

…

智慧物联网 智慧物流 智慧医疗H5大数据大屏展示html模板

今天还是分享大数据H5大屏显示的网站模板，今天这五个主要用于智慧物联网 智慧物流 智慧医疗这三个大的行业，如果你觉得有用请转发，让更多人知道，私信我获取下载地址。

一.智慧物联网平台数据统计h5模板

HTML5炫酷大气物联网大数据智慧云平台数据统计网页模板下载。高端大气智慧消防物联网大数据可视化云平台HTML5网站模板。

二.新能源车联网综合大数据平台h5模板

echarts大数据可视化新能源车联网综合大数据平台，通过echarts开发，新能源车联网综合大数据可视化展示平台HTML网页模板。

三.智慧物流大数据服务平台h5模板

非常实用的数据可视化模板，可以直接使用。智慧物流服务中心大数据可视化HTML5+Echarts模板。可以直接引入项目使用，页面所有的图表都可以根据需要替换，直接就用的好东西，给大家分享出来。

四.智慧物流h5大数据模板

深蓝色物流大数据页面html+js+css代码，结合echarts.js可视化统计图表，动态的流动地图，智慧物流大数据HTML源码动态地图。大数据大屏展示模板酷炫，酷炫，自适应，可根据自己需求进行更改，以适应自己的需要。

五.智慧大数据医疗h5模板

HTML5医院医疗机构大数据数据可视化智能云平台网站模板下载。下载文件包含采集情况、指标分析、趋势分析、慢性病人列表等等全屏的大数据统计可视化管理页面模板html下载。基本上目前能下载到的大数据可视化展示html的模板。均是基于echarts的模板。 大屏展示数据分析。

以上五个为云码素材收藏的智慧物联网 智慧物流 智慧医疗H5大数据，大屏展示模板，如果你喜欢，觉得有帮助，请收藏，转发。

获取下载方法，请关注云码素材，私信我。

欢迎关注云码素材，交流分享! 云码素材原创作品，更多精品资源下载，技术分享请关注，私信云码素材！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com