Angular2開發(fā)環(huán)境搭建教程之VS Code
前言
VSCode是微軟推出的一款輕量編輯器，采取了和VS相同的UI界面，搭配合適的插件可以優(yōu)化前端開發(fā)的體驗。
布局：左側(cè)是用于展示所要編輯的所有文件和文件夾的文件管理器，依次是`資源管理器`，`搜索`，`GIT`，`調(diào)試`，`插件`，右側(cè)是打開文件的編輯區(qū)域，最多可同時打開三個編輯區(qū)域到側(cè)邊。
底欄：依次是`Git Branch`，`error&warning`，`編碼格式`等。
一、設置開發(fā)環(huán)境Node Js
Angular2開發(fā)環(huán)境主要依賴Node Js和Npm，
需要node 6.9.x和npm 3.x.x 以上的版本 。
查看版本命令使用 node -v和 npm -v.
二 、Angular2或以上版本 使用 Angular CLI命令行工具
可以快速創(chuàng)建項目 、添加文件以及執(zhí)行大堆開發(fā) 任務 ，比如測試、打包和發(fā)布。
然后全局安裝 Angular CLI 。
npm install -g @angular/cli
注：安裝過程可能 會比較慢 ，需要等待幾分鐘。
三、創(chuàng)建新項目
運行下列命令來生成一個新項目以及應用的骨架代碼：
ng new my-app
注 ：第一次安裝過程也比較慢，耐心等待幾分鐘，
四、啟動開發(fā)服務器
進入項目 目錄，并啟動服務器
cd my-app ng serve --open
ng serve命令會啟動開發(fā)服務器，監(jiān)聽文件變化，并在修改這些文件時重新構(gòu)建此應用。
使用--open（或-o）參數(shù)可以自動打開瀏覽器并訪問http://localhost:4200/。
五、在 VS Code中打開項目
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
更多：
相關(guān)文章
這篇文章主要介紹了AngularJS 自定義指令，這里整理了詳細的資料及簡單實例代碼，有需要的小伙伴可以參考下2016-09-09
AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應用
這篇文章主要介紹了AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
本篇文章主要介紹了AngularJs ui-router 路由的簡單介紹。簡單明了的說明了ngRoute和ui-router的區(qū)別和用法，有興趣的可以了解一下2017-04-04
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個插件是要實現(xiàn)一個pdf顯示的功能，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過示例代碼相信更能讓大家理解，有需要的朋友們下面來一起看看吧。2016-09-09
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了淺談angular2路由預加載策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了AngularJS學習第二篇，理解什么是AngularJS依賴注入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了angular表單驗證的相關(guān)知識,angular來驗證可以定義樣式的，下文通過代碼給大家實例介紹下，需要的朋友可以參考下2016-10-10
本篇文章主要介紹了詳解AngularJS2 Http服務，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06