Что я делаю не так или почему в моей 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) =&gt; `${name}.${format}.js`,     },     rollupOptions: {       external: ["vue", "element-plus"],       output: {         globals: {           vue: "Vue",         },         assetFileNames: (assetInfo): string =&gt; {           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)),     },   }, });

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";

1	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 };

1	import ComponentA from "./a/a.vue"; import ComponentB from "./b/b.vue"; import ComponentC from "./c/c.vue"; export { ComponentA, ComponentB, ComponentC };

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

&lt;script lang="ts"&gt; 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);     },   }, }); &lt;/script&gt;

Вот мой результат

Ожидаемый результат на примере сторонней библиотеке (IDE подсказывает мне о наличии у этого компонента props min и max)

Дополнительно:

покажи d.ts

и package.json

modelair,

declare const _sfc_main: import("vue").DefineComponent&lt;{     min: {         required: false;         type: NumberConstructor;         default: number;     };     max: {         required: false;         type: NumberConstructor;         default: number;     }; }, unknown, {     value: import("vue").Ref&lt;number[]&gt;; }, {}, {     onChange(e: any): void; }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps &amp; import("vue").AllowedComponentProps &amp; import("vue").ComponentCustomProps, Readonly&lt;import("vue").ExtractPropTypes&lt;{     min: {         required: false;         type: NumberConstructor;         default: number;     };     max: {         required: false;         type: NumberConstructor;         default: number;     }; }&gt;&gt;, {     min: number;     max: number; }&gt;; export default _sfc_main;

declare const _sfc_main: import("vue").DefineComponent<{ min: { required: false; type: NumberConstructor; default: number; }; max: { required: false; type: NumberConstructor; default: number; }; }, unknown, { value: import("vue").Ref<number[]>; }, {}, { onChange(e: any): void; }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{ min: { required: false; type: NumberConstructor; default: number; }; max: { required: false; type: NumberConstructor; default: number; }; }>>, { min: number; max: number; }>; export default _sfc_main;

package.json

{   "name": "test",   "version": "0.0.1",   "private": true,   "scripts": {     "prepare": "npm run build:lib",     "dev": "vite",     "build:app": "run-p type-check build-only",     "preview": "vite preview",     "build-only": "vite build",     "build:style": "npm run build:scss",     "build:scss": "sass --load-path=/node_modules/ --no-charset src/assets/styles/main.scss | node build/print-banner.js &gt; dist/lib.base.css &amp;&amp; cleancss -o dist/lib.base.min.css dist/lib.base.css",     "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types",     "build:lib": "npm run build-only &amp;&amp; npm run build:types &amp;&amp; npm run build:style",     "type-check": "vue-tsc --noEmit",     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"   },   "files": [     "dist"   ],   "exports": {     ".": {       "import": "./dist/lib.es.js",       "require": "./dist/lib.umd.js"     },     "./style.css": {       "import": "./dist/lib.base.css",       "require": "./dist/lib.base.css"     },     "./components.css": {       "import": "./dist/lib.components.css",       "require": "./dist/lib.components.css"     }   },   "types": "dist/types/index.d.ts",   "main": "dist/lib.umd.js",   "module": "dist/lib.es.js",   "dependencies": {     "axios": "^1.3.3",     "bootstrap": "^5.2.2",     "element-plus": "2.2.32",     "pinia": "^2.0.31",     "rollup-plugin-node-externals": "^5.1.2",     "vite-plugin-dts": "^2.1.0",     "vue-router": "^4.1.6"   },   "devDependencies": {     "@babel/types": "^7.20.7",     "@rushstack/eslint-patch": "^1.1.4",     "@types/node": "^18.11.18",     "@vitejs/plugin-vue": "^4.0.0",     "@vue/eslint-config-prettier": "^7.0.0",     "@vue/eslint-config-typescript": "^11.0.0",     "@vue/tsconfig": "^0.1.3",     "clean-css-cli": "^5.6.1",     "eslint": "^8.22.0",     "eslint-plugin-vue": "^9.3.0",     "npm-run-all": "^4.1.5",     "prettier": "^2.7.1",     "sass": "^1.57.1",     "typescript": "~4.7.4",     "vite": "^4.0.4",     "vue": "^3.2.45",     "vue-tsc": "^1.0.24"   } }

{ "name": "test", "version": "0.0.1", "private": true, "scripts": { "prepare": "npm run build:lib", "dev": "vite", "build:app": "run-p type-check build-only", "preview": "vite preview", "build-only": "vite build", "build:style": "npm run build:scss", "build:scss": "sass --load-path=/node_modules/ --no-charset src/assets/styles/main.scss | node build/print-banner.js > dist/lib.base.css && cleancss -o dist/lib.base.min.css dist/lib.base.css", "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types", "build:lib": "npm run build-only && npm run build:types && npm run build:style", "type-check": "vue-tsc --noEmit", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "files": [ "dist" ], "exports": { ".": { "import": "./dist/lib.es.js", "require": "./dist/lib.umd.js" }, "./style.css": { "import": "./dist/lib.base.css", "require": "./dist/lib.base.css" }, "./components.css": { "import": "./dist/lib.components.css", "require": "./dist/lib.components.css" } }, "types": "dist/types/index.d.ts", "main": "dist/lib.umd.js", "module": "dist/lib.es.js", "dependencies": { "axios": "^1.3.3", "bootstrap": "^5.2.2", "element-plus": "2.2.32", "pinia": "^2.0.31", "rollup-plugin-node-externals": "^5.1.2", "vite-plugin-dts": "^2.1.0", "vue-router": "^4.1.6" }, "devDependencies": { "@babel/types": "^7.20.7", "@rushstack/eslint-patch": "^1.1.4", "@types/node": "^18.11.18", "@vitejs/plugin-vue": "^4.0.0", "@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-typescript": "^11.0.0", "@vue/tsconfig": "^0.1.3", "clean-css-cli": "^5.6.1", "eslint": "^8.22.0", "eslint-plugin-vue": "^9.3.0", "npm-run-all": "^4.1.5", "prettier": "^2.7.1", "sass": "^1.57.1", "typescript": "~4.7.4", "vite": "^4.0.4", "vue": "^3.2.45", "vue-tsc": "^1.0.24" } }

а при импорте в стороннем приложении не ругается типа Cannot resolve definitions for module 'test' ?
давай в догонку тогда еще index.d.ts

Не ругается, и компоненты работают как надо...

import type { App } from "vue"; declare function install(app: App): void; declare const _default: {     install: typeof install; }; export default _default; export * from "./components";

1	import type { App } from "vue"; declare function install(app: App): void; declare const _default: { install: typeof install; }; export default _default; export * from "./components";

код верный.
данные фичи корректно работают начиная с webstorm 2022.3.
в целом эта система требует внимательной настройки
package.json, опции main/module/exports и types,
и tsconfig.json

Спасибо!

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для того чтобы увидеть props в вашей Vue 3 библиотеке компонентов, необходимо учесть несколько важных моментов.

1. Убедитесь, что вы правильно определили props в вашем компоненте. В Vue 3 используется новый синтаксис для определения props с помощью функции defineProps(). Например:

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: {
    prop1: String,
    prop2: Number
  },
  setup(props) {
    // Ваша логика компонента здесь
  }
});

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({

props: {

prop1: String,

prop2: Number

setup(props) {

// Ваша логика компонента здесь

}

});

2. Проверьте, что вы правильно передаете props в ваш компонент при его использовании. Например:

3. Убедитесь, что вы правильно импортировали и зарегистрировали ваш компонент в своем приложении Vue. Например:

import MyComponent from './components/MyComponent.vue';

const app = createApp(App);
app.component('my-component', MyComponent);
app.mount('#app');

import MyComponent from './components/MyComponent.vue';

const app = createApp(App);

app.component('my-component', MyComponent);

app.mount('#app');

4. Проверьте, что вы используете правильные версии Vue и других зависимостей. Возможно, проблема может быть связана с несовместимостью версий.

Если после выполнения всех этих шагов проблема с props все еще не решена, попробуйте перезагрузить сервер разработки, очистить кеш браузера или проверить консоль разработчика на наличие ошибок.

Надеюсь, эти советы помогут вам решить проблему с props в вашей Vue 3 библиотеке компонентов. Если у вас остались какие-либо вопросы, не стесняйтесь задавать их для получения дополнительной помощи.

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

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

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

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно