Vue组件的打包与使用

新建入口文件 index.js

1. 在 src 目录下新建 index.js 文件内导入组件需要使用的文件

   import _Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import Component from './views/Component.vue'
   _Vue.prototype.$confirm = ElementUI.MessageBox.confirm
   _Vue.prototype.$message = ElementUI.Message
   _Vue.use(ElementUI)
   Component.install = Vue => {
   if (!Vue) {
    window.Vue = Vue = _Vue
   }
   Vue.component(Component.name, Component)
   }
   export default Component
   

配置 package.json

1. 添加出口文件路径和入口文件路径

"main": "component/xxxxxx.common.js",
"module": "component/xxxxxx.esm.js",

2. 添加在 scripts 里打包命令配置入口文件修改成新建的 index 文件

"build-bundle": "vue-cli-service build --target lib --name ComponentName src/index.js --dest component"

3. 执行 npm run build-bundle 或者 yarn build-bundle

使用组件

1.
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('component-a', Component.default)
</script>
2.
import Component from 'component/xxxxxx.umd.js'
components:{
  "my-component":Component
}