Question

我正在使用Typescript和Sass在Vue中构建组件库。所以在Vue中执行此操作的方法是创建一个Vue插件，对吧？

一个月来，我一直在为此苦苦挣扎。我的Vue插件中的组件已注册，但它们没有安装在我要在其中使用的其他项目中。

组件库

src / components / Button.vue

<template>
  <button
    class="Button"
    :disabled="disabled"
    :class="{'is-block': block, 'is-disabled': disabled }"
  >
    <slot></slot>
  </button>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'lib-button'
})
export default class extends Vue {
  @Prop() block!: boolean
  @Prop() disabled!: boolean
  @Prop() outline!: boolean
}
</script>

<style lang="scss" scoped>
</style>

src / components / index.ts

import button from './Button.vue'

const Components: any = {
  button
}

export default Components

src / lib.ts

import _Vue from 'vue'
import Components from './components'

export default {
  install (Vue: typeof _Vue, options: any) {
    for (const key in Components) {
      if (Components.hasOwnProperty(key)) {
        Vue.component(`lib-${key}`, Components[key])
      }
    }
  }
}

package.json

{
  "name": "3oilerplate",
  "version": "x.x.x",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name 3oilerplate ./src/lib.ts",
    "test:unit": "vue-cli-service test:unit",
    "release": "npm run lib && npm version patch && npm publish --access public",
    "release:minor": "npm run lib && npm version minor && npm publish --access public",
    "release:major": "npm run lib && npm version major && npm publish --access public"
  },
  "files": [
    "dist/",
    "src/",
    "public/",
    "*.json",
    "*.js"
  ],
  "main": "./dist/3oilerplate.common.js",

在这里，我使用release命令，该命令也执行lib命令，该命令为我的comp库构建了一个lib版本。

其他项目

src / main.ts

import Lib from '3oilerplate'
Vue.use(Lib)

在这里，我将导入已编译的Typescript Vue库（3oilerplate.common.js）

src / Main.vue

<template>
  <Layout>
    <Body>
      <lib-button>Test</lib-button>
  </Layout>
</template>

在这里，我尝试使用导入的Vue插件中的组件，它不会在浏览器中给我带来错误，因此该组件注册了，只是没有安装在浏览器中。

请帮助我，真的希望有人看到我在做错事情。

Vue插件（comp lib）中的组件注册但无法挂载

组件库

其他项目

0 个答案: