Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sherwinshen/front-end_learning_project

🌈 前端学习之项目汇总
https://github.com/sherwinshen/front-end_learning_project

Last synced: about 4 hours ago
JSON representation

🌈 前端学习之项目汇总

Awesome Lists containing this project

README 

        
# 前端项目(学习类)



> 前端学习过程中的一些项目汇总，包含**综合项目**（在单独仓库中）和**基础项目**（在当前仓库中）等。



# 📌 综合项目目录



- HTML/CSS 学习项目：[langlangDental](https://github.com/MrEnvision/langlangDental)

- Vue3.0 简易后台管理系统（体验版 Vue3.0）：[vue-admin](https://github.com/MrEnvision/vue-admin)

- React 简易后台管理系统：[react-admin](https://github.com/MrEnvision/react-admin)

- 在线租车项目：[客户端_vue-cars](https://github.com/MrEnvision/vue-cars)  [后台管理系统_vue-cars-admin](https://github.com/MrEnvision/vue-cars-admin)

- 数据可视化：[data-vision](https://github.com/MrEnvision/data-vision)  

  - [数据大屏_data-vision-screen](https://github.com/MrEnvision/data-vision-screen)

  - [数据报表_data-vision-report](https://github.com/MrEnvision/data-vision-report)

  - [移动报表_data-vision-mobile](https://github.com/MrEnvision/data-vision-mobile)

  - [ECharts 项目_data-vision-echarts](https://github.com/MrEnvision/data-vision-echarts)

  - [AntV 项目_data-vision-antv](https://github.com/MrEnvision/data-vision-antv)



# 📌 基础项目目录



> 重要程度由高到低👇！！！



- [文件上传与下载](./file_upload_download) — 前端文件上传与下载的常用方法总结；

- [自动化代码规范配置](./coding_guide_setting) —— 前端自动化代码规范配置， eslint + husky + prettier + lint-staged；

- [Vuex 使用指南](./vuex_tutorial) — Vuex的基础使用教程，state、getters、mutations、actions等介绍；

- [Vue 组件通信](./vue_components_communication) — Vue 组件通讯的几种方法；

- [前端跨域方法](./cross-domain_solutions) — 前端跨域的常见方法总结；

- [React_init_app](react_init_app) — React 初学项目井字棋；

- [MEVN 技术栈基础教程](./MEVN_stack_project) - 使用MongoDB、ExpressJS、VueJS和NodeJS构建项目的基础教程；

- [JavaScript 30 天挑战](./javascript_30days) — Build 30 things with 30 tutorial No Frameworks × No Compilers × No Libraries；

- [PureJavaScript](./pure_javascript) — Build A Real-World Application From Scratch. This is a simple issue tracker application；



# 📌 知识点 DEMO



JS 学习：



- [改变this的指向](./demo_summary/改变this指向/bind_call_apply.js)

- [类的创建与继承](./demo_summary/类创建与继承)

- [数组去重](./demo_summary/数组去重/index.js)

- [私有变量](./demo_summary/私有变量/index.js)

- [深度拷贝实现](./demo_summary/深度拷贝实现/index.js)

- [自定义 bind 函数](./demo_summary/bind函数实现/index.js)

- [setTimeout 实现 setInterval](./demo_summary/setTimeout实现setInterval/index.js)

- [promise 实现 ajax](./demo_summary/promise实现ajax/index.js)

- [模块化规范 CommonJS+ES6 Module](./demo_summary/模块化规范)

- [数组常用方法](./demo_summary/数组常用方法/index.js)

- [字符串常用方法](./demo_summary/字符串常用方法/index.js)

- [实现 sleep 效果](./demo_summary/实现sleep效果/index.js)

- [JS 监听对象属性的改变](./demo_summary/JS监听对象属性的改变)

- [JS 实现 sticky 布局](./demo_summary/JS实现sticky布局/)



CSS 学习：



- [三列布局](./demo_summary/三列布局)

- [CSS 画图](./demo_summary/CSS画图)

- [Flex 布局](./demo_summary/Flex布局)

- [居中布局](./demo_summary/居中布局)

- [Sticky 粘性布局](./demo_summary/sticky粘性布局)



HTML 学习：



- [实现拖拽功能 JS + H5](./demo_summary/实现拖拽功能)

- [map 标签定义图像映射](./demo_summary/map标签定义图像映射/index.html)

- [事件流](./demo_summary/事件流/index.html)

- [节流与防抖](./demo_summary/节流与防抖)

- [鼠标事件](./demo_summary/鼠标事件)

- [图片懒加载/预加载](./demo_summary/图片懒加载与预加载)

- [iframe 同源及跨域通信](./demo_summary/iframe同源及跨域通信)

- [手写弹出框](./demo_summary/手写弹出框/index.html)

- [轮播图](./demo_summary/轮播图)



其他学习：



- [Nodejs 学习](./demo_summary/Nodejs学习)

- [服务器应用(Nodejs+Mongodb)](./demo_summary/服务器应用_Nodejs_Mongodb)

- [文件上传](./demo_summary/文件上传)



# 📌 计划完成



- 前端换肤方法

- .......



------



项目内容有错误或存在侵权，请提交 issues 进行指正，合作请邮件 [email protected] 联系。