如何快速上手React、Vue前端項目

前言

老大要求瞭解接觸「簡單」（呵呵）的前端開源項目配合進行新項目開發，不免有過「慌的一匹」的感受，正所謂「欲練神功，必先......,額，有本武林祕籍瞅瞅嘛」。沒錯,這篇私人祕籍就是爲那些準備上手常見的前端項目提供招式參考。

問題

1. 新項目到手，如何抓住重點，快速上手？
2. 如何快速瞭解項目中的技術棧？
3. 如何深刻了解項目中的腳手架實現？

核心

• 明確掌握項目中所用到的技術棧
• 瞭解使用對應的npm依賴包

開始瞭解項目

這裏全程以ant-design-pro項目爲例子

1. 查看項目中的README.md文檔

README.md文檔就是該項目的說明文檔，通常放置在項目的根目錄下。在該文檔中每每蘊含着項目構建者對該項目的描述（Introduction，Features，Usage， License...），經過該文檔能夠快速瞭解項目的技術棧，如何構建等重要信息。

2. 查看項目的package.json，肯定項目的技術棧

package.json文件，定義了這個項目所須要的各類npm依賴，以及項目的配置信息。運行npm install 命令會根據這個文件下載對應的npm依賴包。 常見的package.json字段（可對照後面的package.json代碼查看）

1. name字段 項目名稱
2. version字段 項目版本號
3. description字段 項目描述
4. author字段 項目做者
5. scripts字段 指定運行腳本命令的npm。 例如npm run start會執行scripts下的start字段裏面的命令。
6. dependencies字段 指定了項目運行所依賴的模塊以及對應的版本號
7. devDependencies字段 指定項目開發所須要的模塊以及對應的版本號
8. engines字段 規定該模塊運行的平臺
9. browserslist字段 規定項目兼容的瀏覽器平臺

注意：還會有更多其餘的字段，若是須要了解，則直接在google搜索對應額字段則知道該字段的做用。

重點解析：

• scripts字段： 該字段主要做用是指定運行的腳本命令。
  經常使用的腳本命令類型有：

1. 項目在本地運行命令；
2. 項目構建編譯生產須要的文件命令；
3. 測試腳本運行命令；
4. 代碼規範校驗命令。

• dependencies字段、devDependencies字段：該字段可以肯定項目中所用的技術棧，以肯定本身是否熟悉該技術棧（項目中全部所用的npm包都應該知道其做用）。
  常見的技術棧主要有如下幾部分組成：
  （框架）+ （JS編寫語言）+（樣式表預處理器語言）+（UI框架）+（項目構建工具）+ （數據流工具）

常見的技術棧（根據dependencies字段，devDependencies字段肯定項目的技術棧）

• 框架： React、Vue、Angular
• JS編寫語言：TypeScript、ES六、CoffeeScript
• 樣式表預處理器語言：Stylue、LESS、SASS
• UI框架：Antd、Element、Bootstrap...(比較多)
• 項目構建工具：Webpack、Grunt、Gulp eg:

{
  "name": "ant-design-pro",
  "version": "2.2.1",
  "description": "An out-of-box UI solution for enterprise applications",
  "private": true,
  "scripts": {
    "start": "cross-env APP_TYPE=site umi dev",
    "build": "umi build",
    "lint-staged": "lint-staged",
    "test": "umi test",
    "prettier": "node ./scripts/prettier.js"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.1"
  },
  "devDependencies": {
    "@types/react": "^16.8.1"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}
複製代碼

3. 搞清楚項目的目錄結構

若是使用的腳手架爲開源腳手架的話，在github上會找到對應的說明。要判斷該腳手架是否爲開源腳手架，請按照第一二步驟來肯定。

常見的目錄結構

• config 項目的配置文件，常見的配置文件有：構建工具配置文件、環境變量配置文件、路由配置文件、還有其餘的npm包的配置文件
• mock mockJs的文件放置目錄。模擬用戶接口請求的返回數據
• tests 自動化測試腳本文件放置目錄
• src 代碼的源文件目錄
• src > components Vue、React組件封裝目錄
• src > utils 公共文件放置目錄
• src > services ajax接口收口
• src > assets 靜態資源文件目錄

4. 找準項目的入口文件

項目的入口文件的文件名通常爲：main.js、app.js、index.js等。入口文件都放置於src文件夾目錄下（具體應該查看對應的項目構建工具配置）。這個文件通常會引用全局用到的npm依賴包，路由文件，重置樣式文件，全局樣式文件......

注意：有些項目裏面找不到這些入口文件怎麼辦？那就要看看項目中使用的腳手架了，有些腳手架（例如：Nuxt.js）會直接幫你自動生成該文件（這裏就不討論優劣了）。

5. 找到項目的路由文件

路由文件能夠準確的找到哪一個頁面對應着哪一個組件，這個文件在咱們之後寫業務的時候常常會修改到。咱們能夠根據URL上的路由來根據路由文件查找對應的組件文件。路由文件能夠多種多樣，整體來講應該是一個路由對應着一個組件，根據路由能夠找到對應的組件文件進行代碼修改。一樣，本身須要添加頁面時，也須要首先在這個頁面進行路由聲明，才能訪問對應的路由顯示出對應的頁面組件。

注意：有些項目裏面找不到這些路由文件怎麼辦？那就要看看項目中使用的腳手架了，有些腳手架（例如：Nuxt.js）會直接幫你自動生成該文件。

eg:

export default [
  // user
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes: [
      { path: '/user', redirect: '/user/login' },
      { path: '/user/login', component: './User/Login' },
      { path: '/user/register', component: './User/Register' },
      { path: '/user/register-result', component: './User/RegisterResult' },
    ],
  }
]
複製代碼

6. 模仿組件作一個TODO list

入門一個語言最經典的是Hello World.而上手一個項目的最好的應該是作一個todo list了吧。若是能夠寫出對應的todo list的增刪改查，基本上可以在該項目進行基本的業務編寫。

基本步驟：

1. 在頁面文件夾中新建對應的組件；
2. 在路由文件中添加對應的路由（有些腳手架會自動幫你生成，不用本身手動添加）；

總結

進階

做爲一條鹹魚，僅僅是會用該項目中的腳手架來寫項目是遠遠不夠的。應該要了解腳手架的使用，而且要跟着設計者的思路，本身可以打造一個相似的腳手架。接下來會介紹如何打造一個屬於本身的腳手架的基本思路。

鳴謝

最後特別鳴謝barretem對於本博文的討論分析。