npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@arrow-zb/vue2-ts

v0.0.3

Published

做为程序员,就是把复杂的事情简单化,越简单约好,越一键化越完美,开发实际业务时我们都需要先搭建一套运行环境,安装相关依赖,搭建相关的基础架构和封装一些方法以及构建项目等,不然每次都需要自己手动搭建,而且这个过程繁杂还重复,因此,最好是能够一键化搭建自己的开发环境,相信所有的开发人员都是这样,在前端而言,搭建脚手架CLI就是必经之路。讲讲搭建脚手架的好处: 1. 一键化搭建项目结构 2. 规范项目结构 3. 封装最佳实践

Readme

1. 简述

做为程序员,就是把复杂的事情简单化,越简单约好,越一键化越完美,开发实际业务时我们都需要先搭建一套运行环境,安装相关依赖,搭建相关的基础架构和封装一些方法以及构建项目等,不然每次都需要自己手动搭建,而且这个过程繁杂还重复,因此,最好是能够一键化搭建自己的开发环境,相信所有的开发人员都是这样,在前端而言,搭建脚手架CLI就是必经之路。讲讲搭建脚手架的好处:

  1. 一键化搭建项目结构
  2. 规范项目结构
  3. 封装最佳实践

因此,博主在这里详细的介绍如何搭建前端的脚手架。

2. 开始搭建

2.1 介绍必要依赖

  1. chalk: 用于高亮在终端打印出的日志,一般用于打印出好看的日志给用户看!
  2. clear:用于清空终端命令,一般用于项目开始。
  3. commander: 用于解析终端的输入命令,这样我们就能在终端输入命令然后执行代码,如 vue create appName
  4. download-git-repo: 用于从git仓库中拉取项目,一般我们的项目模板都存在git仓库中,使用这个库进行拉取
  5. figlet: 用于在终端打印出酷炫的日志
  6. handlebars:轻量的语义模板,可进行模板解析
  7. inquirer: 用于在终端进行询问,用户可回答yes/no
  8. open:用于自动打开浏览器
  9. ora: 用于显示进度条

2.2 编写CLI

首先项目初始化后,安装对应的依赖

npm init -y
npm install -S chalk clear commander download-git-repo figlet handlebars inquirer open ora
  1. 创建自己的 bin(启动命令)
  2. 根据自己的设定设置commander命令
  3. 拉取自己的模板
  4. 安装依赖
  5. 自动构建启动等

基本上编写CLI的步骤比较简单,就是按照基本的js来写,这里写得十分的简单,之后博主会将自己的 CLI 地址贴出来,同时详细介绍!

这段时间有点忙,我会抽一个周末将后面的详细步骤和代码都写出来,