如何构建颜色调色板生成器 - 使用 Vue.js + Bulma 的个人项目

大家好，
这就是我写这篇文章的缘由。也许你们已经知道（如果你读过我之前的帖子），我最近真的很忙。不过现在因为新冠疫情，我的考试延期了，而且隔离也让我远离了人群，这让我感觉更积极乐观，也更有动力去提升自己。
所以我迈出了第一步，每天早起阅读新闻，学习一些新知识（和网络或科技无关的）。我还决定做一些自己感兴趣的项目来巩固我的编程技能。今天我做了一个调色板生成器，下面我会详细介绍一下，但首先我想分享一下我设计整个项目的完整流程：

设计流程

• 甚至在编写第一行代码之前，你就必须决定最终结果会是什么样子。
• 首先，确定项目名称。您可以考虑以下一些技巧。
• 将显而易见的事物名称翻译成其他语言，例如：如果你正在开发一个截图工具，那么你应该试试谷歌翻译，因为它会建议一些非常好的名称，例如：
• 接下来，你需要设计一个完美的logo，这会让你的项目看起来更专业，也能更好地在社区推广。你可以去Dribbble寻找logo灵感，我不是要你设计一个复杂精美的logo，只是建议你先设计一个简单的。用什么工具呢？我一直都用Figma，你也应该用它来找一些免费的SVG图标，选择一个配色方案，再用Figma里任何免费的字体，然后导出为PNG格式。搞定！你的新logo就完成了。
• 把所有步骤都写下来，从创建页面到最后润色，列成一个清单。

那么，整个项目建设过程的体验如何？

• 我花了将近3个小时。
• 感觉真好，我已经很久没有这种感觉了。
• 我也第一次尝试了Surge.sh。它非常容易使用，如果你只想发布一个非常简单的网站或者一个单页网站，只需运行命令，然后就完成了！网站就上线了。

我使用了哪些技术来构建它？

• Bulma CSS（我的CSS好伙伴，我们认识很久了）
• VueJS（它是一个单页应用程序）
• Colormind API
• 使用 Axios 获取数据

还有其他需要说明的吗？

是的，我重构了很多代码，并创建了简单的独立组件。我还编写了一个将 RGB 值转换为 HEX 值的函数。我们需要将数组作为参数传递：

rgbToHEX(rgb) {
      let r = rgb[0].toString(16);
      let g = rgb[1].toString(16);
      let b = rgb[2].toString(16);

      if (r.length == 1)
        r = "0" + r;
      if (g.length == 1)
        g = "0" + g;
      if (b.length == 1)
        b = "0" + b;

      return "#" + r + g + b;
   },

那么最终结果如何呢？
注：我并不在意这个调色板项目，因为接下来15天我还有很多项目要做，我只想分享整个过程。
我早上开始着手这个项目，取名为“Rangeeni”，在乌尔都语中是“着色”的意思。然后我在Figma中设计了一个logo，看起来是这样的：

然后我花了3个小时完成了整个项目，你可以看看这里，告诉我你的想法：

Rangeeni - 强大的 AI 驱动型调色板生成器

完整的代码在这里，它与之前的方法截然不同，因为它的代码量并不大，你会发现这种方法非常棒。
代码在这里：https://github.com/justaashir/rangeeni_color_picker

今天就到这里，如果可以的话，明天见。还有，我得告诉你一件你真的错过了很多好东西……你知道吗？
你还没关注我的推特，那里有很多精彩的内容。所以，如果你想了解更多我的动态，那就关注我的推特吧！