雨露均沾系列-開啓前端玩票之旅

最近心有點兒野，腦洞有點大，手有點兒癢，啥玩意兒都想倒騰倒騰，從網絡平臺架構到前端設計，從物聯網架構到終端設計都想看看其中小門道兒。面對如此多誘人之處，亂花叢中過，豈有不雨露均沾之理？那就開始對這些小門道挨個開啓個helloworld之旅。今天先翻前端的牌子。

基本概念介紹

一入前端深似海，亂花漸欲迷人眼。前端要求的是炫酷，是美觀，是交互。那用到的工具也是紛繁複雜，十八般武藝，個個牛逼閃閃。遙想當年網頁製作三劍客，俱往矣，數風流人物還看今朝。前端技術名詞多如牛毛，不釐清怎麼裝逼。裝逼歸裝逼，畢竟咱是菜鳥，那就先僵化的用用這些概念把。先僵化再優化，啥時候優化看歷史發展的進程把。

Node.js

前端啥語言最流行，必然是JavaScript，人稱js，雖然名字有Java，但是和Java一毛錢關係沒有。我叫馬小軍，和馬雲馬化騰毛關係沒有啊。Node.js是讓js運行在服務端的開發平臺，基於Chrome V8引擎開發的（英雄不問出處，管它誰開發的，好用就行）。用js開發前端，看來是非使用Node.js 不可。好嘞，前端工具購物車Node.js裝進來。

npm、 Yarn

npm是js包管理和分發工具。包可是個好東西，很多通用型的東西做成包，在使用的時候引入進來調用，不用自己寫，效果還好，調包俠也是俠，不可小覷。前端技術各種表格圖像特效十八般武器，得有東西裝。npm既然是包管理工具，那就由npm管理起來把。

天下包有千萬種，包包管理工具也有N多種。包包世界裏有LV，也有gucci，也有愛馬仕。這不，yarn也是一個包管理工具，競爭無處不在啊，它facebook發佈的一款取代npm的包管理工具。

正如萬物有陰陽，這包管理工具也有優缺點，對於一個初入包管理領域的小菜鳥來說，我還說不清楚npm和yarn這兩個大牌的道道兒。我是先知道了npm，本着首因效應的影響，把npm裝進咱前端工具購物車。.

React、Vue、Angular

名詞真是多啊，這不又蹦出三個。這三個是JavaScript框架，用於前端UI，通過搞點組件啥的讓前端的應用豐富多彩。我們頁面越來越好看，越來越好用，他們的功勞功不可沒。三個框架都各有特點吧，我們選React作爲開局。

Webpack

webpack 是一個模塊開發工具。它的主要目標是將 JavaScript 文件打包在一起，打包後的文件用於在瀏覽器中使用。我們搞好了前端設計，要看看什麼樣，需要打包運行，而webpack就是這樣一個工具。

小結

從概念介紹就可以看到前端是個花枝招展的姑娘，名詞也太多了。簡單總結一下，我們要設計前端，在js流行的情況下，我們採用js。那麼就需要適用於js的開發平臺，ok，那就是node.js. 前端是豐富多彩的，有很多包能夠達成我們想要的效果，而這些包需要管理工具，如anaconda的包含了很多包的管理工具就更好了，在js的世界裏，我們可以選擇npm、Yarn。有了平臺，有了包管理工具和包，假設前端的時候還需要框架，能讓前端的UI更好用，於是可選React，Vue，Angular，設計好了之後，需要發佈展示，那麼這裏可以採用webpack。

思路理了大概齊。光說不練假把式，下面我們來個前端helloworld吧。

環境配置

安裝 Node.js，npm

node.js的鏈接https://nodejs.org/en/，下載，windows下像安裝其他軟件一樣一路安裝。下載node完成後，npm也會自行下載完成。通過cmd執行 node -v 和 npm -v 查看是否下載成功和下載成功後的版本號。
注意：國內用戶安裝好的npm的源默認是國外的源，會因爲網絡原因導致執行npm操作有延時，我們可以切換npm的源爲淘寶的源鏡像。 執行 npm config set registry https://registry.npm.taobao.org。切換完成後，可通過 npm config get registry 查看。

HelloWorld

1. 構建一個react項目。這裏有兩個方法。

• 第一個方法是根據react官網。步驟如下： . npx create-react-app my-app
  就創建了my-app的文件夾，也就是我們的項目文件夾。第一行的 npx 不是拼寫錯誤 —— 它是 npm 5.2+ 附帶的 package 運行工具。

• 第二個方法是用npm一步步創建。
  npm install -g create-react-app安裝 create-react-app
  create-react-app my-app 創建了my-app項目文件夾。

2. 進入到my-app文件夾。我們看到的文件結構如下：
   node_modules： 這裏麪包含了react項目中會用到的一些組件 。
   src：裏面包含了一些我們自己使用的js文件，css文件，img文件等等
   manifest.json：清單配置文件，聲明瞭項目的名稱圖標以及入口
   package.json: 包的清單文件，這裏面聲明的包會通過npm下載到node_modules中

3. 啓動項目 npm start
   如果不出意外的話，程序會開啓一個服務監聽3000端口，並且打開默認瀏覽器，你會看到一下界面，說明項目已經成功運行。 npm start是開發者模式，如果要部署生產環境中的話，需要bulid，參見官網。
   

參考資料：
react官網
https://www.jianshu.com/p/b28b5d913b97
https://blog.csdn.net/Code_XiaoLu/article/details/80831969?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task