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

youloge

v2.0.2

Published

youloge.com website dedicated UI library

Downloads

65

Readme

这是一个Youloge.com 配套项目 欢迎PR [主仓库] - beta版本

💡 ⚡️ 🛠️ 📦 🔩 🔑 - 开放文档

建议直接引入CDN 即可使用 54.14 kB │ gzip: 14.87 kB

https://unpkg.com/youloge或者https://cdn.jsdelivr.net/npm/youloge

createApp(App).use(youloge,{
  UKEY:'', // *必须填写 可以让`v-login` `usePayment` 权限指令自动注入初始化
  APIURL:'',
  VIPURL:'',
  OPENURL:'',
  // 可选文件路由 参考文档
  ROUTES:[
    name:'',
    path:'',
    component:'',
    icon:'...'
  ]
}).mount('#app')

更新日志

  • 2.0.2 配置参数全部采用大写,内置路由组件(自动处理登录)
  • 1.9.4 新增y-discuss 评论组件 跳转个人主页由开发者控制@navigate 事件
  • 1.8.9 新增useShopcart套餐下单组件,作为商品购物的前置条件(配合usePayment食用)
  • 1.8.4 新增v-search搜索指令,可以在div上绑定弹窗搜索页面
  • 1.8.0 优化useLoading useFetch 互相嵌套逻辑useFetch 默认mask:true
  • 1.7.3 新增useStorage函数组件 仅支持对象读(对象)写(对象覆盖),均返回最新对象
  • 1.7.1 优化项目结构:组件支持尽量多方式调用
  • 1.6.5 更换导出方式,支持按需导入使用: 组件模式正式确认:可以规范化书写新增组件``指令``函数
  • 1.5.0 去除样式组件,全部采用关键组件集,不倾入代码,组件库定位为定制小组件
  • 1.4.9 引入unocss来作为基础样式
  • 1.4.8 新增hashview组件用于承接hash文件路由功能同于动态懒加载组件
  • 1.4.3 优化useMessage的调用方式,简化代码
  • 1.4.2 新增v-ripple水波纹组件,重构useDialog交互组件支持password验证码输入
  • 1.3.9 新增y-rgba组件,用于展示Youloge虚拟货币与实际货币的预计换算结果
  • 1.3.5 优化v-login指令,共享usePlus组件
  • 1.3.2 新增y-discuss组件,展示评论
  • 1.3.2 新增y-label组件,展示标签
  • 1.2.6 更改useFetch增加path属性
  • 1.2.5 去除usePayment useSso等方法改为usePlus*
  • 1.2.2 修复关于open.youloge.com的小bug
  • 1.2.1 更新v-login,usePayment 减少与独立库js umd差异
  • 1.2.0 优化useFetch 增加api,vip,json,text,blob,buffer并纳入鉴权与ukey配置项
  • 1.1.7 增加useFetch返回值为err == -1登录过期处理
  • 1.1.4 优化postmessage 通信的通过性
  • 1.0.7 优化useMessage 和对应style
  • 1.0.4 优化localStoragesessionStorage的作用名
  • 1.0.0 增加usePayment组件,用于支付请求
  • 0.2.9 增加v-cloak 匹配vue渲染
  • 0.2.8 更新配置参数ukey,使其与youloge.sso,youloge.payment等组件联动
  • 0.2.7 新增v-copy指令,支持函数,字符串,HTML 暂不支持图片
  • 0.2.6 新增useDialog组件 支持alert,confirm,prompt 三种模式
  • 0.2.5 优化provide 重新封装fetch等函数式组件

这个库干啥的?

这是个vue3的组件库,进行高度定制化的自用组件库,很多组件都是配合youloge.com一起使用的,如果你仅仅是需要一个UI库开发自己的项目,这个并不适合。 如果你有自己的网站,那么可以接入youloge.console开放平台,我会将某些组件抽离成js umd脚本服务,例如登录注册,支付,充值,视频播放器,音乐播放器,团购商城,可以单独引入到你自己的网站使用。

在使用该库的时候,你需要申请一对ukey/secret密钥对使用,在引入使用产生的-收入/广告费/佣金 会结算到你的账户中。平台不怎么区分官方禾非官方,比如云盘服务,视频服务也都是基于ukey/secret进行的分发。

项目结构

project
│
└───lib 不用npm install
│   │   
│   │   index.js UI组件库的入口
│   │
│   └───components
│       │   button
│       │   input
│       │   components.js 统一导出组件
│       │   ...
│       │   
│   └───function
│       │   alert
│       │   ...
│       │   function.js 统一导出函数组件
│   └───...
│   
└───src
    │   assets 静态资源
    │   route 路由
    │   components 组件
    │   views 视图文件
    │   ...
│   vite.config.js 项目默认的配置
│   libs.config.js 打包组件库配置
│   package.json   项目依赖和脚本
 

git pull 项目之后 npm i

  1. 先到 package.json 运行 npm run build 打包出dist目录,项目需要依赖这个UI库。

  2. 再次运行 npm run dev ...

  3. 然后爬组件 写项目吧

我边学边写,前端真好玩,哈哈哈~~ 欢迎加微信 交流 11247005,如果你提交代码,我认真学习谢谢

Youloge.UI 定制性特别强,需要约定一些规则