赵走x博客 - 开发者的网上家园

4、前端常用框架篇

资源编号:75731 精品推荐热度：106

前端常用框架篇

[ 1、 Chart.js](https://github.com/chartjs/Chart.js)

基于 canvas 的可视化库。可用于构建简单的 H5 图表，满足基本的日常可视化需求

[ 2、ant-design-vue](https://github.com/vueComponent/ant-design-vue)

Ant Design 的 Vue 实现，该项目已经得到 [Ant Design 官方](https://vue.ant.design/docs/vue/introduce-cn/)认可

[3、Vue拖拽生成表单](https://so-easy.cc/vue-element-nocode-admin/#/form)
![image.png](https://img.hacpai.com/file/2019/08/image-7d7db3a5.png)

[4、一个跨浏览器的CSS动画库](https://github.com/daneden/animate.css)

[5、css-creating](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/cssdream/css-creating)：CSS 创作指南

[6、zingtouch](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/zingchart/zingtouch)：支持移动端各种触摸动作包含：转动、挥动、滑动等动作的库，[官方网站](https://zingchart.github.io/zingtouch/)

[7、share.js](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/overtrue/share.js)：一键分享到微博、QQ 空间、QQ 好友、微信、腾讯微博、豆瓣等社交网站的 JavaScript 项目。[在线演示](http://overtrue.me/share.js/)

[8、bytesize-icons](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/danklammer/bytesize-icons)：极小、极简的 SVG 图标集合，[在线演示](http://danklammer.com/articles/svg-stroke-ftw/#give-it-a-spin)。

[9、vue-sui-demo](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/eteplus/vue-sui-demo)：这是一个用 Vue 和 SUI-Mobile 写的移动端 Demo，可以用来学习 Vue.js。[项目线上预览](https://eteplus.github.io/vue-sui-demo/)

[10、nodePPT](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/ksky521/nodePPT)：这可能是迄今为止最好的网页版PPT演示库，[在线演示](http://qdemo.sinaapp.com/)

[11、cssicon](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/wentin/cssicon)：纯 CSS 实现的 icon

[12、clipboard](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/zenorocha/clipboard.js)：实现了点击文本内容复制的 JavaScript 插件，优点：最新、极小、无任依赖、使用简单方便。[在线文档](https://clipboardjs.com/)

[13、learning-react](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/yiminghe/learning-react)：[yiminghe](https://github.com/yiminghe) 的 react 中文教程，包含[入门](http://yiminghe.me/learning-react/tutorial/zh-cn/intro.html#/)和[进阶](http://yiminghe.me/learning-react/tutorial/zh-cn/advanced.html#/)

[14、static](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/staticfile/static)：这个项目是一个仓库，它尽可能全面收录优秀的开源库，并免费为之提供 CDN 加速服务，使之有更好的访问速度和稳定的环境。同时，它也提供开源库源接入的入口，让所有人都可以提交开源库，包括 JavaScript、CSS、image 和 swf 等静态文件。[访问 Staticfile CDN](https://www.staticfile.org/about.html)

[15、WeFlow](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/weixin/WeFlow)：微信出品的一个高效、强大、跨平台的 Web 前端开发工作流工具，[官网](https://weflow.io/)

[16、atrament.js](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/jakubfiala/atrament.js)：极小的 JavaScript 画板，[在线演示](http://fiala.uk/atrament.js/demo/)

17、[Font-Awesome](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/FortAwesome/Font-Awesome/)：GitHub 上 Star 数最多的图标库，应该是当下最流行的图标库

18、[material-design-icons](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/google/material-design-icons)：Google 官方开源基于 Material Design 设计风格的图标库

19、[iview](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/iview/iview)：iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。特性：

* 高质量、功能丰富
* 友好的 API，自由灵活地使用空间
* 事无巨细的文档
* 细致、漂亮的 UI
* 使用单文件的 Vue 组件化开发模式
* 基于 npm + webpack + babel 开发，支持 ES2015

20、[flv.js](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/Bilibili/flv.js)：使用纯 JavaScript 写的 HTML5 Flash 视频（flv）播放器，示例代码如下：
```
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>
```
21、[RAP](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/thx/RAP)：阿里妈妈 MUX 团队出品，企业级 Web 接口管理工具。RAP 通过 GUI 工具帮助 Web 工程师更高效的管理接口文档，同时通过分析接口结构自动生成 Mock 数据、校验真实接口的正确性，使得接口开发更加规范、自动化。

22、[vue2-elm](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/bailicangdu/vue2-elm)：基于 vue2 + vuex 构建一个大型单页面应用，此项目大大小小共 45 个页面，涉及注册、登录、商品展示、购物车、下单等等，是一个完整的流程，

23、[standard](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/feross/standard)：统一 JavaScript，只需一种样式，[中文](https://github.com/feross/standard/blob/master/docs/README-zhtw.md)

24、[screenfull.js](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/sindresorhus/screenfull.js)：极小、跨平台的 JavaScript 全屏插件，[在线 demo](https://sindresorhus.com/screenfull.js/)

25、[octotree](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/buunguyen/octotree)：为 GitHub 和 GitLab 网站，提供直观地显示项目目录结构的浏览器插件，效果如下：

26、[Vue2.0LOL](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/arronf2e/Vue2.0LOL)：Vue2.0 版英雄联盟助手

27、[SuperTinyIcons](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/edent/SuperTinyIcons)：体积超级小、制作精致的常见网站和 app 的图标库，每个图标均小于 1KB

28、[Rental](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/answershuto/Rental)：一款租房 APP，基于 Node.js 爬虫，爬取 58 同城租房信息，并用地图进行可视化展示，方便用户获取周围租房信息

29、[slick](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/kenwheeler/slick)：实现了几乎所有效果的轮播图插件，[在线演示](http://kenwheeler.github.io/slick/)

30、[GifW00t](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/yaronn/GifW00t)：纯 JavaScript 写的 Web 录像插件，可以用来实现网页在线游戏回放、反馈网站 bug、演示用途等，实用举例：

* [Packman 游戏](http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html)
* [Helicopter 游戏](http://s3-us-west-2.amazonaws.com/anigif100/examples/helicopter/index.html)
* [在线画板](http://s3-us-west-2.amazonaws.com/anigif100/examples/paint/paint.html)

31、[APlayer](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/DIYgod/APlayer)：漂亮的 HTML5 音乐播放器

32、[DPlayer](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/DIYgod/DPlayer)：可爱的弹幕视频播放器

33、[feather](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/colebemis/feather)：简洁、清爽、免费的 icon 集合

34、[vue-3d-model](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/hujiulong/vue-3d-model)：展示三维模型的 Vue 组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，目前支持 obj、stl、dae 和 json 格式的模型，示例代码：

```vue
<template>
    <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</template>
<script>
 import { ModelObj } from 'vue-3d-model'
 export default {
 components: { ModelObj }
 }
</script>
```

35、[weweChat](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/trazyn/weweChat)：微信的第三方客户端。在完整实现 Web 微信功能的基础上，新增并优化部分功能，重设计整体 UI，提供更好的体验。Mac 安装命令：`brew cask install wewechat`

36、[puppeteer](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/GoogleChrome/puppeteer)：Google Chrome 团队开源的面向 Node.js 的，基于 DevTools 协议的远程 Headless Chrome 控制库，它可以生成网页截图、PDF、抓取单页应用与网页内容、进行自动化表单提交、界面测试与模拟键盘输入等功能。示例代码如下：

```vue
// 访问 https://example.com 并将截图保存为 example.png
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

await browser.close();
})();
```
37、[SelectPage](https://hellogithub.com/periodical/statistics/click/?target=https://github.com/TerryZ/SelectPage)：简洁优雅而功能强大的选择器，使用简单，适应各种UI环境，功能强大，丰富的参数和回调函数 。它包含了 autocomplete、ajax 数据源、多选择 Tag、i18n 国际化，结果列表分页展示，键盘快捷操作等
```js
//defined a array, the data returned at the server side is also used that format：
//Array[{Object},{...}]
var data = [
    {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
    {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
    {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//init SelectPage
$('#selectpage').selectPage({
    showField : 'desc',
    keyField : 'id',
    data : data
});

```

38、wxapp-market：小程序营销组件，使用简单、方式齐全。包含示例代码，玩法多样

大转盘
刮刮乐
老虎机
水果机
...

39、SelectMenu：基于 jQuery 1.x 库的多样化的下拉菜单插件，源码具有中文注释，对于学习 jQuery 插件有帮助。示例代码如下：
```
var data = [
    {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
    {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
    {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//initialize selectmenu
$('#btnDemo').selectMenu({
    showField : 'desc',
    keyField : 'id',
    data : data
});

```
40、、emoji：方便快速查找获取 emoji 表情、名称，并且可以复制到任何文本中，另外支持中文搜索 ? 网站地址

41、[富文本编辑器：CKEditor](https://ckeditor.com/docs/index.html)

42、[Mint UI,基于 Vue.js 的移动端组件库](http://mint-ui.github.io/#!/zh-cn)