在項目的入口文件(一般是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
```
