如何基于Vuetify创建自己的组件库

我想基于 Vuetify 创建我的组件库并在 npm 上发布。

Vuetify 已经有 vue-plugin 标准安装并使用 vuetify-loader，我认为这是一个比纯 HTML 组件更复杂的场景。

例如，我想创建我的登录表单, my 文章页，我的默认日历选择器与预设值。

有执行此操作的标准方法或指南或执行此操作的示例吗？

我使用最新版本的 vuetify (2.0.7)

我刚刚让它适用于 Vue3/Vuetify3。简而言之（使用 pnpm、vite、typescript、Vue 插件）：

将组件创建为新项目：

pnpm create vue@latest
-> your-plugin
-> Typescript
-> ESLint
cd <project>
echo auto-install-peers = true > .npmrc
pnpm add -D vuetify rollup-plugin-typescript2

然后删除所有组件并制作您自己的组件。 创建 src\components\index.ts 和 src\YourPlugin.ts

src\组件\index.ts

export {default as YourComponent} from "./YourComponent.vue"

src\YourPlugin.ts

import type { App } from "vue"
import { YourComponent } from "./components"
export default {
    install: (app: App) => {
        app.component("YourComponent", YourComponent)
    }
};

vite.config.ts

添加到imports:

import vuetify from 'vite-plugin-vuetify'
import typeScript2 from "rollup-plugin-typescript2"

添加到plugins:

vuetify({
  autoImport: true,
}),
typeScript2({
  check: false,
  include: ["src/components/*.vue"],
  tsconfigOverride: {
    compilerOptions: {
      sourceMap: true,
      declaration: true,
      declarationMap: true,
    }
  },
  exclude: [
    "vite.config.ts"
  ]
})

添加新部分build到定义配置：

  build: {
    cssCodeSplit: false,
    lib: {
      entry: "./src/YourPlugin.ts",
      formats: ["es", "cjs"],
      name: "CommonVtfyPlugin",
      fileName: format => (format == "es" ? "index.js" : "index.cjs"),
    },
    rollupOptions: {
      external: ["vue", "vuetify/lib"],
      output: {
        globals: {
          vue: "Vue",
          vuetify: "Vuetify",
            'vuetify/components': 'VuetifyComponents',
            'vuetify/directives': 'VuetifyDirectives'
        }
      }
    }
  },

dist\index.d.ts

我还没有弄清楚如何生成它。但这是一个通用的立场：

declare const _default: any;
export default _default;

包.json

添加这个：

  "type": "module",
  "exports": {
    ".": "./dist/index.js"
  },
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],

您可以通过将其作为插件导入来在任何 Vue 项目中使用它：

import YourComponent from 'your-plugin'
app.use(YourComponent)

无法保证其优化程度（欢迎反馈）..但它有效（tm）.. 可以找到更详细的答案pnpm monorepo：如何设置一个简单的可重用（vue）组件以供重用？ https://stackoverflow.com/questions/75117561/pnpm-monorepo-how-to-set-up-a-simple-reusable-vue-component-for-reuse（任何更新也将主要在该答案中更新，如果有的话）