標籤：

大前端開發環境搭建

06-06
大前端開發環境搭建

來自專欄程序員進階之道

一 操作系統

操作系統主要是為其他開發使用到的應用軟體(例如Visual Studio Code)提供運行平台，以及管理硬體(CPU,內存)資源。

Windows平台可以使用魯大師查看計算機硬體信息

目前主流的桌面級操作系統及其對應最新版本是Windows10 pro 1803,macOS10.13.4，目前國內絕大多數開發人員都採用Windows7作為開發平台，Windows可以用來開發絕大多數運行在Windows和Linux上的應用(前提條件是該應用可以跨平台運行)以及各種運行在PC端的遊戲。

而少數一線互聯網公司使用macOS作為開發平台，因為絕大多數服務端的應用都運行在類Unix的機器之上，而macOS是Unix修改而來的,主要用來開發運行在iPhone,iPad,Mac(MacBook,MacBookPro,iMac,iMac Pro)和Apple Watch應用。

二 編輯器

2.1 概述

目前業界比較受歡迎的編輯器包括Sublime Text,Visual Studio Code,Atom，它們都支持主流的桌面系統,例如Windows10 Pro,macOS10.13,Ubuntu18.04。各位開發的同學可以根據各自喜好選擇它們來編寫網頁程序。綜合考慮，這裡決定在學習HTML5+CSS3+JavaScript時使用Visual Studio Code，而在前端綜合項目時使用WebStorm作為主力開發工具。

2.2 Visual Studio Code介紹

Visual Studio Code是微軟開發的一款輕量級但是功能強大的編輯器，可以用於Windows,Linux,macOS，對JavaScript,TypeScript和Node.js提供了良好的原生支持，並且支持插件擴展後支持Java,Python,PHP,Go等等。

2.3 Visual Studio Code 官方資源

官網:https://code.visualstudio.com

下載地址:code.visualstudio.com/D

源碼:github.com/Microsoft/vs

文檔:code.visualstudio.com/d

關於Visual Studio Code的具體使用，可以參考這裡列出的文檔地址，因為官方文檔是英文，如果開發的同學英文閱讀水平比較弱，可以藉助Chrome瀏覽器的谷歌翻譯插件來翻譯文檔(需要科學上網)。

2.4 Visual Studio Code集成GitHub

1.首先得去GitHub 註冊個賬號，然後創一個名為web的倉庫。

2.然後下載並安裝Git客戶端，安裝完成之後可以使用右鍵菜單Git Bash Here打開一個終端控制台輸入命令。

然後配置全局的用戶名和郵箱，命令如下

git config --global user.name "ittimeline"git config --global user.email "ittimelinedotnet@gmail.com"

再使用ssh-keygen命令生成SSH公鑰，並將生成的公鑰文件(C:Users${user.name}.sshid_rsa.pub)內容複製到GitHub賬號對應的SSH key中，鏈接地址為https://github.com/settings/ssh/new 。這樣避免每次push時需要輸入賬號密碼。

3.進入本地目錄(例如D:/workspace/),然後使用右鍵菜單 Git Bash Here,輸入如下命令將項目克隆到本地

git clone https://github.com/ittimeline/web.git

4.啟動Visual Studio Code，通過快捷鍵Ctrl+k,Ctrl+o打開D:/workspace/web目錄,然後選中WEB目錄，點擊 右邊的新建文件，創建一個index.html文件，通過Visual Studio Code內置的html:5快捷鍵快速生成HTML5模板額，並修改標題和添加主體內容，完整代碼如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Web Page</title></head><body> <p>這是我的第一個網頁</p></body></html>

5.使用快捷鍵Ctrl+Shift+G切換到源代碼管理後，點擊提交按鈕，如下圖所示!

然後輸入提交說明 「這是我的第一個網頁」

最後點擊如圖所示的最右上角的「更多」，點擊」推送「後便可推送到遠程，

使用Chrome訪問遠程倉庫地址，會看到文件已經正確提交到了遠程倉庫中。

三 瀏覽器

3.1 瀏覽器概述

瀏覽器是用戶用來瀏覽網頁的應用軟體，目前世界上主流的瀏覽器有Chrome,Firefox,IE10+,Microsoft Edge,Safari(主要是masOS，IOS平台默認的瀏覽器),Opera等等，其中Chrome以快速、安全且免費等諸多特性在全世界的PC端瀏覽器市場份額佔據60%以上。

國內的瀏覽器市場份額可以使用IE11訪問tongji.baidu.com/data/b 獲取瀏覽器的市場份額。

不同的瀏覽器內核是不相同的，因此會存在同一個網頁在不同的瀏覽器下會有不同的顯示效果，各個瀏覽器及其對應關係如下所示

瀏覽器內核主要由渲染引擎和JavaScript引擎組成。

  • 渲染引擎負責獲取網頁的內容(圖片、文字、音頻、視頻等等)，整理訊息(例如加入CSS等)以及計算網頁的顯示方式，然後會輸出至瀏覽器窗口，瀏覽器的內核不同對於網頁的語法解釋會有不同，所以渲染的效果也會不相同。
  • JavaScript引擎*是負責解析JavaScript語言來實現網頁的動態效果以及和服務端交互。

移動端瀏覽器內核指的是內置瀏覽器，絕大多數(Android,IOS)內核都是基於Webkit。

3.2 Chrome開發者工具

Chrome開發者工具是一套內置在Google Chrome中的Web開發和調試工具，可以用來對網站進行迭代、調試和分析。

谷歌官方對Chrome開發者工具的使用提供了詳細的文檔，可以訪問地址:https://developers.google.com/web/tools/chrome-devtools/ 來獲取更詳細的使用說明(同樣需要科學上網)。

四 伺服器

目前主流的Web伺服器包括Apache和Nginx,目前計劃在開發環境使用Apache，而在後期部署應用到伺服器時採用Nginx。

4.1 Windows搭建Apache伺服器

4.1.1 下載Apache伺服器

Apache伺服器下載地址:apachelounge.com/downlo ,可以根據自己的操作系統版本(32位或者64位)下載對應的Apache版本，下載完成後解壓Apache24目錄到C盤(即C:Apache)

4.1.2 安裝Apache伺服器

首先我們需要將Apache伺服器的bin目錄(C:Apache24in)添加到系統的Path環境變數中,這樣就可以方便的使用httpd.exe來安裝Apache服務。

然後以管理員身份運行windows命令提示符(俗稱控制台)，輸入如下命令安裝Apache24服務

httpd.exe -k install -n "Apache24"

命令執行完成之後，在windows命令提示符輸入services.msc，會發現多了一個名為Apache24的服務。這樣Apache就在Windows上安裝成功了。

如果你想卸載Apache服務，可以使用如下命令

httpd.exe -k uninstall -n "Apache24"

4.1.3 配置Apache伺服器

Apache的配置文件位於目錄C:Apache24config下的httpd.config文件，該配置文件可以修改ServiceName(域名+埠),DocumentRoot也就是網站的根目錄和Listen(監聽埠)等配置信息。

這裡修改下位於248行的DocumentRoot和249行的Directory值為「D:/workspace/web」，

然後使用如下命令便可啟動伺服器

net start Apache24

通常是修改伺服器配置之後會停止伺服器，可以使用如下命令停止，然後再啟動

net stop Apache24net start Apache24

4.14 訪問伺服器的資源

在啟動Apache後，在瀏覽器地址欄中輸入127.0.0.1並回車後，會看到如下效果

五 常用軟體推薦

這裡介紹下Windows平台下開發人員常用到的應用軟體


推薦閱讀：

※我的前端成長回顧
※前端日刊-2018.01.25
※Chrome上使用PWA
※前端開發負責人修鍊指北
※「前端」webp圖片適配流量優化

TAG:前端工程師 | Web開發 | 前端開發 |