Zonst-vue-com NPM

zonst-vue-com

公共组件的抽离集合，该库中所涉及的有关element-ui组件的使用均基于@2.3.9。

使用方法

1. 安装

# 安装
npm i zonst-vue-com
# 或者
# yarn add zonst-vue-com

2. 注册

这里注意需要在element-ui之后注册，为了减少打包体积，没有将使用到的element-ui组件打包进本项目。
会在注册本组件时对element-ui挂载到Vue.prototype上的$ELEMENT做判断，如果没有该原型属性，则会警告提示，并且不予安装。如果项目里使用到了 @1.x 版本 element-ui，建议手动给Vue.prototype挂载$ELEMENT属性再注册该组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import zonstVueCom from 'zonst-vue-com'
import 'zonst-vue-com/style/zonst-vue-com.css'  // 如果有全局样式的话需要引入

Vue.config.productionTip = false

// 注意：一定放在 element 以后注册，否则检测不通过不会进行安装
Vue.use(element)
   .use(zonstVueCom)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

如果是像热更后台 element-ui为 1.x 版本使用，建议使用按需加载只导入支持该版本的组件：

安装babel-plugin-import：

npm i -D babel-plugin-import

配置babelrc 或者 babel.config.js 相关字段：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
+    ['import', {
+      libraryName: 'zonst-vue-com',
+      libraryDirectory: 'lib',
+      camel2DashComponentName: false,
+      camel2UnderlineComponentName: false
+    }, 'zonst-vue-com']
  ]
}

在main.js按需导入支持 1.x 版本的组件：

import Vue from 'vue'
import ElementUI from 'element-ui' //引入UI
import 'element-ui/lib/theme-default/index.css'
import { XTabLazy } from 'zonst-vue-com'
import 'zonst-vue-com/style/zonst-vue-com.css'  // 如果有全局样式的话需要引入

// 需要手动挂载 $ELEMENT 到原型上
Vue.prototype.$ELEMENT = {
  version: '1.4.2'
}

Vue
  .use(ElementUI)
  .use(XTabLazy)

之后正常使用。

各组件的具体使用方法请查看各自的文档。