{"id":355107,"date":"2024-05-20T23:01:48","date_gmt":"2024-05-20T23:01:48","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=355107"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=355107","title":{"rendered":"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 UI Kit \u043d\u0430 Vue 3 + storybook \u0438 \u0437\u0430\u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 npm<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 UI Kit \u0438 \u0432\u0435\u0437\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u043e\u043d \u043a\u0440\u0443\u0442\u043e\u0439 \u0438 \u043a\u0430\u043a \u043e\u043d \u0443\u0441\u043a\u043e\u0440\u0438\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0433\u0430\u0439\u0434, \u043a\u0430\u043a \u0437\u0430\u0438\u043c\u0435\u0442\u044c \u0441\u0435\u0431\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 UI Kit.<\/p>\n

\u0410 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u0435\u043d?<\/h2>\n
\"\u0417\u0430\u0447\u0435\u043c?\"<\/p>\n
\u0417\u0430\u0447\u0435\u043c?<\/figcaption><\/div>\n<\/figure>\n
    \n
  1. \n

    \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e, \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<\/li>\n

  2. \n

    \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u0430\u043d\u0434 \u043c\u043e\u0433\u0443\u0442 \u0443\u0434\u043e\u0431\u043d\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0435 \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u044f \u043a \u0442\u0435\u0445\u043d\u0438\u043a\u0435 ctrl + c -> ctrl + v.<\/p>\n<\/li>\n

  3. \n

    \u041d\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0430\u043a\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<\/li>\n

  4. \n

    \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c Storybook \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c, \u043a\u0430\u043a \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 xD.<\/p>\n<\/li>\n

  5. \n

    \u042d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u0431\u0440\u0435\u043d\u0434, \u0441\u0434\u0435\u043b\u0430\u0432 \u043a\u0440\u0443\u0442\u043e\u0439 UI Kit \u0438 \u0441\u0434\u0435\u043b\u0430\u0432 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0434\u043e\u043a\u0443, \u0442\u044b \u043c\u043e\u0436\u0435\u0448\u044c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 open source \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n

    \u041c\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u0437\u0430\u0447\u0435\u043c — \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c<\/h3>\n
    \"\u0422\u0443\u0442<\/p>\n
    \u0422\u0443\u0442 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0431\u044b\u0442\u044c \u041d\u0430\u0442\u0430\u043b\u044c\u044f \u041c\u043e\u0440\u0441\u043a\u0430\u044f \u041f\u0435\u0445\u043e\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n

    \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u0430\u0437\u044b<\/h3>\n

    \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e vite \u0437\u0430\u0438\u043d\u0438\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 vue 3 \u0441 typescript — \u0442\u044b\u043a<\/a><\/p>\n

    npm create vite@latest ui-kit -- --template vue-ts<\/code><\/pre>\n
    \u041f\u0440\u043e\u0435\u043a\u0442 \u0435\u0441\u0442\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u043f\u043e\u043a\u043e\u043b\u0434\u0443\u0435\u043c \u0441 \u043d\u0430\u0448\u0438\u043c package.json, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 UI Kit.<\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u0438\u043c vue \u0432 devDependencies \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c peerDependecies \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e vue >= 3. \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043b\u0443\u0447\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n
    \"peerDependencies\": {     \"vue\": \">=3\" }<\/code><\/pre>\n
    \n
    \u041f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u044d\u0442\u0438 \u0432\u0430\u0448\u0438 dependencies, devDependencies \u0438 peerDependencies \u043c\u043e\u0436\u043d\u043e \u0442\u0443\u0442 — \u0442\u044b\u043a<\/a>, \u0435\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e:
    dependencies<\/strong> — \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0439\u0434\u0443\u0442 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b.
    devDependencies<\/strong> — \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0431\u0430\u043d\u0434\u043b\u0435.
    peerDependencies<\/strong> — \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<\/blockquote>\n
    \u0423\u043a\u0430\u0436\u0435\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/strong><\/p>\n
    \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432 \u043f\u0430\u043f\u043a\u0435 dist:<\/em><\/p>\n
    \"files\": [   \"dist\" ],<\/code><\/pre>\n
    \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 js \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0434\u043b\u044f import\/require(\u0447\u0442\u043e \u0437\u0430 \u0438\u043c\u0435\u043d\u0430 \u0442\u0430\u043a\u0438\u0435 \u043c\u043e\u0434\u043d\u044b\u0435, \u0432\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0435, \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0439\u0442\u0435).<\/p>\n
    \"exports\": {   \".\": {     \"import\": \".\/dist\/dragonekui.es.ts\",     \"require\": \".\/dist\/dragonekui.umd.ts\"   },   \".\/styles\": \".\/dist\/style.css\" },<\/code><\/pre>\n
    \u041f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 package.json<\/em><\/p>\n
    \npackage.json<\/summary>\n
    \n
    {   \"name\": \"dragonek-ui\",   \"version\": \"0.0.3\",   \"type\": \"module\",   \"main\": \".\/dist\/dragonekui.umd.ts\",   \"module\": \".\/dist\/dragonekui.es.ts\",   \"types\": \".\/dist\/components\/index.d.ts\",   \"files\": [     \"dist\"   ],   \"exports\": {     \".\": {       \"import\": \".\/dist\/dragonekui.es.ts\",       \"require\": \".\/dist\/dragonekui.umd.ts\"     },     \".\/styles\": \".\/dist\/style.css\"   },   \"scripts\": {     \"dev\": \"vite\",     \"build\": \"vue-tsc && vite build\",   },   \"devDependencies\": {     \"@types\/node\": \"^20.6.0\",     \"@vitejs\/plugin-vue\": \"^4.2.3\",     \"typescript\": \"^5.0.2\",     \"vite\": \"^4.4.5\",     \"vue\": \"^3.3.4\",     \"vue-tsc\": \"^1.8.5\"   },   \"peerDependencies\": {     \"vue\": \">=3\"   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
    \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c vite<\/h3>\n
    \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c vite<\/a>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e!<\/p>\n
    \u0412 vite.config.ts, \u0434\u043e\u0431\u0430\u0432\u0438\u043c options.lib<\/a>, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442\u0430\u043c \u0443\u043a\u0430\u0436\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, entry point — \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043b\u0438\u0431\u044b, \u0438 filename \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435(\u0438\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0435 dist \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430), \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 es <\/strong>\u0438 umd <\/strong>\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 formats.<\/p>\n
    \n
    \u041f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0442 \u0442\u0443\u0442 — \u0442\u044b\u043a<\/a><\/p>\n<\/blockquote>\n
    lib: {   entry: resolve(__dirname, 'src\/components\/index.ts'),   name: 'dragonekui',   fileName: (format) => `dragonekui.${format}.ts`, },<\/code><\/pre>\n
    \u042f \u0441\u0434\u0435\u043b\u0430\u043b entry point \u0444\u0430\u0439\u043b index.ts \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0442\u0443\u0434\u0430 \u044f \u0431\u0443\u0434\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438\u0445 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n
    \u0414\u0430\u043b\u0435\u0435 \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c rollup. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043e\u043f\u0446\u0438\u0438 external — vue, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043f\u0430\u043a\u0435\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432 \u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0433\u0434\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0430\u043a\u0435\u0442, \u043e\u0431\u044b\u0447\u043d\u043e \u0442\u0430\u043c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 vue \u0435\u0441\u0442\u044c Vue.<\/p>\n
    rollupOptions: {   external: ['vue'],   output: {     globals: {       vue: 'Vue',     },   }, },<\/code><\/pre>\n
    \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430, \u044d\u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f vite — vite-plugin-dts<\/a>.<\/p>\n
    npm i -D vite-plugin-dts<\/code><\/pre>\n
    plugins: [   dts({     insertTypesEntry: true,   }), ],<\/code><\/pre>\n
    \u041f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 vite.config.ts<\/em><\/p>\n
    \nvite.config.ts<\/summary>\n
    \n
    import vue from '@vitejs\/plugin-vue'; import { defineConfig } from 'vite'; import { resolve } from 'path'; import dts from 'vite-plugin-dts';  export default defineConfig({   build: {     lib: {       entry: resolve(__dirname, 'src\/components\/index.ts'),       name: 'dragonekui',       fileName: (format) => `dragonekui.${format}.ts`,     },     rollupOptions: {       external: ['vue'],       output: {         globals: {           vue: 'Vue',         },       },     },   },   plugins: [     vue(),     dts({       insertTypesEntry: true,     }),   ],   resolve: {     alias: {       '@': resolve(__dirname, 'src'),     },   }, }); <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
    Storybook<\/h3>\n
    \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c storybook \u043f\u043e \u0438\u0445 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0433\u0430\u0439\u0434\u0443 — \u0442\u044b\u043a<\/a><\/p>\n
    npx sb init<\/code><\/pre>\n
    \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 storybook \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u0430\u043f\u043e\u0447\u043a\u0443 \u0441 examples, \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c, \u043e\u043d\u0430 \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f.<\/p>\n
    \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432 tsconfig.json, <\/em>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c .stories.ts<\/em> \u0444\u043e\u0440\u043c\u0430\u0442 \u0432 exclude, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043c \u043d\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u043b\u0438\u0441\u044c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n
    \"exclude\": [   \"src\/**\/*.stories.ts\" ],<\/code><\/pre>\n
    \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430<\/h3>\n
    \"\u041a\u043e\u0442<\/p>\n
    \u041a\u043e\u0442 \u043f\u0438\u0448\u0435\u0442 \u043a\u043e\u0434<\/figcaption><\/div>\n<\/figure>\n
    \u042f \u043f\u043e\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435.<\/p>\n
    \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
    src\/components\/button\/Button.vue<\/em><\/p>\n
    \nButton.vue<\/summary>\n
    \n
    <script lang=\"ts\" setup> import { defineProps, PropType } from 'vue';  const props = defineProps({   disabled: {     type: Boolean,     default: false,   },   size: {     type: String as PropType<'small' | 'medium' | 'large'>,     default: 'medium',   },   color: {     type: String as PropType<'primary' | 'secondary'>,     default: 'primary',   }, }); <\/script>  <template>   <button class=\"button\" :class=\"[props.size, props.color]\" :disabled=\"props.disabled\">     <slot name=\"left-icon\" \/>     <slot \/>     <slot name=\"right-icon\" \/>   <\/button> <\/template>  <style scoped> .button {   color: #ffffff;   outline: none;   border: none;   padding: 0 16px; }  .small {   height: 32px;   border-radius: 8px; }  .medium {   height: 36px;   border-radius: 10px; }  .large {   height: 40px;   border-radius: 12px; }  .primary {   background: #535bf2; }  .secondary {   background: #a7a7a7; } <\/style> <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
    \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c story \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
    src\/components\/button\/Button.stories.ts<\/em><\/p>\n
    \nButton.stories.ts<\/summary>\n
    \n
    import { StoryFn, Meta } from '@storybook\/vue3'; import Button from '.\/Button.vue';  export default {   title: 'Button',   component: Button,   argTypes: {     disabled: {       control: { type: 'boolean' },       defaultValue: false,     },     size: {       control: { type: 'radio' },       options: ['small', 'medium', 'large'],       defaultValue: 'medium',     },     color: {       control: { type: 'select' },       options: ['primary', 'secondary'],       defaultValue: 'primary',     },   }, } as Meta<typeof Button>;  const Template: StoryFn<typeof Button> = (args) => ({   components: { Button },   setup() {     return { args };   },   template: `     <div style=\"display: flex; flex-direction: row; gap: 12px;\">       <Button v-bind=\"args\" size=\"large\">Button<\/Button>       <Button v-bind=\"args\" size=\"medium\">Button<\/Button>       <Button v-bind=\"args\" size=\"small\">Button<\/Button>     <\/div>   `, });  export const DefaultButton: StoryFn<typeof Button> = (args) => ({   components: { Button },   setup() {     return { args };   },   template: '<Button v-bind=\"args\">Button<\/Button>', });  export const PrimaryButton = Template.bind({}); PrimaryButton.args = { color: 'primary' };  export const SecondaryButton = Template.bind({}); SecondaryButton.args = { color: 'secondary' }; <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
    \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c:<\/p>\n
    npm run storybook<\/code><\/pre>\n
    \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
    \"story<\/p>\n
    story \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n
    \u0417\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0442\u0430\u043f<\/h3>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c export \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u0437 \u0440\u0430\u043d\u0435\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043c\u0438 entry point(src\/components\/index.ts)<\/p>\n
    import Button from '.\/button\/Button.vue';  export {   Button, };<\/code><\/pre>\n
    \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u0438\u043b\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u043a\u043e\u0434 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432 \u043f\u0430\u043f\u043a\u0435 dist.<\/p>\n
    \u0411\u0438\u043b\u0434\u0438\u043c<\/p>\n
    npm run build<\/code><\/pre>\n
    \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043d\u0430\u0448\u0438\u043c js bundle — dist\/dragonekui.es.ts<\/em>, dist\/dragonekui.umd.ts, <\/em>\u0438 \u0444\u0430\u0439\u043b\u044b \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 \u0432 dist\/components\/*\/*.vue.d.ts <\/em>\u0438 \u0444\u0430\u0439\u043b \u0441 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u043c \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 dist\/components\/index.d.ts<\/em><\/p>\n
    \"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439<\/p>\n
    \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 build<\/figcaption><\/div>\n<\/figure>\n
    \u0424\u0438\u043d\u0430\u043b. \u0414\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 npm<\/h3>\n