首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端开源实战项目推荐

前言 这段时间一直有学员和一些正在从事前端开发工作的朋友询问“有没有推荐的前端开源项目?”,因为一直忙于工作没有时间去整理,今天应各位的请求,我整理了一些开源项目 。...Vue.js Vue Element Admin vue-element-admin 是一个后台前端解决方案,它是基于 element-ui 实现的。...:vue2-manage 项目有台管理系统效果查看:back-manage 项目前端手机模拟预览:elm-manage Vue Manage System vue-manage-system 是基于 Vue.js...:vue-music-webapp Litemall litemall 是基于 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue 用户移动端 开发的项目 litemall...:netease-clound-webapps React.js Antd Admin antd-admin 是基于 React + Ant Design 开发的一套优秀的中后台前端解决方案。

1.4K10

前端 实战项目·WebSocket 心跳重连机制

最近在项目中使用 WebSocket 实现了一个简单在线聊天室功能,在此探究下心跳重连的机制。 WebSocket WebSocket 允许服务端主动向客户端推送数据。...较少的控制开销 更强的实时性 保持连接状态 更好的二进制支持 可以支持扩展 更好的压缩效果 WebSocket 最大的优势就是能够保持前后端消息的长连接,但是在某些情况下,长连接失效并不会得到及时的反馈,前端并不知道连接已断开...为了避免这种情况,保证连接的稳定性,前端需要进行一定的优化处理,一般采用的方案就是心跳重连。前后端约定,前端按一定间隔发送一个心跳包,后端接收到心跳包后返回一个响应包,告知前端连接正常。...如果一定时间内未接收到消息,则认为连接断开,前端进行重连。...这里将最终完成代码上传到 Github,并将其封装上传到 npm 以便今后在项目中使用, 有兴趣可以尝试一下 websockethb 。

4.5K21

前端-Vue2.0 项目开发实战经验

作者:离尘不理人 https://segmentfault.com/a/1190000011066120 项目架构 项目目录 ├── build ├── config ├── dist │  ...mixin │   ├── router │   ├── service │   ├── store │   └── util └── static    ├── images    └── lib 项目目录是采用...我们在项目中引入了 vuex ,通常情况下是不需要使用 eventbus 的,但是有一种情况下我们需要使用它,那就是在路由钩子函数内部的时,在项目中,我们需要在 beforeEnter 路由钩子里面对外抛出事件...$alert('请勿使用无痕模式浏览'); }); 自定义指令实现埋点数据统计 在项目中通常需要做数据埋点,这个时候,使用自定义指令将会变非常简单 在项目入口文件 main.js 中配置我们的自定义指令...开发相关配置 反向代理 在项目目录的 config 文件下面的 index.js 配置我们的本地反向代理和端口信息 dev: {  env: require('.

92930

前端框架 qiankun 项目实战(一)--本地开发篇

正准备含泪敲键盘的时候,我想到了以前看过的微前端的相关文章,不如试试这个玩意吧,然后,微前端正式踩坑。 什么是微前端?...按照网上的说法和小黑的理解,微前端就是应用分割,独立运行,独立部署,将原本把所有功能集中于一个项目中的方式转变为把功能按业务划分成一个主项目和多个子项目,每个子项目负责自身功能,同时具备和其它子项目和主项目进行通信的能力...总的来说微前端就是 ❝一个完整应用划分成一个主应用和一个或多个微应用,应用间相互独立,可相互通信。 ❞ 如何实现微前端?...❞ 当然了,这次的项目迁移我不是直接用iframe改造的,而是站在巨人的肩膀上,我用了一个叫qiankun的微前端框架改造,因为公司的代码我不能贴上来,下面我会建一个vue3项目和一个vue2项目来大概还原一下我是如何改造公司项目的...❝以上就是qiankun框架实战的第一篇本地开发的全部内容,总体结构上跟我做的项目迁移很相似了,其它还有些小细节不影响,其实本章有一个巨坑,下一篇将带大家部署打包后的项目,并告诉大家这个巨坑在哪里。

72920

推荐 GitHub 上值得前端学习的开源实战项目

推荐 GitHub 上值得前端学习的开源实战项目。...Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2.0 管理系统模板 基于 vue2 + vuex 构建一个具有...vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp Spring Boot 后端 + Vue 管理员前端...+ 微信小程序用户前端 + Vue 用户移动端 高仿网易云音乐的 webapp,只实现了 APP 的核心功能 Vue + TypeScript + Element-Ui 支持 markdown 渲染的博客前台展示...React.js 一套优秀的中后台前端解决方案 网易云音乐第三方 一个 react + redux 的完整项目 和 个人总结 react 后台管理系统解决方案 这是一个用来查看GitHub最受欢迎与最热项目

1.7K30

前端框架 qiankun 项目实战(一)--本地开发篇

正准备含泪敲键盘的时候,我想到了以前看过的微前端的相关文章,不如试试这个玩意吧,然后,微前端正式踩坑。 什么是微前端?...按照网上的说法和小黑的理解,微前端就是应用分割,独立运行,独立部署,将原本把所有功能集中于一个项目中的方式转变为把功能按业务划分成一个主项目和多个子项目,每个子项目负责自身功能,同时具备和其它子项目和主项目进行通信的能力...总的来说微前端就是 ❝一个完整应用划分成一个主应用和一个或多个微应用,应用间相互独立,可相互通信。 ❞ 如何实现微前端?...❞ 当然了,这次的项目迁移我不是直接用iframe改造的,而是站在巨人的肩膀上,我用了一个叫qiankun的微前端框架改造,因为公司的代码我不能贴上来,下面我会建一个vue3项目和一个vue2项目来大概还原一下我是如何改造公司项目的...❝以上就是qiankun框架实战的第一篇本地开发的全部内容,总体结构上跟我做的项目迁移很相似了,其它还有些小细节不影响,其实本章有一个巨坑,下一篇将带大家部署打包后的项目,并告诉大家这个巨坑在哪里。

85720

基于DDD的前端项目架构设计与实战

项目工程变更 要再前端实施DDD,我们的前端项目工程将会发生一定的变化,传统的单体式应用结构已经无法满足分领域设计的应用需求,所以,我们的项目团队可能需要经历一场痛苦的项目重建过程。...另外,一个非常有意思的点在于,好的命名,有利于项目代码的持续维护,坏的命名是一场灾难,我们应该在发现坏命名的时候,立即修改它,如果这个命名是与后端耦合的,我们应该在前端建立mapping来使用前端自己的好命名...基于DDD的投资系统前端架构设计实战 投资系统是面向投资活动参与者的管理系统,一般是由投资公司内部建设的用于完成投资活动的记录、管理、辅助工作等等。...项目工程设计 在《复杂企业应用前端架构探索》一文中,我详细阐述了项目工程的洋葱图,如下。我们将进入到最外层“前端工程”的探讨。我们要做更多的建设,来支持我们多端同构的能力。...结语 本文详细阐述了我在前端运用DDD理念进行设计和实战的全部,相信你读毕能形成一个基本的轮廓,知道在前端去实践DDD可能需要经历哪些过程,只是在具体实践过程中,还要去思考具体细节应该怎么做。

1.1K30

前端基础-TodoList 案例

第4章 TodoList 案例 上市产品: ToDoList 、奇妙清单 、滴答清单 学习练手项目 : TodoMVC 、 Vue官方示例 为什么选择这样的案例: 产品功能简洁,需求明确,所需知识点丰富...;实现基本功能容易,涵盖所学基础知识;而可扩展性强,完善所有功能比较复杂,所需技术众多;在学习中,可以灵活取舍; 4.1 项目初始化 在项目目录中执行 npm install 命令,下载所需静态资源.../js/vue.js"> 同时 在 index.html 最下方,项目引入了app.js ; 而我们要写的 vuejs 代码,都放在这个文件中; ? ? ?...=>{ // return v>8; // }) // 精简写法 var new_arr = arr.filter((v)=> v>8); console.log(new_arr); 修改项目代码...v.stat); }, TodoList案例暂时告一段落,我们并没有将产品做完,因为我们需要用到其他知识了;

1.5K10
领券