快速上手

在src下新建文件夹plugin

新建src/plugin/lock.js 文件

/**
 * 详见文档《https://docs.qq.com/doc/DT2lCSlhwV0RFS1hM》
 *  BsCrumbs,
    BsDialog,
    BsForm,
    BsFormLayout,
    BsJsonEditor,
    BsKeepAlive,
    BsMainFormListLayout,
    BsOperationLog,
    BsQuickNav,
    BsQuery,
    BsTabKeepRouter,
    BsTable,
    BsTableForm,
    BsTabPanel,
    BsTitle,
    BsTree,
    BsTreeSet,
    BsTreeTable,
    BsTab,
    BsHeaderNav
 *
 */

window.__BS_UI_GLOBAL_CONFIG__ = {
  include: [],
  exclude: []
  // exclude: ['BsTable']
}

新建src/plugin/bs-ui.js 文件

import './lock'
import Vue from 'vue'
import BsUi from '@bszx/bs-ui'
Vue.use(BsUi)

新建src/plugin/http.js文件。 将原main文件中关于http相关代码剪切复制其中, 具体根据自己项目，下面作为参考

import Vue from 'vue'
import {
  get,
  post,
  put,
  del,
  postStringify,
  DownLoadToFile,
  downLoad,
  DownLoadToExcel,
  httpGlobalGatewayAgent,
  getSecretParams
} from '../api/http'

Vue.prototype.$http = {
  get,
  post,
  put,
  del,
  postStringify,
  DownLoadToFile,
  DownLoadToExcel,
  downLoad,
  httpGlobalGatewayAgent,
  getSecretParams
}

新建src/plugin/UI.js 文件， 将原main文件中关于本地组件库的代码剪切复制其中, 具体根据自己项目，下面作为参考

import Vue from 'vue'
import BSUI from '../components/index'
import router from '../router/index'
import store from '../store/index'
import vxeTable from '../base/vxeTable.js'
import relyComponent from '../base/relyComponent.js'

router.beforeEach((to, from, next) => {
  // =================处理从地址栏快捷方式进入当前页 --- 设置curNavModule========
  const { curNavModule: curNav, systemMenu, name: crtname } = { ...store.state, ...to }
  // 节点查找
  const nodeSeek = (tree, fn) => {
    const flatten = arr => {
      //  eslint-disable-next-line
      return arr.reduce((res, next) => (res = res.concat(Array.isArray(next.children) ? flatten(next.children) : next), res), [])
    }
    return flatten(tree).find(fn)
  }

  let curNavModule = curNav.url === crtname ? curNav : (nodeSeek(systemMenu, node => node.url === crtname) || {})
  // store.commit('setCurMenuObj', curNavModule)
  store.commit('setCurNavModule', curNavModule)
  // =================================================================

  BSUI.utilsLib.LoadingMark.showLoadingMark()
  setTimeout(function() { BSUI.utilsLib.LoadingMark.removeLoadingMark() }, 6000)
  // const { tokenid } = store.getters.getLoginAuthentication
  const tokenid = ((name) => {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) return unescape(r[2])
    return null
  })('tokenid')
  if (to.matched.some((r) => r.meta.requireAuth)) {
    if (tokenid) { // 判断是否已经登录
      if (to.name !== 'Login' && !Object.keys(store.state.userInfo || {}).length) {
        next('/')
      } else {
        next()
      }
    } else {
      BSUI.utilsLib.LoadingMark.removeLoadingMark()
      next({
        path: '/Login',
        name: 'Login' // 登录成功后重定向到当前页面
      })
    }
  } else {
    next()
  }
})
router.afterEach((to, from) => {
  BSUI.utilsLib.LoadingMark.removeLoadingMark()
})
Vue.use(vxeTable)
Vue.use(BSUI)
Vue.use(relyComponent)

引入bs-ui

在main文件中，按顺序引入以上三者

// 以下三个插件顺序不可乱
import './plugIn/http'
import './plugIn/UI'
import './plugIn/@bszx/bs-ui' // 组件库出现问题阻塞时，注释掉当前行即可就会启用业务代码中src/components下的组件

业务代码组件和bs-ui组件兼容处理

组件同名覆盖原理： 根据这个，当src/components/index.js引入业务代码中组件后，再引入bs-ui，同名组件会覆盖，从而用的是bs-ui里的

bs-ui出现问题快速回退原理: 根据上面的组件同名覆盖原理，当bs-ui出现问题时，此时在main.js注释掉bs-ui引入，就会启用src/components下组件

强烈不建议使用: 不想用bs-ui里的，仍然想用src/components下的个别组件策略: 在src/puligin/lock.js的exclude添加这个组件名称

理想状态：src/components/index.js 只引入bs-ui不包括的组件，然后这部分组件与bs-ui里的组件聚合，共同提供业务组件功能

注意：bs-ui各组件前都有Bs标识

Bs-UI的组件均添加了前缀Bs， 比如JsonEditor变成了BsJsonEditor

src/components/index.js中需要提取到Bs-UI的组件JsonEditor、TableForm、HeaderNav、FormLayout 没有添加Bs, 业务代码使用中也就没有Bs, 但是提取到Bs-UI就变成了BsJsonEditor、BsTableForm、BsHeaderNav、BsFormLayout， 所以需要将业务代码中调用改下。我这块只列了如上4个，如果有其它类似的，也需要这样处理

措施：

vscode选择src/views文件夹，右键文件夹搜索，一个个来，比如搜索JsonEditor， 替换成 BsJsonEditor 点击全部替换

开始使用

至此，一个基于 Vue 和 bs-ui 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档