Skip to content

Latest commit

 

History

History
151 lines (112 loc) · 3.83 KB

README.md

File metadata and controls

151 lines (112 loc) · 3.83 KB

frame-less-ui组件库


介绍

一个跨框架的前端业务组件库, 支持原生/vue3/vue2/react.

特性

  • 🐻 web component原生支持, 天然跨框架
  • ⚡️ 组件使用vue3语法开发, 学习成本低
  • ✅ vue3/vue2/react定制化用法, 更符合潮流
  • 🧙‍ 组件按需导入、按需加载
  • 🔋 核心依赖可复用
  • 🍃 vitepress文档
  • 🥃 xxx
  • 👀 xxx

参与开发

环境要求

node版本: `node`v18.18.0

包管理器: `yarn`v1.22.19

内置vue版本： 3.5.1以上!
# 获取项目
git clone https://github.com/LAMMUpro/frame-less-ui.git
# 进入项目目录
cd ./frame-less-ui
# 安装yarn, 如果没有的话
npm i -g yarn
# 安装依赖
yarn
# 调试项目
yarn dev
# 调试文档
yarn docs
# 打包
yarn build:all

常用链接

组件调试(html/react/vue) input组件调试👈

组件文档👈 需先运行yarn docs

相关技术

基本原理: webcomponent

响应式: vue

打包器: vite

文档系统: vitepress

目录结构

docs # vitepress项目
src
  - components # fl组件
    - [xxx]
      - demo 
        - index.html # 组件测试 （yarn vite后访问 http://localhost:5173/src/components/input/demo/index.html）
        - index.tsx # 组件测试（react环境）
        - index.vue # 组件测试（vue环境）
      - index.ce.vue # vue组件源码
      - index.ts # 组件打包入口文件（注册自定义组件）
      - utils.ts # 组件工具
      - wrap.react.tsx # react包装用法
      - wrap.vue2.tsx # vue2包装用法
      - wrap.vue3.tsx # vue3包装用法
  - global.d.ts # 注册组件ts类型（vue3）
package2npm.json # 发布到npm的package.json
vite.config.ts # vite配置(用于打包组件库/wrap.vue3/wrap.react)
vite.config.vue2.ts # vite配置(用于打包wrap.vue2)

组件库原理

  1. vue3支持将.vue文件编译成web component组件(建议使用vue3.5.2以上版本,支持的特性更多)

  2. 目前web component原生的功能不够齐全, 比如说vue3的作用域插槽在web component是用不了的, 但是有解决方案, 给每个组件用各自的框架包装一层, 就可以增强web component, 所以每个组件下面都有wrap.vue3.vue / wrap.vue2.vue / wrap.react.tsx

开发规范

  • 文件名不要有空格！！！

  • 不要直接修改文件名/文件夹名, 应使用git mv ./old.vue ./new.vue代替

  • 文件名, 尽量不要绑定前缀fl-

项目配置

项目忽略大小写(项目根目录下运行)

git config core.ignorecase false # 在项目根目录中执行

分支说明

master - 主分支

dev - 开发分支

x.y.z - 版本分支

更新说明

版本详情见storybook文档

  • 1.1.0
    • xx
    • xx

发版

// 需切换到此目录下才能发
cd ./npm
// 切换回官方镜像源
npm config set registry https://registry.npmjs.com
// 如果失败需要先登录npm login
npm publish --access=public
// 切换为淘宝镜像
npm config set registry https://registry.npmmirror.com

常见问题

  1. 使用import styles from './index.module.scss';的语法会导致在/dist/assets/下生成.css资源，由于没有.html入口，所以这个资源目前是用不到的

  2. web component需要从shadow dom外引入@font-face

例如字体图标的iconfont.css需要把@font-face提到单独的font-face.css