vue.js - 如何基于 Vuetify 创建自己的组件库

Question

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

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

例如，我想创建我的登录表单、我的文章页面、我的带有预设值的默认日历选择器。

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

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

Answer 1

我刚刚让它适用于 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\components\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"

添加到插件:

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

将新部分 build 添加到 defineConfig:

  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;

package.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: how to set up a simple reusable (vue) component for reuse? (任何更新也将主要在该答案中更新，如果有的话)