1

我正在开始一个新的 Angular 项目，并且决定不使用像 bootstrap/bulma/materialize/... 这样的框架，而是编写我们自己的 sassy 组件库。

我已经做了一些研究，但老实说，我真的不知道从哪里开始（除了 css 重置）。我还是一名大三学生，已经在以前的现有项目中研究过一些功能。现在我必须开始新项目的前端，并希望构建尽可能结构化和可重用的所有内容，但我有点迷失从哪里开始。

当你开始写作时，你的行动计划是什么？你如何构建你的角度组件库？你有没有看过一个很好的教程，我也应该看看？

4

2 回答 2

2

迄今为止，在我的大多数项目中，我都没有使用框架并编写了自己的 CSS 库，并且会推荐它。我对 Angular 没有任何经验，只有 React。我只能与您分享我目前的设置。

我使用 gulp 将 SASS 文件编译为 main.css 文件和BEM方法（您也可以查看SMACSS）。每个“块”（由 BEM 定义）在布局或模块中都有一个单独的文件。

我将我的 SASS 文件分离到以下文件夹中：

  1. Base - 用于 - 重置/Grids/helpers/typography/base（一般基本样式，例如换行）
  2. 布局 - 用于容器 - 页眉/页脚/侧边栏等
  3. Lib - 用于混合
  4. 模块 - 用于组件 - 表单/按钮/警报/图标/手风琴等
  5. 设置 - 颜色/字体/响应式 - 用于设置要在所有其他文件中使用的 sass 变量。

我希望这会有所帮助。

于 2018-05-11T11:56:56.093 回答
2

在我看来，这不是一项简单的任务。但是您可以从使用SCSS开始，这将为您提供对术语可重用性的广泛访问。此外，您可能需要处理flexbox/ grid-layout（如果您需要支持 IE 11 及以下版本的旧浏览器，则不是这种情况）来实现一些样式化的组件。通过scss和 'flexbox' 的结合，我认为大多数组件都可以简单地创建并以您想要的方式重用。

我强烈建议避免使用库，而是编写我们自己的代码。因为那时我们将拥有的力量是无限的。你会惊讶于拥有它。

但同时，如果该项目是一个长期运行的项目，并且您的需求正在进行中，那么我建议您重新考虑消除诸如'bootstrap,之类的库materialize。否则，如果需求随时间变化，您可能需要使用许多库来实现您可能需要的功能。（经验是最好的老师）

于 2018-05-11T10:01:31.727 回答