在项目的入口文件(一般是main.js)中，引入框架。
~~~
import JBoot from 'jboot-env'; //引入框架
import 'jboot-env/style/loading.css'; //引入loading样式 3.1.3727之前版本
import 'jboot-env/style/index.css'; //引入框架样式 3.1.3727(含)之后版本
import ElementUI from 'element-ui';
//初始化框架
const jboot = new JBoot(function(options) {
//此处进行一些配置
options
.wrap() //配置自定义全局扩展
.install(ElementUI, {size: 'mini'}) //安装第三方插件
.build(); //必须在末尾添加.build。.build之后则默认框架配置完成。
});
~~~
<br/>
>使用框架之后，每个页面的使用方式，见【使用内置前必读】章节。
<br/>
> 提醒：所有配置项，在build之前都可链式调用。
<br/>
**Options：**
| 名称 | 参数介绍 | 是否可选配置项 |描述 |
| --- | --- | --- | --- |
| options.wrap(context) | require.context('./warp/', true, /\.js$/) |是| 传入一个requireContext，为自定义wrap目录的context |
| options.install(plugins, options) | plugins: 需要安装的第三方组件，例如：ElementUI。options：第三方组件库的配置项| 是 | 安装第三方依赖 |
|options.router(func)|传入回调函数进行路由配置，配置参数参照下方**routerConfig**|否|配置路由|
|options.http(func)|传入回调函数进行网络请求配置，配置参数参照下方**httpConfig**|否|配置网络请求|
|options.tips(func)|传入一个回调函数进行提示信息配置，配置参数参照下方**tipsConfig**。不进行配置的话，默认使用window.alert与window.confirm|是|配置全局提示信息|
|options.mapping(func)|传入回调函数，进行映射信息的配置，配置参数参照下方**mappingConfig**|是|可以配置内部数据绑定时的映射关系|
|options.methods(func)|传入一个键值对的配置对象，key为方法名称，value则是方法体|是|将方法绑定到vue实例上|
|options.store(func)|传入回调函数进行vuex的配置，配置参数参照下方**storeConfig**。不执行此配置项则不会加载vuex功能！|是|配置框架中的vuex|
|options.i18n(i18nOptions)|i18nOptions参照**vue-i18n**的配置项。|是|配置框架中的i18n|
|options.upload(uploadSetting)|uploadSetting配置项参照下方**uploadSetting**的配置项。使用方式参照 **【内置组件 - 上传组件】** |是|配置框架中的文件、图片上传。**3.1.3728起支持！！！**|
|components(context)|require.context('./components/', true, /\.vue$/)|是|传入一个requireContext，会将该目录下的文件自动注册为全局组件，组建的名称使用文件内的registryName属性名称，如果不存在，则使用name属性进行命名！|
|options.build()|可传入根实例文件，不传默认生成一个空的vue文件作为根实例文件|否|build操作在上方所有配置项选配完毕后，build之后默认框架配置完毕，进行初始化操作！|
**routerConfig：**
| 名称 | 参数介绍|是否可选配置项|描述 |
| --- | ---| ---| --- |
| routerConfig.table(array)|配置路由表，路由表的name、path、component为必填项。redirect属性为空的话框架会自动生成该函数！ |否 |进行路由表的一些配置 |
|routerConfig.check(func)|用来检测路由是否可以进行跳转，可以在此处进行菜单权限处理。详见**路由权限拦截**。|是|路由跳转前的处理|
|routerConfig.clearCheck(permissionCode)|permissionCode为要清除谁的校验，permissionCode为空，则清除所有路由的校验结果。|是|清除校验结果的缓存|
|routerConfig.after(func)|路由跳转之后的hook，是针对vueRouter的afterEach的封装。|是|路由跳转后的处理|
|routerConfig.hash()|采用hash路由模式，默认采用history模式。|否|切换至hash路由模式|
|routerConfig.build(routeConfig)|vuerouter的配置选项。|是|可传入vuerouter支持的配置项。**3.1.3672起支持！**|
**httpConfig：**
| 名称 | 参数介绍|是否可选配置项|描述 |
| --- | ---| ---| --- |
|httpConfig.api(context)| require.context('./warp/', true, /\.js$/)|是|传入api请求所在目录的context，在vue实例中使用this.$api时，需要配置此选项！|
|httpConfig.loading(boolean)| boolean值|是|http请求时，默认自动展示全屏加载遮罩，可通过此配置项，传入false来统一关闭此默认行为。也可针对单个http请求进行处理，详见【http请求】章节。|
|httpConfig.baseUrl(url)|传入全局http请求的地址|否|配置http域名或ip+端口|
|httpConfig.appendPage2Url()|无|是|将请求体中的分页参数，字段拼接到url后面且删除请求体中对应的分页参数，分页参数的属性名取下方**mappingConfig中的pageQueryParam配置。** 默认为pageNum、pageSize。|
|httpConfig.headers({key, value})|key：string，value：any，|是|配置以后，自动添加到http请求的头部|
|httpConfig.timeout(number)|配置http请求的超时时间，默认为5秒。|是|http请求超时时间|
|httpConfig.before(func)|请求发送之前的钩子配置，参数为请求发送的配置项|是|全局请求发送拦截|
|httpConfig.after(func)|请求返回数据后的钩子配置，参数为axiosResponse返回体|是|全局请求返回拦截|
|httpConfig.checkResponse(func)|检查请求返回内容是否符合要求。|是|return true则代表成功，return false则代表请求不符合要求，将自动归类为异常请求。|
|httpConfig.error(func)|请求异常时的回调，传入异常信息。|是|请求异常回调钩子|
|httpConfig.disabledErrorTip()|**3.1.3690起新增！！** 请求异常时，禁止框架弹出异常消息。如果只是禁止某个请求弹出异常消息，可查看【http请求】中errorTip配置项的使用方法。|是|禁止请求异常消息提示。|
|httpConfig.build(axiosConfig)|axios的配置选项。|是|可传入axios支持的配置项。**3.1.3672起支持！**|
**tipsConfig：**
| 名称 | 参数介绍|是否可选配置项|描述 |
| --- | ---| ---| --- |
|tipsConfig.confirm(func)|func：自定义函数|是|传入自定义confirm方法，默认window.confirm|
|tipsConfig.success(func)|func：自定义函数|是|传入自定义success提示方法，默认window.alert|
|tipsConfig.error(func)|func：自定义函数|是|传入自定义error提示方法，默认window.alert|
|tipsConfig.warning(func)|func：自定义函数|是|传入自定义warning提示方法，默认window.alert|
|tipsConfig.info(func)|func：自定义函数|是|传入自定义info提示方法，默认window.alert|
**mappingConfig：**
| 名称 | 参数介绍|是否可选配置项|描述 |
| --- | ---| ---| --- |
|mappingConfig.response(mapping)|mapping:{code: number类型，接口状态码。success: boolean值，true代表请求成功，dalse代表请求失败。message: string类型，接口返回的提示消息。now：string类型，接口返回的时间。data：任意类型，接口返回的响应数据。exData：任意类型，其他返回数据。error：string类型，接口返回的异常提示消息。}
|mappingConfig.pageResponse(mapping)|mapping:{pageNum: 'current', pageSize:'pages',total: 'total',data: 'records'}|是|配置分页返回对象的默认映射关系。|
|mappingConfig.pageQueryParam(mapping)|mapping:{pageNum: 'pageNum', pageSize:'pageSize'}|是|配置分页查询时，分页参数的键值。|
**storeConfig：**
| 名称 | 参数介绍|是否可选配置项|描述 |
| --- | ---| ---| --- |
|storeConfig.add(name, store)|name: 状态的名称，可作为vue实例中$stores的可选值。store：vuex的对象格式，例如：{state: {count: 0},mutations:{ADD_COUNT(state, num) => state.count = num}}|是|自定义vuex对象配置|
|storeConfig.build(storeConfig)|vuex的配置选项|是|可传入vuex支持的配置项。**3.1.3672起支持！**|
**uploadSetting - 通用配置(file+image)**
```
//上传地址
url: string,
//基础请求路径
baseURL: string,
//进行上传时，file对应的key值
name: string,
//按钮的文字
buttonText: string,
//展示在上传按钮下方的提示信息
tip: string,
//是否多选
multiple: boolean,
//单文件最大体积，单位是MB
maxSize: number,
//所有文件最大体积，单位是MB
totalMaxSize: number,
//文件大小超过限制 (error, fileObj)
onSizeError: (error: Error, fileObj: FileObj) => {},
//上传、下载进度改变时触发的事件 (event, fileObj, type = 'upload' | 'download')
onProgress: (event: Event, fileObj: FileObj, type: 'upload' | 'download') => {},
//单文件上传成功时的事件 (response, fileObj)
onUploadSuccess: (response: AxiosResponse, fileObj: FileObj) => {},
//文件取消上传时触发的事件 (error, fileObj)
onUploadCancel: (error: Error, fileObj: FileObj) => {},
//单文件上传失败时 (error, fileObj)
onUploadError: (error: Error, fileObj: FileObj) => {},
//双向绑定的值改变时触发的事件 (fileList)
onInput: (fileList: FileObj[]) => {},
//文件下载完毕事件 (fileObj)
onDownloadAfter: (fileObj: FileObj) => {},
//文件删除事件 (fileObj)
onDelete: (fileObj: FileObj) => {},
//请求超时时间，单位是毫秒
timeout: number,
//是否开启切片上传
chunk: boolean,
//切片上传时，分割大小，单位是MB
chunkSize: number,
//文件名对应的字段
nameField: string,
//文件地址对应的字段
urlField: string,
//是否可下载附件
download: boolean,
//是否禁用
disabled: boolean,
//回显值
value: [any[], object],
//是否展示上传失败的项目
errorItemVisible: boolean,
//其他需要上传的参数
params: object,
//携带的请求头
headers: object
```
**uploadSetting - file配置**
```
//可上传的类型
accept: string
//点击文件名时触发的事件
onTitleClick: (fileObj: any) => {}
```
**uploadSetting - image配置**
```
//可上传的类型
accept: string,
//是否采用base64形式
base64: boolean,
//base64上传时，图片压缩质量
quality: number
```
