步骤:
1.项目1新建一个js文件,引入我们需要使用的vue页面:
// 引入组件
import indexVue from './index.vue'
// install
indexVue.install = function (Vue) {
Vue.component("indexVue", indexVue)
// Vue.component(FlowEditorVue.name, FlowEditorVue)
}
// 导出
export default indexVue
2.在项目1的package.json中添加命令将刚才导出的vue页面进行打包;
"lib": "vue-cli-service build --mode prod --target lib --name indexVue --dest lib src/views/workflow/work/index.js"
3.在你需要使用的项目中将打包后的lib目录放在项目2的public目录下;
4.然后再项目2的main.js文件中引入我们lib中的common.js并使用它;
import indexVue from '../public/lib/indexVue.common.js'
Vue.use(indexVue)
5.再我们的项目2的页面中直接使用它;
<template>
<div class="app-container">
<index-vue></index-vue>
</div>
</template>
<script>
export default {
name: 'WorkProcess',
data() {
return {}
},
}
</script>
<style scoped>
</style>