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

uniogconsole

v1.0.2

Published

Vconsole的vue组件封装,支持vue3和uniapp

Readme

这是一个自定义的日志控制台,用于在Uniapp中显示日志信息,使用本插件需要uniapp项目是vite构建的,并且需要安装vitetemplateinject插件。

使用方法:

  1. 在项目中导入LogConsole组件。

  2. 在main.js中全局注册LogConsole组件。

import { createApp } from 'vue'
import App from './App.vue'
import { LogConsole } from 'components/LogConsole'

const app = createApp(App)
app.component('LogConsole', LogConsole)
app.mount('#app')
  1. 安装vitetemplateinject插件 npm install vitetemplateinject --save-dev, 这个插件的作用是在模板中注入自定义的组件。

  2. 在vite.config.js中引入vitetemplateinject插件,并配置插件,可以添加环境变量,在开发环境使用插件,生产环境不使用插件。

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

import vitePluginTemplateInject from 'vitetemplateinject'
// 判断是否是 App 平台 且 非生产环境
const isAppDev = process.env.UNI_PLATFORM?.startsWith('app') && process.env.NODE_ENV !== 'production'
export default defineConfig({
  plugins: [
    // 仅在 App 开发环境使用插件
    ...(isAppDev ? [vitePluginTemplateInject(["<LogConsole ref='loggerConsole'></LogConsole>"])] : []),
    uni(),
  ],
})
  1. 在app.vue中引入组件的监听方法,用来监听项目中request 请求的日志信息。
// 在app.vue中引入组件的监听方法
import { onLaunch } from '@dcloudio/uni-app'
import { hijackRequest } from "@/components/LogConsole/requestInterceptor.js";

onLaunch(() => {
  hijackRequest() // 监听请求日志
})
  1. 在需要显示日志的地方调用LogConsole的log方法,传入日志信息。
// 在需要显示日志的地方调用log方法
this.$refs.loggerConsole.log('这是一条日志信息');
// 如果组件未加载完成,可以使用nextTick

功能:

  1. 组建的开启按钮,可以拖动到任意位置,点击可以显示日志信息。

  2. 组件可以显示日志信息,包括请求的url请求的方法、请求的参数、响应的状态码、响应的数据,缓存信息,系统信息。

  3. 可以复制每一个信息;

  4. 可以清除日志信息;

  5. 可以把信息导出为文件到手机;

  6. 信息过长有展开收起功能;