javascript - 如何使用 Vue 构建 UI 框架

Question

我想用 Vue 制作一个 UI 框架，但我不希望它只是任何 UI 框架。我希望用户能够从框架中指定他们想要的组件。然后我希望能够像这样将它们放入我的单文件模板中

import { component1, component2} from 'framework';

我还希望能够将其构建为 npm 模块。

如有任何建议，我们将不胜感激。

Answer 1

最简单的方法可能是 this package

我前段时间做的组件之一uses it它基本上会默认工作。 CVC(上面的第一个包)使用“bili”，它是 rollup bundler 的一个小包装器，并创建了 3 种不同类型的包(umd - 浏览器，common - requirejs 和 es-ES6 导入)

您唯一要做的就是在您的索引文件中使用您的组件声明一个导出

  export {
    component1,
    component2
  }

Selenium here as a reference

这里唯一需要注意的是 css。默认方法会将 css 提取到不同的 css 文件中。参见 rollup plugin vue关于如何自定义应使用 css 完成的操作。这些选项可以在 bili 部分 of package json like here 中指定

如果您想更进一步，将 css 与组件一起导入，您可以查看 Babel plugin component Element UI(最流行的 Vue UI 库)使用它来做到这一点。