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

fx-front-framework

v1.7.12

Published

FX Front Framework

Downloads

23

Readme

PC端封装的业务组件,工具类,Hooks等

v1.3 pc-fx-framework ====> fx-front-framework

负责人:jiangjunjie(打包,发布等)

0. 使用原则

  • 所有两个项目以上中使用到的组件,都可以提取到组件库中
  • 所有较为通用的函数,hooks等,都可以提取到组件库中
  • 鼓励所有人对此组件库做出贡献

1. 文件夹介绍

  • build:build脚本文件,Gulp + Rollup
  • packages:主要源码
    • components:组件源码
    • directives:指令源码
    • hooks:hooks源码
    • fx-front-framework:总导出目录
    • theme:样式源码
    • tokens:TS类型源码
    • utils:工具函数等源码
  • scripts:上传文档以及发布组件库脚本
  • typings:存放volar插件global.d.ts声明文件
  • website:文档网站

2. 安装过程

  1. 全局安装pnpm:npm install -g pnpm
  2. 执行pnpm i
  • 安装时遇到大量包请求报错,请先查看 .npmrc 文件中是否配置了「代理」,如果是,则先将代理配置为本机代理 或 注释掉代理配置,再执行安装;
  • 安装过程慢的话,可以自己设置不同的npm registry或者修改.npmrc文件中的代理地址;
  • 如安装后报错「sh: vite: command not found」,则可能是依赖未装全,建议切换到 npm 官方源,配置翻墙代理后,再进行安装;完整安装后,node_modules 项目数应该在 930+;

3. 使用说明

新建组件步骤

  1. 在components目录下新建文件夹,文件夹结构参考:hello-world
  2. 在components/index.ts中添加导出
  3. 在fx-front-framework/components.ts中添加导出
  4. 在typings/global.d.ts添加类型声明

新建指令(Directives)步骤

  1. 在directives目录下新建文件夹,文件夹结构参考:focus
  2. 在directives/index.ts中添加导出

新建hook(Hooks)步骤

  1. 在hooks目录下新建文件夹,文件夹结构参考:use-focus
  2. 在hooks/index.ts中添加导出

新建token步骤

  1. 在tokens目录下新建文件,文件参考:test.ts
  2. 在tokens/index.ts中添加导出

新建util步骤

  1. 在utils目录下新建文件
  2. 在utils/index.ts中添加导出

新建样式步骤

  1. 在theme文件夹新建相应的scss文件

新建文档(Doc)步骤

  1. 在website/docs/zh-CN目录下新建*.md文件
  2. 在website/nav.config.json里添加对应的路由
  • markdown中支持 :::demo-fs <directory>/<filename> ::: 语法,默认的文件夹位置在website/examples目录下,请参考test.md文件
  • nav.config.json 中的path对应的是.md文件的名称

调试过程

  1. 编写好对应的文档后,执行pnpm website-dev命令
  2. 打开对应的文档地址,查看效果

打包发布过程

  1. 升级版本:修改packages/fx-front-framework/package.json中的版本号
  2. (可选)升级依赖(hongluan系列)版本,全局搜索对应的组件库名称,修改版本号
  3. 执行pnpm build命令
  4. 设置相应的NPM Registry地址(默认地址为公司的私有仓库)
  5. 执行pnpm pub命令

构建帮助文档过程

  1. 执行pnpm website-build命令
  2. 拷贝website-dist目录下的文件到相应的静态服务器