《Oli-Zhao的前端一萬小時》之：工欲善其事，必先利其器——軟體安裝、環境搭建

本知識學慣用時：1.5小時，總第3.5/10000小時

前言：在上一篇《Oli-Zhao的前端一萬小時》之：初次接觸前端，我們要理解哪些名詞？中，我們了解了初識前端應該掌握的名詞、概念，其中也涉及了很多需要我們安裝的軟體、配置的環境等知識要點。

本篇我們並不會機械的走一遍安裝的流程，因為只要你學會了「科學的上網」，那麼安裝軟體僅僅是：打開相應軟體的官網→DOWNLOAD→一直「下一步」（國外的軟體一般比較良心，不會出現其他捆綁安裝等）。

本篇的重點是：跟著行文順序，你我都動起手來，借安裝軟體的機會，熟悉新的瀏覽器、新的搜索方式以及最直觀的先看看我們接下來會時時用到的這些偉大的、可愛的工具們。

（閱讀過程中，遇生疏的名詞，請翻閱上一篇的相關解釋，本篇不作贅述）

一、科學的上網

學習前端過程中，最基本和經常的操作就是：搜索和檢查。

1. 搜索：

· 工具：Chrome瀏覽器

- 官網、或百度搜索安裝；

· 讓Chrome瀏覽器可以登錄國外網站（特別重要的一步）

- 敏感操作，請自行操作;

- 檢驗標準：能登錄YouTube

2. 檢查：

後邊無論學HTML、CSS、JS還是Ajax等，這個檢查的動作都是最經常用到的動作。

• 在瀏覽器中的任何網頁上，滑鼠右鍵，然後彈出的選項中選則「檢查」；

• 會出現我們本頁面的相關代碼——DOM樹（Document Object Model 文檔對象模型）；

- 我們通過JS操作頁面的元素，進行添加、移動、改變或移除的方法和屬性，都是DOM 提供的；

• 通過點擊代碼框左上角圖標，可以實時查看網頁內任意模塊對應的代碼（滑鼠放在任意地方，代碼框里就會顯示與之對應的代碼）；

• 按建盤上Esc鍵，或直接點擊代碼框的Console，就可以打開Console;

- 作用：用於調試JS的；

- 比如：一個樣式沒有出來，那麼代碼框與之對應的代碼會報錯，可以讓我們知道錯在哪裡。

二、Git的安裝

1. 安裝方式：谷歌搜索安裝（點擊DOWNLOAD後，直接下一步）——註：macOS系統在安裝了Xcode後會自帶Git；
2. 安裝後，裡邊會相應附帶有Git Bash;
3. 注意事項：針對windows用戶，Git最好直接安裝在C盤。因為windows下這些軟體總會出現些莫名的小問題，直接安裝在C盤會支持的相對好一些。
4. 安裝好後,可以打開Git Bash客戶端（蘋果電腦用戶打開自有終端），初次使用需要輸入相關命令行（先照做，後邊文章會具體談到）：

git config --global user.name xxx →方便產品經理找你（xxx是輸入我們自己的用戶名）git config --global user.email yyy →方便產品經理找你（yyy是輸入你的郵箱）git config --global push.default simple git config --global core.quotepath false →防止文件名變成數字git config --global core.editor "vim" →使用vim編輯提交信息

5. （針對windows用戶）設置一下Git Bash客戶端的外觀：

• 將操作界面設置成透明，方便操作、觀察變化；

• 將界面滾動條設置在右側；

• 設置編碼方式；

三、Node.js安裝

1. 安裝方式：谷歌搜索安裝（點擊DOWNLOAD後，直接下一步）；
2. 下載安裝Node.js後，其附帶了npm；
3. 注意事項：針對windows用戶，Node.js最好直接安裝在C盤。因為windows下這些軟體總會出現些莫名的小問題，直接安裝在C盤會支持的相對好一些。
4. 裝了 Node.js 之後我們就可以在 Git Bash 裡面使用 node 和 npm 這兩個命令了，打開Git Bash試試看：

• 查看node 和 npm 在電腦的哪個位置：

which nodewhich npm

• 查看node 和 npm 的版本號：

node -vnpm -v或node --versionnpm --version

• 試著用npm做一個命令行的翻譯工具（這個小工具的名字叫做 fanyi）：

npm i -g fanyi

載入完成後，輸入：

fanyi hello

相關中文解釋就會出來，還會給你發音哦。

??注意：

-- 如果遇到以下「許可權問題」：

-- 請如下操作：（參考：處理npm許可權問題）

• 試著用node做個算數：

node

回車後便進入了node運行環境，這時候我們就可以用node寫JS了：

1+2

四、編輯器的安裝

1. 安裝方式：谷歌搜索安裝（點擊DOWNLOAD後，直接下一步）；
2. 任選其一，個人比較傾向於webstorm;
3. 初學的前半個月，個人強烈建議用記事本/文本編輯器 把代碼一個個敲出來，熟悉基本結構；
4. 針對代碼編輯器，會引入一個名詞： Emmet語法 。目前所有的前端編輯器都支持 Emmet。提高代碼錄入效率。

後記：以上就是最基本的安裝和配置，至於具體使用，初期不用深挖，隨著學習的深入，帶著疑問去尋找答案是最好的學習方式。我們上邊已經初試了牛刀，不得不佩服，這些工具之強大，我們該感到慶幸，慶幸置身在了這個年代，有這麼多的資源，我們肯定能把前端搞定。學無止境，它值得你我用後邊的10000小時來對待。

歡迎繼續關注下文 ：

《Oli-Zhao的前端一萬小時》之：做一次山大王，讓你的操作系統乖得像個小綿羊——命令行入門

（本文版權歸Oliver所有，轉載需說明來源）