【vue开发】如何将一个项目单独打包成组件

第一步： 写个常见的组件，定好name

 第二步：创建一个导出文件indexCommon.js

// 引入组件
import FlowEditorVue from './views/XxFlowEditor.vue'

// install
FlowEditorVue.install = function (Vue) {
  Vue.component('FlowEditorVue', FlowEditorVue) 
  // Vue.component(FlowEditorVue.name, FlowEditorVue)
}


// 导出
export { FlowEditorVue }

第三步：配置打包命令，在package.json下载增加

 可以定义打包后的包名为 FlowEditorLibrary，

"build-common": "vue-cli-service build --mode production --target lib --name FlowEditorLibrary ./pages/indexCommon.js",

第四步：打包组件

yarn build-common

第五步：拷贝打包后的组件包到项目中使用

 

 如下图，将组件及样式文件引入项目中全局使用

 

 第六步：直接可以使用了

 

第二种方案：将打包后的组件发布到npm私服，然后在项目中装依赖使用