有關Angular2開發環境搭建（詳細教學）

不久前WebStorm的頻繁卡死終於讓我受不鳥了,我決定換個輕量級的編輯器，嘗試了Emacs、Sublime text,最後選擇了vscode。以下這篇文章主要跟大家介紹了Angular2開發環境搭建教學之VS Code的相關資料，需要的朋友可以參考下。

前言

VSCode是微軟推出的一款輕量級編輯器，採取了和VS相同的UI介面，搭配合適的插件可以優化前端開發的體驗。

佈局：左側是用來展示所要編輯的所有檔案和資料夾的檔案管理器，依序是`資源管理器`，`搜尋`，`GIT`，`偵錯`，`外掛程式` ，右側是開啟檔案的編輯區域，最多可同時開啟三個編輯區域到側邊。

底欄：依序是`Git Branch`，`error&warning`，`編碼格式`等。

一、設定開發環境Node  Js

Angular2開發環境主要依賴Node Js和Npm，

需要node 6.9 .x和npm  3.x.x 以上的版本。

查看版本指令使用  node -v和  npm -v.

#二、Angular2或上述版本使用Angular  CLI命令列工具

可以快速建立專案、新增檔案以及執行大堆開發任務，例如測試、打包和發布。

然後全域安裝 Angular CLI 。

npm install -g @angular/cli

註：安裝過程可能 會比較慢 ，需要等待幾分鐘。

三、建立新專案

#執行下列指令來產生一個新專案以及應用的骨架程式碼：

ng new my-app

附註：第一次安裝過程也比較慢，耐心等待幾分鐘，

##四、啟動開發伺服器

進入專案目錄，並啟動伺服器 

cd my-app
ng serve --open

ng serve指令會啟動開發伺服器，監聽文件變化，並在修改這些文件時重新建構此應用。

使用

--open（或-o）參數可以自動開啟瀏覽器並存取http://localhost:4200/。

五、在VS Code中開啟專案

##上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JS中如何實現浮動碰撞

在JS中如何控制滑鼠拒絕點擊按鈕

使用JS如何取得目前時間差

在js中如何對url實作物件化管理

在JavaScript中如何使用Generator的方法

#

以上是有關Angular2開發環境搭建（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！