Skip to content
On this page

h5

H5 项目与 web 项目搭建无二差别,主要是在使用一些细节上的区别

使用组件、依赖

  • 组件库上采用 vantUI
  • 需要做兼容性处理,autoprefixer,postcss-pxtorem 依赖必须安装

文件结构目录

项目目录结构同 web 一致

src 文件目录 所有变化

src
|-- api 请求接口注入
|      |-- 请求业务模块.js/ts
|-- assets 本地资源,资源分类
|      |-- svgs
|      |-- imgs
|      |-- videos
|-- components 组件
|      |-- 组件名称
|            |-- index.vue
|            |-- 其他文件(css/.js/.ts) 其他一些方法(非必有)
|-- config 配置文件夹(一般用作全局使用)(非必有)
|      |-- 文件名.js/ts/json
|-- directives 自定义指令 (非必要)
|      |-- 指令名称
|            |-- index.js/ts
|-- router 路由
|      |-- modules (根据项目是否进行业务分模块以及打包)(非必有)
|      |-- index.js/ts
|-- store 状态管理
|      |-- modules (根据项目是否进行业务分模块以及打包)(非必有)
|            |-- app.js/ts 应用的的一些设置
|            |-- dict.js/ts 数据字典
|            |-- permission.js/ts 权限
|            |-- 其他
|      |-- index.js/ts
|-- styles 样式文件
|      |-- index.css/scss/less 负责导入其他样式
|      |-- reset.css/scss/less 重置默认样式
|      |-- root.css/scss/less root样式
|      |-- theme.css/scss/less 主题样式
|      |-- global.css/scss/less 全局样式
|-- utils 工具类、第三方js/sdk
|      |-- request.js/ts 请求封装类
|      |-- js_sdk.js 第三方js_sdk
|      |-- validate.js 校验
|      |-- filter.js 等等
|-- pages 业务内容
|      |-- 业务组件名称
|            |-- dialog 弹窗dialog组件文件夹 (非必有)
|                  |-- 弹窗组件名称.vue
|            |-- index.vue 主要业务组件
|            |-- modules 子业务模块(非必有)
|                  |-- 子业务名称(复杂业务建立文件夹,简单业务直接名称.vue)
|            |-- components 业务模块公共组件
|                  |-- 业务模块组件.vue,如search.vue
|            |-- 业务名称(中文名称,便于查找).md  md文件备注开发该业务模块的一些注意事项
|-- App.vue 最外层vue示例容器
|-- main.js/ts vue注入以及依赖配置以及初始化

部署、发布与上线

该模块与 web 部署、发布与上线 一致