Appearance
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 部署、发布与上线 一致