---
nav:
  title: 前端
  path: /fea
group:
  title: 💊 学习文档
  order: 1
  path: /website
---


## 💊 学习文档

### 前沿技术

<table>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://deno.land/">
        <img src="https://deno.land/logo.svg" width="42" />
        <br />
        <strong>deno</strong>
        <div>新生代 node</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://lerna.js.org">
        <img src="https://lerna.js.org/images/lerna-hero.svg" width="42" />
        <br />
        <strong>Lerna</strong>
        <div>包管理器</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://ant.design">
        <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" width="42" />
        <br />
        <strong>antd</strong>
        <div>react UI框架</div>
      </a>
    </td>
  </tr>
</table>

### 动画库

<table>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://airbnb.io/lottie/#/README">
        <img src="https://airbnb.io/lottie/images/logo.webp" width="42" />
        <br />
        <strong>Bodymovin</strong>
        <div>UI动画生成库</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://matthew.wagerfield.com/parallax/">
        <img src="http://matthew.wagerfield.com/parallax/favicon.png" width="42" />
        <br />
        <strong>parallaxJs</strong>
        <div>视差动画库</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://dixonandmoe.com/rellax/">
        <img src="http://matthew.wagerfield.com/parallax/favicon.png" width="42" />
        <br />
        <strong>rellaxJs</strong>
        <div>mini 视差动画库</div>
      </a>
    </td>
  </tr>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://svgjs.dev/docs/3.0/">
        <img src="https://svgjs.dev/docs/3.0/assets/images/logo-svg-js-01d-128.png" width="42" />
        <br />
        <strong>SvgJs</strong>
        <div>svg工具库</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://mojs.github.io/">
        <img src="https://mojs.github.io/assets/img/logo.svg" width="42" />
        <br />
        <strong>MoJs</strong>
        <div>motion动画库</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://zzz.dog/">
        <img src="https://zzz.dog/img/solids.png" width="42" />
        <br />
        <strong>zdogJs</strong>
        <div>伪3D引擎库</div>
      </a>
    </td>
  </tr>
</table>

### React 方向

<table>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://antv.vision/zh">
        <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" width="42" />
        <br />
        <strong>antv</strong>
        <div>react 数据可视化方案</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://nicecoders.github.io/">
        <img src="http://jzx-h5.oss-cn-hangzhou.aliyuncs.com/logo.png" width="42" />
        <br />
        <strong>NiceCode</strong>
        <div>聚合工具库</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://ant.design">
        <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" width="42" />
        <br />
        <strong>antd</strong>
        <div>react UI框架</div>
      </a>
    </td>
  </tr>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://ahooks.js.org/">
        <img src="https://ahooks.js.org/logo.svg" />
        <br />
        <strong>ahooks</strong>
        <div>react hook 拓展库</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://mobile.ant.design/index-cn">
        <img src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png" width="42" />
        <br />
        <strong>ant-mobile</strong>
        <div>react 移动端UI框架</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://motion.ant.design/index-cn">
        <img src="https://zos.alipayobjects.com/rmsportal/TOXWfHIUGHvZIyb.svg" width="42" />
        <br />
        <strong>ant-motion</strong>
        <div>react 动效库</div>
      </a>
    </td>
  </tr>
  <tr>
    <td width="160" align="center">
      <a target="_blank" href="https://qiankun.umijs.org/">
        <img src="https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png" width="42" />
        <br />
        <strong>qiankun</strong>
        <div>微应用框架</div>
      </a>
    </td>
    <td width="160" align="center">
      <a target="_blank" href="https://umijs.org">
        <img src="https://gw.alipayobjects.com/zos/bmw-prod/598d14af-4f1c-497d-b579-5ac42cd4dd1f/k7bjua9c_w132_h130.png" width="42" />
        <br />
        <strong>UmiJS</strong>
        <div>react 企业级应用框架</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://pro.ant.design/zh-CN/">
        <img src="https://pro.ant.design/favicon.png" width="42" />
        <br />
        <strong>antd-pro</strong>
        <div>react 中台解决方案</div>
      </a>
    </td>
  </tr>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://scaffold.ant.design">
        <img src="https://zos.alipayobjects.com/rmsportal/HXZvKsbcQljpFToWbjPj.svg" width="42" />
        <br />
        <strong>scaffold</strong>
        <div>脚手架市场</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://nextjs.org/">
        <img src="https://nextjs.org/static/favicon/safari-pinned-tab.svg" width="42" />
        <br />
        <strong>NextJs</strong>
        <div>服务端渲染方案</div>
      </a>
    </td>
    
  </tr>
</table>

### Vue 方向

<table>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://cn.vuejs.org/">
        <img src="https://cn.vuejs.org/images/logo.svg" width="42" />
        <br />
        <strong>vue</strong>
        <div>渐进式框架</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://www.iviewui.com/">
        <img src="https://file.iviewui.com/dist/d6fcbeecd3f5ff1b1dd0a0f68bdf6ce7.svg" width="42" />
        <br />
        <strong>IView</strong>
        <div>vue UI框架</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://zh.nuxtjs.org/">
        <img src="https://zh.nuxtjs.org/_nuxt/icons/icon_512x512.c20795.png" width="42" />
        <br />
        <strong>Nuxt</strong>
        <div>vue 服务端渲染方案</div>
      </a>
    </td>
  </tr>
</table>

### Node 方向

<table>
  <tr>
    <td width="240" align="center">
      <a target="_blank" href="https://antv.vision/zh">
        <img src="https://gw.alicdn.com/tfs/TB1eGsrk79l0K4jSZFKXXXFjpXa-347-340.png" width="42" />
        <br />
        <strong>midway</strong>
        <div>企业级 node 框架</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://cnodejs.org/">
        <img src="https://static2.cnodejs.org/public/images/cnode_icon_64.png" width="42" />
        <br />
        <strong>CNode</strong>
        <div>Node.js 开源技术社区</div>
      </a>
    </td>
    <td width="240" align="center">
      <a target="_blank" href="https://www.koajs.com.cn/">
        <img src="https://tva1.sinaimg.cn/large/008i3skNly1gu7waxo9bxj60jk09s3ym02.jpg" width="42" />
        <br />
        <strong>Koa</strong>
        <div>Node 开发框架</div>
      </a>
    </td>
  </tr>
</table>