mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-06 17:36:48 +08:00
184 lines
8.0 KiB
Markdown
184 lines
8.0 KiB
Markdown
# basic-h5
|
||
|
||
## 介绍
|
||
|
||
- UI 框架使用[Vant](https://youzan.github.io/vant/#/zh-CN/intro)，它是轻量、可靠的移动端 Vue 组件库
|
||
- 组件导入方式和 viewport 适配参考：[快速上手](https://youzan.github.io/vant/#/zh-CN/quickstart)
|
||
|
||
### 技术栈
|
||
|
||
Vue2 + Vue-Router + Axios + Vuex + Vant + Vue-Loader + Vue-Cli3.0 + ...
|
||
|
||
### 命名规范
|
||
|
||
- 组件名：大驼峰
|
||
- 方法名：小驼峰
|
||
- class 类名：连字符(a-b)
|
||
- 常量(const)：全大写
|
||
- 变量(let)：小驼峰
|
||
- 文件夹命名： 一律小写(只允许小写字母、中横杠-，如：a-b)
|
||
- Vue 文件命名： 大驼峰式命名法，即每个单词的首字母大写 CamelCase.vue
|
||
- css,js,image 等文件命名：一律小写(css/js 文件使用中横杆-，image 使用下划线\_)第三方除外
|
||
- 如条件允许： import 进来的变量名及 export 都采用大驼峰形式命名，如 import VueRouter from 'vue-router' 及 export default Common
|
||
|
||
```javascript
|
||
//什么叫“如条件允许”：比如我们需要
|
||
import routes from './routers/router'
|
||
const router = new VueRouter({
|
||
routes
|
||
})
|
||
//这种情况下，routes可以用小写，事实上，上面的范例可以换一种写法：
|
||
import Routes from './routers/router'
|
||
const router = new VueRouter({
|
||
routes: Routes
|
||
})
|
||
```
|
||
|
||
## wiki 文档
|
||
|
||
[wiki 参考文档](http://114.215.252.122:8090/pages/viewpage.action?pageId=13960243)
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
.
|
||
├── node_modules // npm/yarn安装的项目依赖模块
|
||
├── public // 静态资源目录
|
||
│ ├── webViewBridge.js //跳转文件 与原生交互js
|
||
|
||
├── src // 源码目录
|
||
│ ├── api // 网络请求文件
|
||
│ │ ├── app // 基础工程网络请求文件
|
||
│ │ │ ├── user.js // 用户模块api请求
|
||
│ │ ├── example
|
||
│ │ │ └── *** // 示例模块api请求
|
||
│ ├── assets // 资源目录
|
||
│ │ ├── fonts // 字体文件
|
||
│ │ ├── images // 图片文件
|
||
│ │ | ├── app // 基础工程图片
|
||
│ │ | ├── 404_img // 404图片
|
||
│ │ ├── js
|
||
│ │ | ├── utils //工具类js
|
||
│ │ | | ├── get-url.js //根据设置获取请求url
|
||
│ │ | | ├── premission.js //权限控制
|
||
│ │ | | ├── request.js //拦截器
|
||
│ │ | | ├── validate.js //表单校验
|
||
│ │ | ├── vendor //第三方js
|
||
│ │ | ├── common.js //全局js方法
|
||
│ │ | ├── business-common.js //业务相关全局js方法
|
||
│ │ ├── sass
|
||
│ │ | └── common.scss // 样式出口文件
|
||
│ │ | └── vant-ui.scss // vant样式
|
||
│ │ | └── minix.scss // 样式配置
|
||
│ │ | └── transition.scss // 动画样式
|
||
│ │ | └── utils.scss // 工具样式
|
||
│ │ | └── variables.scss // 变量文件
|
||
│ ├── components // 全局组件
|
||
│ | ├── common //公共组件
|
||
│ │ | └── Jump // 跳转组件
|
||
│ ├── config // 配置文件
|
||
│ | ├── index.js // 环境配置
|
||
│ | ├── urlMap.js // api url配置
|
||
│ ├── filters
|
||
│ | ├── index.js // 过滤器
|
||
│ ├── router
|
||
│ | ├── app // 基础工程路由
|
||
│ | ├── example // 示例路由
|
||
│ | ├── index.js // 路由配置
|
||
│ ├── store
|
||
│ | ├── modules // 状态模块
|
||
│ | ├── getters.js // 配置getters
|
||
│ | ├── index.js // 引用vuex，创建store
|
||
│ ├── views
|
||
│ | ├── app // 基础工程页面
|
||
│ | | ├── layout // layout：导航栏、侧边栏、主窗口等
|
||
│ | | ├── login // 登录页面
|
||
│ | | ├── 404.vue // 404页面
|
||
│ | | ├── home.vue // 首页
|
||
│ | ├── example // 示例页面，不一一列举
|
||
│ ├── App.vue // 页面入口文件
|
||
│ ├── main.js // 程序入口文件，加载各种公共组件
|
||
├── tests // 测试相关文件
|
||
├── .env.dev // 开发环境配置
|
||
├── .env.test // 测试环境配置
|
||
├── .env.uat // 回归环境配置
|
||
├── .env.prd // 生产环境配置
|
||
├── .env.staging // staging环境配置
|
||
├── .eslintrc.js // eslint配置
|
||
├── babel.config.js // 转码配置
|
||
├── .prettierrc // prettier配置
|
||
├── jest.config.js // 测试配置
|
||
├── package.json // 安装包列表文件
|
||
├── postcss.config.js // 样式配置
|
||
├── vue.config.js // vue工程配置
|
||
.
|
||
```
|
||
|
||
## 项目运行
|
||
|
||
```bash
|
||
git clone http://112.124.100.131/base/ebiz-base-vue-h5.git
|
||
|
||
cd ebiz-base-vue-h5
|
||
|
||
yarn install（推荐使用yarn）
|
||
|
||
yarn serve（开发环境）
|
||
|
||
```
|
||
|
||
## 项目打包
|
||
|
||
```bash
|
||
# 测试环境打包
|
||
yarn run build:envName（测试环境打包）
|
||
|
||
# 线上环境打包
|
||
yarn run build:prd（线上环境打包）
|
||
```
|
||
|
||
## 预发环境打包预览、文件检查等
|
||
|
||
```bash
|
||
# 代码检查
|
||
yarn run lint
|
||
|
||
# 代码检查修复
|
||
yarn run lint:fix
|
||
|
||
#代码格式化
|
||
yarn run format
|
||
```
|
||
|
||
## 快速开始项目
|
||
|
||
1、src>>api 目录下创建项目所需 http 请求文件夹
|
||
2、src>>assets 目录下创建项目所需的 js image 文件夹，以及 scss 文件
|
||
3、src>>router 目录下创建所需路由文件夹
|
||
4、src>>store>>modules 目录下创建所需状态管理文件
|
||
|
||
##### [注：项目开始前请先配置 vscode 代码检查、格式化](http://115.29.19.195:8090/pages/viewpage.action?pageId=13960404)
|
||
|
||
## 主要功能点介绍
|
||
|
||
- http 请求文件
|
||
- 模块划分：app 为基础工程模块、其他项目需另建文件夹
|
||
- 拦截器：超时设置、请求头加 token、统一处理异常、token 异常重新登录等
|
||
- mock 数据
|
||
- [工具 rap2](http://rap2.taobao.org/) 、[参考链接](http://115.29.19.195:8090/display/VUE/mock)
|
||
- 通过 config 文件夹下 urlMap.js，配置 mock 接口请求
|
||
- 环境配置
|
||
- 在 config 文件夹下 index.js，通过 process.env.NODE_ENV 对环境进行配置
|
||
- 在以下根目录env.xxx文件内配置相关环境变量
|
||
- env.dev 开发环境
|
||
- env.test 测试环境
|
||
- env.uat 回归环境
|
||
- env.prd 生产环境
|
||
- 跨域问题可通过后台解决，也可设置前端代理 proxy
|
||
- router
|
||
- 模块划分
|
||
- 路由拦截
|
||
- 路由懒加载
|
||
- 权限控制
|
||
- 可在 permission.js 里设置黑白名单
|