目录
创建命令行接口
发布给NPM
恢复魔术!
首页 web前端 css教程 如何在NPM上构建简历

如何在NPM上构建简历

Apr 13, 2025 am 10:12 AM

如何在NPM上构建简历

就在昨天,Ali Churcher分享了使用CSS网格布局制作简历的整洁方法。让我们通过创建一个模板来构建一点,每当我们想要使用命令行时,我们可以旋转。很酷的事情是,您只需一个命令就可以运行它。

我知道命令行可能令人生畏,是的,我们将在node.js中工作。我们将使事情分为小步骤,以使其更容易跟随。

像许多项目一样,涉及一些设置。首先在工作目录中创建一个空文件夹,然后使用NPM或纱线初始化项目。

 mkdir your-project && cd“ $ _”

## npm
npm init

##纱
纱线初始化
登录后复制

无论您使用什么名称“您的项目”,都将是NPM注册表中包装的名称。

下一步是为应用程序创建一个输入文件,即在这种情况下为index.js。我们还需要一个存储数据的地方,因此创建另一个名为data.json的文件。创建命令行后,您可以从命令行打开它们:

触摸index.js &&触摸data.json
登录后复制

创建命令行接口

我们从创建此应用程序中获得的最大好处是,它为我们提供了一种直接在命令行中创建简历的半维持方式。我们需要几件事才能实现:

  • 存储数据的对象
  • 交互式命令行界面(我们将使用询问器构建)

让我们从第一个开始。破解打开数据。json并添加以下内容:

 {
  “教育”: [
    “一些信息”,
    “不太重要的信息”,
    “等等,等等。”
  ],,
  “经验”: [
    “一些信息”,
    “不太重要的信息”,
    “等等,等等。”
  ],,
  “接触”: [
    “一种与您联系的方式”
  这是给出的
}
登录后复制

这只是定义将用于接口中每个步骤的对象和键的示例。您可以完全修改它以满足自己的需求。

那是我们需要的第一件事。第二件事是交互式界面。询问者。JS将处理90%的内容。请随时阅读有关此软件包的更多信息,因为您可以在更熟悉它的Ins和Outs时构建更高级的界面。

纱线添加询问者粉笔
登录后复制

那粉笔是什么?这是一个库,可以通过添加一些颜色和样式来帮助我们自定义终端输出。

现在,让我们打开index.js并粘贴以下代码:

 #!/usr/bin/env节点

“使用严格”;

const询问者= requir(“询问者”);
const粉笔= require(“粉笔”);
const data = require(“ ./ data.json”);

//添加响应颜色
const响应= chalk.bold.blue;

const remumeoptions = {
  类型:“列表”,
  名称:“简历”,
  消息:“你想知道什么”,
  选择:[... object.keys(数据),“退出”]
};

功能showresume(){
  console.log(“你好,这是我的简历”);
  处理程序();
}

功能处理程序(){
  询问器。prompt(简历)。然后
    if(answer.resumeOptions ==“退出”)返回;

    const options = data [$ {wonse.resumeoptions}`]
    if(options){
      console.log(响应(new询问者.separator()));
      options.foreach(info => {
        console.log(响应(“ | =>” info));
      });
      console.log(响应(new询问者.separator()));
    }

    询问者
      。迅速的({
        类型:“列表”,
        名称:“ exitback”,
        消息:“回去还是退出?”,
        选择:[“ Back”,“ Exit”]
      })。然后(选择=> {
        if(choice.exitback ==“ back”){
          处理程序();
        } 别的 {
          返回;
        }
      });
  })。捕获(err => console.log('oop,',err))
}

showresume();
登录后复制

zoikes!那是一大堆代码。让我们将其撕下来解释发生了什么。

在文件的顶部,我们正在导入运行应用程序并使用粉笔库设置颜色样式所需的所有必要物品。如果您对颜色和自定义更感兴趣,请查看粉笔文档,因为您可以对事物具有很高的创意。

 const询问者= requir(“询问者”);
const粉笔= require(“粉笔”);
const data = require(“ ./ data.json”);

//添加响应颜色
const响应= chalk.bold.blue;
登录后复制

代码要做的下一步就是创建我们的简历选项列表。这些是在我们在终端中键入命令后将显示的内容。我们称其为简历,因此我们确切地知道它的作用。

 const remumeoptions = {
  类型:“列表”,
  名称:“简历”,
  消息:“你想知道什么”,
  选择:[... object.keys(数据),“退出”]
};
登录后复制

我们对选择字段非常感兴趣,因为它可以从数据对象中构成键,同时为我们提供一种方法来“退出”该应用程序。

之后,我们创建函数showresume(),这将是我们在启动后立即运行的主要功能。它显示了一些欢迎消息,并运行我们的处理程序()函数。

功能showresume(){
  console.log(“你好,这是我的简历”);
  处理程序();
}
登录后复制

好的,现在,大个子:handleresume()函数。第一部分是有条件的检查,以确保我们尚未退出该应用程序,并在所有情况下都从我们的数据对象中显示注册选项。换句话说,如果选择的选项已退出,我们将退出程序。否则,我们将获取根据所选密钥可用的选项列表。

因此,一旦应用程序确认我们没有退出,我们就会得到答案。解决方案,正如您可能已经猜到的那样,吐出了我们在data.json文件中定义的部分列表。我们定义的是教育,经验和联系。

这将我们带到了询问者。如果我们列出这些作品,这可能是最简单的:

您是否注意到选项输出中的new询问器.separator()函数?这是询问器的功能,它在内容之间提供了视觉分离器,以使内容稍微分解一点并使界面更易于阅读。

好吧,我们正在显示选项列表!现在,我们需要让AA返回上一个屏幕。为此,我们创建了另一个询问者。在其中我们将通过一个新对象,但是这次只有两个选项:退出和返回。它将通过我们需要处理的答案向我们返回承诺。如果选择的选项会返回,我们运行处理程序()意味着我们再次使用选项打开主屏幕;如果我们选择退出,我们将退出功能。

最后,我们将添加捕获语句以捕获任何可能的错误。好练习。 :)

发布给NPM

恭喜!尝试运行Node index.js,您应该能够测试该应用程序。

那太好了,一切都很棒,但是要使它运行不必每次都直接工作。这比我们刚刚看过的功能要简单得多。

  1. 如果您没有一个帐户,请在NPMJS.com上注册一个帐户。
  2. 通过运行NPM助推器将用户添加到CLI中。
  3. 提供您用于注册NPM帐户的用户名和密码。
  4. 转到package.json并添加以下行:
     “垃圾桶”: {
      “您的包装名称”:“ ./index.js”
    }
    登录后复制
  5. 添加将显示在应用程序NPM页面上的readme.md文件。
  6. 发布软件包。
 NPM发布 -  access = public
登录后复制

每当您更新软件包时,都可以将其推向NPM。在此处阅读有关NPM版本的更多信息。

 NPM版本补丁// 1.0.1
NPM版本未成年人// 1.1.0
NPM版本专业// 2.0.0
登录后复制

并将更新推向NPM:

 NPM发布
登录后复制

恢复魔术!

就是这样!现在,您可以体验到在命令行中键入NPX您的包装名称并在此处创建简历的魔力。顺便说一句,NPX是运行命令而无需将其安装到计算机的方式。如果您安装了NPM,则可以自动适合您。

这只是一个简单的终端应用程序,但是了解场景背后的逻辑将使您创造出惊人的事物,这是您迈向它的第一步。

源代码

愉快的编码!

以上是如何在NPM上构建简历的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
Google字体可变字体 Google字体可变字体 Apr 09, 2025 am 10:42 AM

我看到Google字体推出了新设计(Tweet)。与上一次大型重新设计相比,这感觉更加迭代。我几乎无法分辨出区别

如何使用HTML,CSS和JavaScript创建动画倒计时计时器 如何使用HTML,CSS和JavaScript创建动画倒计时计时器 Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多

HTML数据属性指南 HTML数据属性指南 Apr 11, 2025 am 11:50 AM

您想了解的有关HTML,CSS和JavaScript中数据属性的所有信息。

如何通过CSS选择第一个类名为item的子元素? 如何通过CSS选择第一个类名为item的子元素? Apr 05, 2025 pm 11:24 PM

在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时,常常会遇到元素个数不�...

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

在前端开发中,如何使用CSS和JavaScript实现类似Windows 10设置界面的探照灯效果? 在前端开发中,如何使用CSS和JavaScript实现类似Windows 10设置界面的探照灯效果? Apr 05, 2025 pm 10:21 PM

在前端开发中如何实现类似Windows...

我们如何创建一个在SVG中生成格子呢模式的静态站点 我们如何创建一个在SVG中生成格子呢模式的静态站点 Apr 09, 2025 am 11:29 AM

格子呢是一块图案布,通常与苏格兰有关,尤其是他们时尚的苏格兰语。在Tar​​tanify.com上,我们收集了5,000多个格子呢

See all articles