basic-h5
介绍
技术栈
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
//什么叫“如条件允许”：比如我们需要
import routes from './routers/router'
const router = new VueRouter({
routes
})
//这种情况下，routes可以用小写，事实上，上面的范例可以换一种写法：
import Routes from './routers/router'
const router = new VueRouter({
routes: Routes
})
wiki 文档
目录结构
.
├── 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工程配置
.
项目运行
git clone http://112.124.100.131/base/ebiz-base-vue-h5.git
cd ebiz-base-vue-h5
yarn install（推荐使用yarn）
yarn serve（开发环境）
项目打包
# 测试环境打包
yarn run build:envName（测试环境打包）
# 线上环境打包
yarn run build:prd（线上环境打包）
预发环境打包预览、文件检查等
# 代码检查
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 请求文件
- 模块划分：app 为基础工程模块、其他项目需另建文件夹
- 拦截器：超时设置、请求头加 token、统一处理异常、token 异常重新登录等
- mock 数据
- 环境配置
- 在 config 文件夹下 index.js，通过 process.env.NODE_ENV 对环境进行配置
- 在以下根目录env.xxx文件内配置相关环境变量
- env.dev 开发环境
- env.test 测试环境
- env.uat 回归环境
- env.prd 生产环境
- 跨域问题可通过后台解决，也可设置前端代理 proxy
- router
- 模块划分
- 路由拦截
- 路由懒加载
- 权限控制
- 可在 permission.js 里设置黑白名单