8000 GitHub - youfeed/youloge.ui: youloge.com website dedicated UI library
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

youfeed/youloge.ui

Repository files navigation

Youloge.com 配套定制Vue3组件库 - beta版本

这个库干啥的

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

在使用该库的时候,你需要申请一对apikey/secret密钥对使用,再调用开放接口时候需要组织凭证apikey你可以理解为其他开放平台的APPID

平台不区分官方非官方,平台用户可以等同于你自己网站用户,比如云盘服务,视频服务也都是基于apikey/secret进行的分发。

组件库特点

  • 图标动态引入:不用再担心图标文件体积过大,只需引入图标名称即可
  • 配套简单路由:组件库自带路由,无需再引入路由文件
  • 极简的全局函数方法:可以再样式组件中直接调用全局函数方法
  • 极度精简 体积小 代码简单
  • 直接引入CDN 即可使用 52.35 kB │ gzip: 15.11 kB
  • https://unpkg.com/youloge或者https://cdn.jsdelivr.net/npm/youloge

NPM 安装

npm install youloge

import { createApp } from 'vue'

快速开始

createApp(App).use(youloge,{
  APIKEY:'', // *必须填写 接口平台组织调用凭证 可以理解为其他开发平台的`APPID`
  APIURL:'https://api.youloge.com', // inject('apiFetch')的请求地址
  VIPURL:'https://www.youloge.com', // inject('vipFetch')的请求地址
  // 可选:载入哈希路由可以实现更丰富得页面功能
  ROUTES:[
    {
      name:'', // 路由名称 
      path:'', // 当URL Hash值为`#{path}`时,默认跳转的页面
      component:'', // 推荐使用 `defineAsyncComponent` 可以实现动态懒加载
      icon:'...' // tdesign:activity 图标集:图标名称
    }
  ]
}).mount('#app')

更新日志

  • 2.1.1 提炼出全局属性和方法,更好的服务于业务开发
  • 2.1.0 组件库进行重构:重新拆分样式组件,函数组件,指令函数更好得服务于业务开发
  • 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并纳入鉴权与apikey配置项
  • 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 更新配置参数apikey,使其与youloge.sso,youloge.payment等组件联动
  • 0.2.7 新增v-copy指令,支持函数,字符串,HTML 暂不支持图片
  • 0.2.6 新增useDialog组件 支持alert,confirm,prompt 三种模式
  • 0.2.5 优化provide 重新封装fetch等函数式组件

项目结构

project
│
└───lib 开发目录(其他组件库一般叫packages)
│   │   
│   │   index.js UI组件库的入口
│   │
│   └───components 页面组件
│       │   button
│       │   input
│       │   table/index.js 导出文件
│       │   ...
│       │   
│   └───composables 函数组件
│       │   alert
│       │   fetch
│       │   message
│       │   storage/index.js 导出文件 
│   └───directives 指令组件
│       │   copy
│       │   ripple/index.js 导出文件 
│   └───style
│       │   index.scss 导出文件
│   └───utils 辅助方法
│       │   index.js 导出文件
│   index.js   导出安装方法
|
└───src 测试目录
│   │   assets 静态资源
│   │   route 路由
│   │   components 组件
│   │   views 视图文件
│   │   ...
│   vite.config.js 项目默认的配置
│   libs.config.js 打包组件库配置
│   package.json   项目依赖和脚本
└───
 

但行好事 莫问前程

0