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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uni-helper/uni-use

v0.19.14

Published

uni-app (vue3) 组合式工具集

Downloads

1,369

Readme

@uni-helper/uni-use

License npm

uni-app (vue3) 组合式工具集。要求 node>=18

安装依赖

npm install @uni-helper/uni-use @vueuse/core@9

如果你希望使用 @vueuse/core v10,请参考 uni-app#4604

目前没有支持 uni_modules 的计划,但欢迎 PR 贡献。

使用

详情请看 uni-use函数列表

其它

限制

在小程序和移动应用环境下有如下无法避开的限制:

  • 缺失某些全局变量(如 windownavigator 等)
  • 必须使用 uni-app 提供的 API 实现功能(如拦截器、存储等),API 不支持的也就无法支持,比如拦截同步 API、监听其它地方引起的剪切板变化等
  • 无法使用顶层 await

在开发网页时,建议直接使用 vue,避免过多的环境判断代码,同时也能享受更好的生态,如 vueuse 的完整支持。

构建

目前 @uni-helper/uni-use 会使用 unbuilduni API 之外的部分转译到 ES2017(即 ES8)。uni API 需要在项目构建时由 uni-app 官方提供的插件处理。

对于 vite + vue3 项目,请先设置 build.targetES6

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

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    target: 'es6',
    cssTarget: 'chrome61', // https://cn.vitejs.dev/config/build-options.html#build-csstarget
  },
  optimizeDeps: {
    exclude: ['vue-demi'],
  },
  plugins: [
    ...,
    uni(),
    ...,
  ],
});

然后在 src/main.tssrc/main.js 处自行添加 polyfill。以下是使用 core-js 的示例(需要自行安装 core-js),你也可以使用 es-shims

import 'core-js/actual/array/iterator';
import 'core-js/actual/promise';
import 'core-js/actual/object/assign';
import 'core-js/actual/promise/finally';
// 你可以根据需要自行添加额外的 polyfills
// import 'core-js/actual/object/values'
import { createSSRApp } from 'vue';
import App from './App.vue';

export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}

微信小程序的 JavaScript 支持度见 wechat-miniprogram/miniprogram-compat。微信小程序要支持 vue3,需设置基础库最低版本为 2.11.2 或以上,2.11.2 对应 chrome>=53,ios>=10

unplugin-auto-import 结合使用

// vite.config.ts
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vitest/config';
import autoImport from 'unplugin-auto-import/vite';
import { uniuseAutoImports } from '@uni-helper/uni-use';
import uni from '@dcloudio/vite-plugin-uni';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    autoImport({
      imports: [
        uniuseAutoImports(),
      ],
    }),
    uni({ ... }),
  ],
});

EventBus

如果你想使用 EventBus,请考虑使用 VueUse - useEventBusmittnanoevents。这个库不再重复提供类似功能。

TypeScript

@uni-helper/uni-use 本身使用 TypeScript 开发,拥有类型提示。

资源

致谢