腳手架搭建項目
1. 認識腳手架工具
- 1.1. 前端工程的復雜化
- 1.1.1. 如果只是開發幾個小的demo程序，那么永遠不要考慮一些復雜的問題：
- 比如目錄結構如何組織劃分；
- 比如如何關鍵文件之間的相互依賴；
- 比如管理第三方模塊的依賴；
- 比如項目發布前如何壓縮、打包項目；
- 等等…
- 1.1.2. 現在的前端項目已經越來越復雜：
- 不會在是HTML中引入幾個css文件，引入幾個編寫的js文件或者第三方的js文件這么簡單；
- 比如css可能是使用less、sass等預處理器編寫，需要將它們轉換成普通的css才能被瀏覽器解析
- 比如Javascript代碼不再只是編寫幾個文件中，而是通過模塊化，被組成在成敗上千個文件中，需要通過模塊化來管理它們之間的相互依賴；
- 比如項目需要依賴很多的第三方那個庫，如何更好的管理它們(比如管理它們的依賴，版本升級等)
- 1.1.3. 為了解決上面這些問題，需要學習一下工具；
- 比如babel、webpack、gulp,配置它們轉規則、打包依賴、熱更新等等內容；
- 腳手架的出現，就是幫助解決這一系列的問題的
- 1.1.1. 如果只是開發幾個小的demo程序，那么永遠不要考慮一些復雜的問題：
- 1.2. 腳手架是什么？
- 1.2.1. 傳統的腳手架指的是建筑學的一種結構： 在搭建樓房、建筑物時，臨時搭建出來的一個框架；
- 1.2.2. 編程中提到的腳手架(scaffold), 其實是一種工具，可以快速生成項目的工程化結構；
- 每個項目做出完成的效果不同，但是它們的基本工程化結構是相似的；
- 既然相似， 就沒有必要每次都從零開始搭建，完全可以使用一些工具，幫助生成基本的工程化模塊；
- 不同的項目，在這個模塊的基礎之上進行項目的開發或者進行一些配置的簡單修改即可；
- 這樣也可以間接保證項目的基本結構一致性，方便后期維護；
- 1.2.3. 總結：腳手架讓項目從搭建到開發，再到部署，整個流程變得快速和便捷；
- 1.3. 前端腳手架
- 1.3.1. 對于現在比較流行的三大框架都有屬于自己的腳手架：
- React的腳手架：
create-react-app - Vue的腳手架：
@vue/cli - Angular的腳手架：
@angular/cli
- React的腳手架：
- 1.3.2. 它們的作用都是幫助我們生成一個通用的目錄結構，并且已經將所需的工程環境配置好了。
- 1.3.3. 使用這些腳手架需要依賴什么？
- 目前這些腳手架都是node編寫的，并且都是基于webpack的；
- 所以必須在電腦上安裝node環境
- 1.3.4. 主要是學習React, 所以以React的腳手架工具：
create-react-app為例 - 1.3.5. React腳手架本身需要依賴node, 所以需要安裝node環境；
- 查看node版本，
node --version
- 查看node版本，
- 1.3.1. 對于現在比較流行的三大框架都有屬于自己的腳手架：
2. react-react-app
- 2.1. 安裝create-react-app
-
npm install create-react-app -g
-
create-react-app --version
-
2.2. 創建react項目
-
2.2.1. 創建React項目的命令如下
create-react-app 項目名稱- 注意：項目名稱不能包含大寫字母
- 另外還有更多創建項目的方式，可以參考github的readme文檔(
npx create-react-app my-app\npm init react-app my-app)
-
2.2.2. 創建項目成功后，進入項目目錄，就可以將項目運行起來：
cd 02_learn_scaffoldnpm run start / npm start
-
2.2.3 目錄結構分析
- 2.2.3.1. 目錄結構介紹
my-app
├── README.md // 項目說明文件
├── node_modules // 存放第三方依賴包
├── package-lock.json // 記錄項目相關包依賴真實版本信息
├── package.json // 記錄項目相關包依賴信息
├── .gitignore // git忽略文件
├── public // 存放靜態資源文件
│ ├── favicon.ico // 項目網站圖標
│ ├── index.html // 項目入口模板文件
│ └── manifest.json // 和Web App配置相關 (pwa應用可以把網站添加到桌面圖標，就像手機上安裝其他的app應用一樣，它作用就是想要像app一樣擁有一些東西的配置文件)
│ └── robots.txt // 爬蟲的配置文件，用來告訴別人那些東西可以爬取，哪些不能爬取
└── src // 存放源代碼
├── App.css // App組件相關的樣式
├── App.js // App組件的代碼文件
├── App.test.js // App組件的測試代碼文件
├── index.css // 全局的樣式文件
├── index.js // 整個應用程序的入口文件
├── logo.svg // 剛啟動項目看到的React圖標
└── serviceWorker.js // 離線緩存配置文件
└── reportWebVitals.js // 網頁性能監測相關的文件
└── setupTests.js // 自動執行的測試配置文件
- 2.2.3.1. 目錄結構介紹
-
2.2.3.2. package-lock.json文件中的react依賴依賴
-
"react": {"version": "19.1.1", // 版本號"resolved": "https://registry.npmmirror.com/react/-/react-19.1.1.tgz", // 倉庫地址"integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", //查找本地緩存，如果本地有緩存，則不會從服務器下載，直接解包本地緩存里面的東西就可以了"requires": { // 依賴另外的包...}}
-
-
2.2.3.3. 了解PWA
-
- 整個目錄結構都非常好理解，只是有一個PWA相關的概念；
- 1.1. PWA的全稱是
Progressive Web App，即漸進式Web應用； - 1.2.
一個PWA應用首先是一個網頁，可以通過web技術(React/Vue等等)編寫出一個網頁應用； - 1.3. 隨后添加上
App Manifest和Service Worker來實現PWA的安裝和離線等功能；- App Manifest文件：
- 相當于間接的把一個網站變成了一個像APP一樣的一個東西的配置文件，變成了一個桌面圖標，一點擊桌面圖標可以直接打開網站，這個就是PWA想要做的一個事情；
- 如果想要做一個PWA應用，它就必須要求有個Manifest文件
- Manifest文件就是關于網站想要像App一樣擁有一些東西的配置文件
-
{"short_name": "React App", // 桌面圖標名稱"name": "Create React App Sample", // 完整名稱"icons": [ // 圖標{"src": "favicon.ico","sizes": "64x64 32x32 24x24 16x16","type": "image/x-icon"},{"src": "logo192.png","type": "image/png","sizes": "192x192"},{"src": "logo512.png","type": "image/png","sizes": "512x512"}],"start_url": ".", // 指定應用啟動URL"display": "standalone", // 指定應用顯示模式, standalone: 表示應用以獨立應用程序的形式運行，不顯示瀏覽器的地址欄、工具欄等UI元素，提供類似原生應用的用戶體驗。"theme_color": "#000000", // 指定應用主題色"background_color": "#ffffff" // 背景色}
- App Manifest文件：
- 1.4. 這種web存在的形式，我們也稱之為
Web App；
-
PWA解決那些問題：
- 2.1. 可以添加至主屏幕，點擊主屏幕圖標可以實現啟動動畫以及隱藏地址欄；
- 2.2. 實現離線緩存工鞥男，即使用戶手機沒有網絡，依然可以使用一些離線功能；
- 2.3. 實現了消息推送；
- 2.4. 等等一系列類似于
Native App相關的功能；
-
- 更多PWA相關的知識，可以參考MDN文檔
- 3.1. 地址：
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
 詳細解釋，使用 PyTorch代碼示例說明)
)
