1.项目介绍

本项目为前端(web端)，公共子包。主要包括以下4块内容：

• 一、公共基础组件(内含使用说明)。src/components
• 二、公共业务方法库。src/lib/util.js
• 三、公共接口请求封装。src/plugins/http.js
• 四、其他：公共Eslint校验规范、公共git提交规范、公共mixin封装、公共Vue模版指令封装..

2.项目使用

一、下载依赖包。

• 1、指定npm源+拉取权限token：根路径新增.npmrc文件，拷贝如下内容进去

registry=https://packages.aliyun.com/63be1278915b61498cd0c3b7/npm/npm-registry/
//packages.aliyun.com/63be1278915b61498cd0c3b7/npm/npm-registry/:_authToken=d3ac929b-2609-40fa-b62e-73f6ca9a0482

• 2、下载公共子包依赖。执行如下命令：

npm install @evision/common-sub-module

二、子包初始化。

• 1、引入公共子包初始化函数和需要的组件：在项目入口(main.js)中拷贝如下内容进去

  import { SaasMain, pageComponent } from '@evision/configcommon-sub-module'; // 公共子包初始化函数
  import '@evision/common-sub-module/dist/index.css'; // 公共子包样式

• 2、初始化子包和全局注册组件：

Vue.component('page', pageComponent); // 注册分页组件
const config = {
  env: process.env.NODE_ENV, // 环境(非必填)
  apiData: [] // 接口列表(非必填)
};
const vm = new SaasMain(config);
vm.init(Vue);

初始化完毕后，子包会自动在Vue实例全局注册组件和业务方法。有传入apiData接口列表的话，也会对接口列表进行处理而后注册。

三、具体使用。

• 1、公共组件使用，不用注册，直接使用，例如：

<form-content></form-content>

• 2、公共业务方法使用，例如：

// 在Vue文件中使用
let timeStr = this.$formatDate(time, 'yyyy-MM-dd') 
// 在js文件中使用
import vue from 'vue'
let timeStr = vue.prototype.$formatDate(time, 'yyyy-MM-dd') 

• 3、公共接口请求封装使用，例如：

// 在Vue文件中使用
this.$httpServer.getOrgTree({}).then(res => {...})
// 在js文件中使用
vue.prototype.$httpServer.getOrgTree({}).then(res => {...})

有传入apiData接口列表的话，对应的接口都可以通过该方式调用。这是一个http请求辅助工具(基于axios)。 1、能帮助我们根据contentType自动处理转化数据格式(urlencoded/formData/json)。 2、能帮助我们做一些全局公共异常校验和报错。 3、帮助我们做请求接口截流（比如阻止,按钮绑定的请求接口多次快速点击导致发起多次请求）。

3.本地调试

• 1、修改完代码后，子包打包。

npm run build_dev

• 2、子包建立全局软链接。

npm link

• 3、项目包使用软链接。

npm link @evision/common-sub-module

命令执行一次就行，此后不用再执行。但若项目的依赖包node_modules重新安装了，需要再重新执行npm link @evision/common-sub-module。

4.子包发布新版本

• 1、指定npm源+拉取权限token：根路径新增.npmrc文件，拷贝如下内容进去

registry=https://packages.aliyun.com/63be1278915b61498cd0c3b7/npm/npm-registry/
//packages.aliyun.com/63be1278915b61498cd0c3b7/npm/npm-registry/:_authToken=d3ac929b-2609-40fa-b62e-73f6ca9a0482

• 2、修改完代码后，子包打包。

npm run build_prod

• 3、在package.json中修改版本号。
• 4、发布版本。

npm publish

• 5、git提交。

git add .
git commit -m "feat: xxx"
git pull 
git push

5. 项目文件及架构

├── config # eslint校验规范、git提交校验规范 ├── node_modules # 项目依赖包文件夹 ├── src # 源代码 │ ├── assets # 样式图片等静态资源 │ ├── busComponents # 公共业务组件 │ ├── components # 公共基础组件库 │ ├── lib # 公共业务方法 │ ├── mixin # 公共mixin配置 │ ├── store # 公共vuex配置 │ └── index.js # 入口文件 ├── .env.xxx # 环境变量配置 ├── .gitignore # git 配置项 ├── .babelrc # babel-loader 配置 ├── webpack.config.js # 项目打包 配置 ├── readme.md # 项目说明文档 └── package-lock.json - npm依赖锁定版本目录文件 └── package.json # 依赖包配置文件