大前端快速入門

2021-02-28 12:00:39

博主要去安心考研了 案例給
學習路線 一般 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/
vue3.x元件庫https://element-plus.gitee.io/
react元件庫https://elemefe.github.io/element-react/

菜鳥HTML教學https://www.runoob.com/html/html5-intro.html
菜鳥JS教學https://www.runoob.com/js/js-tutorial.html
菜鳥es6教學https://www.runoob.com/w3cnote/es6-tutorial.html
菜鳥nodejs教學https://www.runoob.com/nodejs/nodejs-tutorial.html
菜鳥css教學https://www.runoob.com/css3/css3-tutorial.html
菜鳥json教學https://www.runoob.com/json/json-tutorial.html
vue3檔案https://www.vue3js.cn/
vue2檔案https://cn.vuejs.org/v2/guide/
菜鳥bootstrap4https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
菜鳥React教學https://www.runoob.com/react/react-tutorial.html
菜鳥AngularJS教學https://www.runoob.com/angularjs/angularjs-tutorial.html
菜鳥vue教學https://www.runoob.com/vue2/vue-tutorial.html
菜鳥ajax教學https://www.runoob.com/ajax/ajax-tutorial.html
webpack(資源管理打包)官網https://www.webpackjs.com/
electron桌面端開發官網https://www.electronjs.org/
超牛逼動效https://animate.stylehttps://animate.style/
axios中文檔案http://www.axios-js.com/


這是博主自己寫的 也算是筆記 如果有錯誤還請指正

HTML入門

1.開發工具選擇

2.認識HTML檔案

3.div塊級元素

4.css

5.元件化思想

6.設計軟體以及總結



JS入門

1.讓網頁動起來的js

2.宣告和操作變數

3.認識Symbol、Map、 Set

4.物件

5.函數

6.非同步程式設計(待補充)



VUE2快速入門

1.安裝vue以及搭建第一個vue專案

2.新增頁面和簡單路由攔截

3.資料宣告和繫結使用

4.元件基礎用法

5.元件進階與插槽

6.範例property(重點)



VUE3快速入門

1.建立專案



雲開發uniCloud+uni-app

1.服務空間建立以及部署一個雲函數

2.雲端儲存基礎

3.雲資料庫基礎

4.本機手機號一鍵登入以及第三方登陸

5.練習之整合百度ai影象識別SDK



uni-app小程式開發

專案體驗

1.準備工作

2.選題

3.頁面跳轉以及底部選項

4.前後端編寫,互動,百度影象識別接入

5.再次開發前端

6.部署到伺服器以及小程式上線



vue資料視覺化—整合echarts

1.vue簡單資料視覺化—結合echarts實現柱狀圖



練習一 vue疫情地圖(使用了ehcarts+element)

程式碼未優化 練手專案 如果優化 請每2-4行寫成一個函數 巢狀使用

1.實現世界疫情地圖(點選進入子地圖)

2.疫情大屏資料展示+資料匯出+地圖圖片下載



練習二 爬蟲播放器(vue3)

程式碼未優化 練手專案 如果優化 請每2-4行寫成一個函數 巢狀使用

1.搭建專案

2.尋找qq音樂介面

3.頁面佈局

4.功能實現



練習三 情人節特輯 uni-app+uniCloud

1.送給女朋友的情人節禮物—超貼心小程式

2.七夕到了!不會寫程式碼?一樣可以給女朋友建個網站

3.uniCloud使用雲函數每天定時向女朋友傳送郵件推播天氣

4.uniCloud使用雲開發每天定時向女朋友傳送簡訊



更多

小說閱讀器 超市資料管理系統 會在程式碼優化後再發
爬蟲案例學習平臺應該很快了
專心考研了 文章更新會變慢 非常抱歉

github 倉庫地址 https://github.com/dmhsq

歡迎存取部落格程式碼哈士奇
技術 聊天 交流群 974178910
前端交流群 535620886