/youloge.ui

youloge.com website dedicated UI library

Primary LanguageVue

这是一个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 优化localStorage与sessionStorage的作用名
  • 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 定制性特别强，需要约定一些规则