@proyavin

Что я делаю не так или почему в моей vue3 библиотеке компонентов я не вижу props при использовании компонентов?

При использовании компонентов из моей библиотеке в стороннем vue3 приложении, моя IDE (WebStorm) не подсказывает мне о наличии в нем props. VS Code вообще ругается на отсутствие d.ts в моих компонентах. Хотя файлы d.ts есть. Что я делаю не так? Если использовать стороннюю библиотеку, подсказки к props есть - на скринах. Спасибо

Листинги:
vite.config.ts

import path from "path";
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import { name } from "./package.json";

import externals from "rollup-plugin-node-externals";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [Vue(), externals(), dts()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name,
      formats: ["es", "umd", "cjs"],
      fileName: (format) => `${name}.${format}.js`,
    },
    rollupOptions: {
      external: ["vue", "element-plus"],
      output: {
        globals: {
          vue: "Vue",
        },
        assetFileNames: (assetInfo): string => {
          if (assetInfo.name === "style.css") {
            return `${name}.components.css`;
          }

          return assetInfo.name as string;
        },
        exports: "named",
      },
    },
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

src/index.ts

import type { App } from "vue";
import * as components from "./components";

function install(app: App) {
  for (const key in components) {
    app.component(key, components[key]);
  }
}

export default { install };

export * from "./components";


src/components/index.ts

import ComponentA from "./a/a.vue";
import ComponentB from "./b/b.vue";
import ComponentC from "./c/c.vue";

export { ComponentA, ComponentB, ComponentC };


Исходный код компонента А

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "ComponentA",
  props: {
    min: {
      required: false,
      type: Number,
      default: 0,
    },
    max: {
      required: false,
      type: Number,
      default: 1000,
    },
  },
  data() {
    return {
      value: ref([this.min, this.max]),
    };
  },
  methods: {
    onChange(e: any) {
      console.log(e);
    },
  },
});
</script>



Вот мой результат
AL781.png
Ожидаемый результат на примере сторонней библиотеке (IDE подсказывает мне о наличии у этого компонента props min и max)
WfsPp.png
  • Вопрос задан
  • 253 просмотра
Решения вопроса 1
modelair
@modelair
unsocial
код верный.
данные фичи корректно работают начиная с webstorm 2022.3.
в целом эта система требует внимательной настройки
package.json, опции main/module/exports и types,
и tsconfig.json
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы