大前端快速入门

偏执的太偏执、 2022-11-03 11:11 231阅读 0赞

> 博主要去安心考研了 奥力给  
> 学习路线 一般 HTML5基础->css3->js+es6->jquery->ajax>bootstrap->vue.js/React/AngularJS  
> 学习路线 vue HTML5基础->css3->js+es6->->nodejs->webpack->vue.js  
> 学习路线uni-app 移动端/微信小程序 HTML5基础->css3->js+es6->vue.js->uni-app->uniCloud  
> 进阶 学习 webpack CDN  
> 桌面端开发 electron  
> 另外http协议也要了解

> 组件库element  
> vue2.x组件库[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]  
> vue3.x组件库[https://element-plus.gitee.io/\#/zh-CN][https_element-plus.gitee.io_zh-CN]  
> react组件库[https://elemefe.github.io/element-react/\#/zh-CN/quick-start][https_elemefe.github.io_element-react_zh-CN_quick-start]

> 菜鸟HTML教程[https://www.runoob.com/html/html5-intro.html][https_www.runoob.com_html_html5-intro.html]  
> 菜鸟JS教程[https://www.runoob.com/js/js-tutorial.html][https_www.runoob.com_js_js-tutorial.html]  
> 菜鸟es6教程[https://www.runoob.com/w3cnote/es6-tutorial.html][https_www.runoob.com_w3cnote_es6-tutorial.html]  
> 菜鸟nodejs教程[https://www.runoob.com/nodejs/nodejs-tutorial.html][https_www.runoob.com_nodejs_nodejs-tutorial.html]  
> 菜鸟css教程[https://www.runoob.com/css3/css3-tutorial.html][https_www.runoob.com_css3_css3-tutorial.html]  
> 菜鸟json教程[https://www.runoob.com/json/json-tutorial.html][https_www.runoob.com_json_json-tutorial.html]  
> vue3文档[https://www.vue3js.cn/][https_www.vue3js.cn]  
> vue2文档[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]  
> 菜鸟bootstrap4[https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html][https_www.runoob.com_bootstrap4_bootstrap4-tutorial.html]  
> 菜鸟React教程[https://www.runoob.com/react/react-tutorial.html][https_www.runoob.com_react_react-tutorial.html]  
> 菜鸟AngularJS教程[https://www.runoob.com/angularjs/angularjs-tutorial.html][https_www.runoob.com_angularjs_angularjs-tutorial.html]  
> 菜鸟vue教程[https://www.runoob.com/vue2/vue-tutorial.html][https_www.runoob.com_vue2_vue-tutorial.html]  
> 菜鸟ajax教程[https://www.runoob.com/ajax/ajax-tutorial.html][https_www.runoob.com_ajax_ajax-tutorial.html]  
> webpack(资源管理打包)官网[https://www.webpackjs.com/][https_www.webpackjs.com]  
> electron桌面端开发官网[https://www.electronjs.org/][https_www.electronjs.org]  
> 超牛逼动效https://animate.style[https://animate.style/][https_animate.style]  
> axios中文文档[http://www.axios-js.com/][http_www.axios-js.com]

> 这是博主自己写的 也算是笔记 如果有错误还请指正

# HTML入门 #

## 1.[开发工具选择][Link 1] ##

## 2.[认识HTML文件][HTML] ##

## 3.[div块级元素][div] ##

## 4.[css][] ##

## 5.[组件化思想][Link 2] ##

## 6.[设计软件以及总结][Link 3] ##

# JS入门 #

## 1.[让网页动起来的js][js] ##

## 2.[声明和操作变量][Link 4] ##

## 3.[认识Symbol、Map、 Set][Symbol_Map_ Set] ##

## 4.[对象][Link 5] ##

## 5[.函数][.] ##

## 6.[异步编程][Link 6] ##

# VUE2快速入门 #

## 1.[安装vue以及搭建第一个vue项目][vue_vue] ##

## 2.[添加页面和简单路由拦截][Link 7] ##

## 3.[数据声明和绑定使用][Link 8] ##

## 4.[组件基础用法][Link 9] ##

## 5.[组件进阶与插槽][Link 10] ##

## 6.[实例property(重点)][property] ##

# VUE3快速入门 #

## 1.[创建项目][Link 11] ##

# 云开发uniCloud+uni-app #

## 1.[服务空间创建以及部署一个云函数][Link 12] ##

## 2.[云存储基础][Link 13] ##

## 3.[云数据库基础][Link 14] ##

## 4.[本机手机号一键登录以及第三方登陆][Link 15] ##

## 5.[练习之整合百度ai图像识别SDK][ai_SDK] ##

# uni-app小程序开发 #

## [项目体验][Link 16] ##

## 1.[准备工作][Link 17] ##

## 2.[选题][Link 18] ##

## 3.[页面跳转以及底部选项][Link 19] ##

## 4.[前后端编写，交互，百度图像识别接入][Link 20] ##

## 5.[再次开发前端][Link 21] ##

## 6.[部署到服务器以及小程序上线][Link 22] ##

# vue数据可视化—整合echarts #

## 1.[vue简单数据可视化—结合echarts实现柱状图][vue_echarts] ##

# 腾讯位置服务使用 #

## [uniapp(vue通用)整合腾讯位置服务SDK][uniapp_vue_SDK] ##

## [位置服务分类专栏][Link 23] ##

# 练习一 vue疫情地图(使用了ehcarts+element) #

> 代码未优化 练手项目 如果优化 请每2-4行写成一个函数 嵌套使用

## 1.[实现世界疫情地图(点击进入子地图)][Link 24] ##

## 2.[疫情大屏数据展示+数据导出+地图图片下载][Link 25] ##

# 练习二 爬虫播放器(vue3) #

> 代码未优化 练手项目 如果优化 请每2-4行写成一个函数 嵌套使用

## 1.[搭建项目][Link 26] ##

## 2.[寻找qq音乐接口][qq] ##

## 3.[页面布局][Link 27] ##

## 4.[功能实现][Link 28] ##

# 练习三 情人节特辑 uni-app+uniCloud #

## 1.[送给女朋友的情人节礼物—超贴心小程序][Link 29] ##

## 2.[七夕到了！不会写代码？一样可以给女朋友建个网站][Link 30] ##

## 3.[uniCloud使用云函数每天定时向女朋友发送邮件推送天气][uniCloud] ##

## 4.[uniCloud使用云开发每天定时向女朋友发送短信][uniCloud 1] ##

# 更多 #

小说阅读器 超市数据管理系统 会在代码优化后再发  
爬虫案例学习平台应该很快了  
专心考研了 文章更新会变慢 非常抱歉

github 仓库地址 [https://github.com/dmhsq][https_github.com_dmhsq]

欢迎访问博客[代码哈士奇][Link 31]  
技术 聊天 交流群 974178910  
前端交流群 535620886

[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[https_element-plus.gitee.io_zh-CN]: https://element-plus.gitee.io/#/zh-CN
[https_elemefe.github.io_element-react_zh-CN_quick-start]: https://elemefe.github.io/element-react/#/zh-CN/quick-start
[https_www.runoob.com_html_html5-intro.html]: https://www.runoob.com/html/html5-intro.html
[https_www.runoob.com_js_js-tutorial.html]: https://www.runoob.com/js/js-tutorial.html
[https_www.runoob.com_w3cnote_es6-tutorial.html]: https://www.runoob.com/w3cnote/es6-tutorial.html
[https_www.runoob.com_nodejs_nodejs-tutorial.html]: https://www.runoob.com/nodejs/nodejs-tutorial.html
[https_www.runoob.com_css3_css3-tutorial.html]: https://www.runoob.com/css3/css3-tutorial.html
[https_www.runoob.com_json_json-tutorial.html]: https://www.runoob.com/json/json-tutorial.html
[https_www.vue3js.cn]: https://www.vue3js.cn/
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[https_www.runoob.com_bootstrap4_bootstrap4-tutorial.html]: https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
[https_www.runoob.com_react_react-tutorial.html]: https://www.runoob.com/react/react-tutorial.html
[https_www.runoob.com_angularjs_angularjs-tutorial.html]: https://www.runoob.com/angularjs/angularjs-tutorial.html
[https_www.runoob.com_vue2_vue-tutorial.html]: https://www.runoob.com/vue2/vue-tutorial.html
[https_www.runoob.com_ajax_ajax-tutorial.html]: https://www.runoob.com/ajax/ajax-tutorial.html
[https_www.webpackjs.com]: https://www.webpackjs.com/
[https_www.electronjs.org]: https://www.electronjs.org/
[https_animate.style]: https://animate.style/
[http_www.axios-js.com]: http://www.axios-js.com/
[Link 1]: https://dmhsq.blog.csdn.net/article/details/109489499
[HTML]: https://dmhsq.blog.csdn.net/article/details/109493719
[div]: https://dmhsq.blog.csdn.net/article/details/109522887
[css]: https://dmhsq.blog.csdn.net/article/details/109548962
[Link 2]: https://dmhsq.blog.csdn.net/article/details/109605291
[Link 3]: https://dmhsq.blog.csdn.net/article/details/109627327
[js]: https://dmhsq.blog.csdn.net/article/details/109712125
[Link 4]: https://dmhsq.blog.csdn.net/article/details/109790365
[Symbol_Map_ Set]: https://dmhsq.blog.csdn.net/article/details/111066431
[Link 5]: https://dmhsq.blog.csdn.net/article/details/114045537
[.]: https://dmhsq.blog.csdn.net/article/details/114042673
[Link 6]: https://dmhsq.blog.csdn.net/article/details/114292042
[vue_vue]: https://dmhsq.blog.csdn.net/article/details/109497258
[Link 7]: https://dmhsq.blog.csdn.net/article/details/110149626
[Link 8]: https://dmhsq.blog.csdn.net/article/details/110148940
[Link 9]: https://dmhsq.blog.csdn.net/article/details/110239488
[Link 10]: https://dmhsq.blog.csdn.net/article/details/110272365
[property]: https://dmhsq.blog.csdn.net/article/details/110352046
[Link 11]: https://blog.csdn.net/qq_42027681/article/details/110428481
[Link 12]: https://dmhsq.blog.csdn.net/article/details/113746528
[Link 13]: https://dmhsq.blog.csdn.net/article/details/113808576
[Link 14]: https://dmhsq.blog.csdn.net/article/details/113855441
[Link 15]: https://dmhsq.blog.csdn.net/article/details/113948961
[ai_SDK]: https://dmhsq.blog.csdn.net/article/details/113764664
[Link 16]: https://dmhsq.blog.csdn.net/article/details/113488301
[Link 17]: https://dmhsq.blog.csdn.net/article/details/111679655
[Link 18]: https://dmhsq.blog.csdn.net/article/details/111999843
[Link 19]: https://dmhsq.blog.csdn.net/article/details/112987370
[Link 20]: https://dmhsq.blog.csdn.net/article/details/113093614
[Link 21]: https://dmhsq.blog.csdn.net/article/details/113482002
[Link 22]: https://dmhsq.blog.csdn.net/article/details/113730970
[vue_echarts]: https://dmhsq.blog.csdn.net/article/details/109681879
[uniapp_vue_SDK]: https://dmhsq.blog.csdn.net/article/details/113405971
[Link 23]: https://blog.csdn.net/qq_42027681/category_10782971.html
[Link 24]: https://dmhsq.blog.csdn.net/article/details/110049184
[Link 25]: https://dmhsq.blog.csdn.net/article/details/112854183
[Link 26]: https://dmhsq.blog.csdn.net/article/details/110564001
[qq]: https://dmhsq.blog.csdn.net/article/details/110733250
[Link 27]: https://dmhsq.blog.csdn.net/article/details/110898434
[Link 28]: https://dmhsq.blog.csdn.net/article/details/110979482
[Link 29]: https://dmhsq.blog.csdn.net/article/details/113725169
[Link 30]: https://dmhsq.blog.csdn.net/article/details/113770648
[uniCloud]: https://dmhsq.blog.csdn.net/article/details/113811401
[uniCloud 1]: https://dmhsq.blog.csdn.net/article/details/113839561
[https_github.com_dmhsq]: https://github.com/dmhsq
[Link 31]: https://dmhsq.blog.csdn.net/