使用lerna开发vue3组件库 组件加载出错

xinbear
  • 335

我packages下有两个包 一个 component放组件 一个docs写文档(vue-cli创建的项目)

component
image.png

component/index.ts

import XbButton from './Button'
import XbRadio from './Radio'
import type { App } from 'vue'

export {
  XbButton,
  XbRadio
}

const components: any = {
  XbButton,
  XbRadio
}

const makeInstaller = (components: any) => {
  const install = (app: App, opts: any) => {
    Object.keys(components).forEach(key => {
      // components.forEach((c: any) => {
      console.log('key', key)
      app.use(components[key])
    })
  }

  return {
    install
  }
}

export default {
  install: makeInstaller(components).install,
  ...components
}
// export default components

component/Button/index.ts

import Button from './button.vue'

import type { App, Plugin } from 'vue'
type SFCWithInstall<T> = T & Plugin

Button.install = (app: App): void => {
  app.component(Button.name, Button)
}

const _Button = Button as SFCWithInstall<typeof Button>

export default _Button

component/Button/button.vue

<template>
  <div class="xb-button">
    <h1 class="xb-button-test">This is Button1</h1>
    <h1 class="xb-button-test2">This is Button2</h1>
    <div
      v-for="(item, index) of arr"
      :key="index"
    >
      {{ item }}
    </div>
    <el-button>adsa11111</el-button>
  </div>
</template>
<script lang="ts">
import { ElButton } from 'element-plus'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'XbButton',
  components: {
    ElButton
  },
  data() {
    return {
      arr: [1, 2, 3]
    }
  }
})
</script>

然后我在docs的package.json加入

"dependencies": {
    "@xinbear/component": "^1.0.0"
  },

再执行 lerna link 将component链接到docs的node_modules中

image.png

然后在docs的main.ts里引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import xinbear from '@xinbear/component'
console.log('xinbear', xinbear)

createApp(App)
.use(store)
.use(router)
.use(xinbear)
.mount('#app')

App.vue里使用

<template>
  <div id="nav">
    <XbButton></XbButton>
  </div>
</template>

这个时候问题出现了问题
页面展示的组件内容
image.png
button组件中的v-for没有渲染 el-button组件渲染错误
image.png

并且console中有warn
image.png

Vue warn: resolveComponent can only be used in render() or setup().
Vue warn: Invalid VNode type: Symbol(Fragment) (symbol)
Vue warn: Invalid VNode type: Symbol(Text) (symbol)

我查了好久都没有找到原因 请问大佬们这个是什么原因出的错误

代码已上传到github
https://github.com/gaiyonghuy...

回复
阅读 181
1 个回答

找到原因了 因为component和docs里import的vue不是同一个 通过在package.json设置

"peerDependencies": {
    "element-plus": "^1.1.0-beta.20",
    "vue": "^3.2.0"
  },

一同使用外层lerna的vue就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏