zyb-admin

zyb-admin

git 仓库地址：https://git.afpai.com/docker/nukefe

Build Setup

基于 vue-cli2.0+zyb-pc-ui
1.项目初始化
切换 npm 私服（因为 zyb-pc-ui 在http://fe.suanshubang.com/npm/私有服务器上面
npm config set registry 'http://fe.suanshubang.com/npm/'
npm install

2.项目运行
npn run dev

3.线上部署
npm run build

命名规范

1.文件夹命名以驼峰命名法命名

xxxXxx.vue/css/js 2.页面中的 class 以中划线命名 xxx-xx 3.函数名和变量名以驼峰命名法命名 searchForm 4.目录结构 views 里面 VUE 文件与 static(less,images),router(路由),components(组件),api(接口请求),mocker(模拟数据) 一一对应 采用文件夹结构对应

mock 数据

mocker-api that creates mocks for REST APIs.
###创建 mock 数据步骤

• 1.在文件夹 src/mocker/modules 添加对应模块的文件夹。例如：adminManage
• 2.在adminManage文件夹下面，添加index.js文件和对应数据的 json 文件
• 3.在src/mocker/index.js 引入对应的模块。例如：adminManage

const adminManage = require("./modules/adminManage/index");
const proxy = {
  ...user,
  ...adminManage
};

接口请求

• src/utils/request.js 封装了 axios 实例
• src/api/*.js 对应不同模块的接口请求，返回一个 promise

示例 1

import { getUserInfo } from "@/api/userInfo.js";
getUserInfo(params).then(res => {
  console.log(res);
});

示例 2

import { getMeunList } from "@/api/adminManage.js";
let data = {
  pageIndex: 1,
  pageSize: 2
};
getMeunList(data).then(res => {
  console.log(res);
});

npm 与 yarn 对应

• 安装 npm install ---- yarn
• 卸载 npm uninstall ---- yarn remove
• 全局安装 npm install xxx --global ---- yarn global add xxx
• 安装包 npm install xxx -save ---- yarn add xxx
• 开发模式安装包 npm install xxx -save-dev ---- yarn add xxx -dev
• 更新 npm update -save ---- yarn upgrade
• 全局更新 npm update -global ---- yarn global upgrade
• 卸载 npm uninstall ---- yarn remove xx
• 清除缓存 npm cache clean ---- yarn cache clean
• 重装 rm -rf node_modules && npm insatll ---- yarn upgrade

代码书写

1. 提倡 es6
2. 页面组件拆分
3. 搜索，查询，表格，翻页，抽屉，弹层已经封装，参考zyb-pc-ui
4. 页面 css 抽离
5. data 与 props 数据过多请单独提出
6. vuex 分割成模块module 7.dev 开发环境配置为 true，生产环境配置 false

   if (dev) {
     console.log("开发环境");
   } else {
     console.log("生产环境");
   }

## 分支与代码提交

1.新建分支

> **git checkout -b '新分支' origin/dev** 2.提交修改
> **git add .**
> **git commit -m '写详细'** 3.合并分支
> **git merge dev** 4.提交代码
> 打开 gitlab 提交 merge request
> 不允许自己合并代码，必须经过代码 review 5.提测分支
> 基于 dev 分支开启一个自己的分支并在自己的分支上开发相关的业务需求，比如：**git checkout -b [branch]**
> 开发完后把自己的分支代码推送到远程仓库上：**git push origin [branch]**
> 本地自测完毕并保证没问题后切换到 qa_test 分支：**git checkout qa_test**
> 更新 qa_test 测试分支远程最新的代码：**git pull origin qa_test**
> 再切换到自己的分支：**git checkout [branch]**
> 合并 qa_test 分支的最新代码到自己的分支(注意是往自己的分支合并而不是直接往提测分支合并): **git merge qa_test**
> 本地自测完毕并保证没问题后再切换到 qa_test 分支：**git checkout qa_test**
> 合并自己分支的代码到 qa_test 测试分支：**git merge [branch]**
> 推送到 qa_test 测试分支远程仓库：**git push origin qa_test** 6.上线
> 上线前检查当前分支是否最新代码

## last

> 未完待续
> 如有问题，请联系我 _[[e-mail]]([e-mail])_