Angular2開發(fā)環(huán)境搭建教程之VS Code
前言
VSCode是微軟推出的一款輕量編輯器，采取了和VS相同的UI界面，搭配合適的插件可以優(yōu)化前端開發(fā)的體驗。
布局：左側(cè)是用于展示所要編輯的所有文件和文件夾的文件管理器，依次是`資源管理器`，`搜索`，`GIT`，`調(diào)試`，`插件`，右側(cè)是打開文件的編輯區(qū)域，最多可同時打開三個編輯區(qū)域到側(cè)邊。
底欄：依次是`Git Branch`，`error&warning`，`編碼格式`等。
一、設(shè)置開發(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ā) 任務(wù) ，比如測試、打包和發(fā)布。
然后全局安裝 Angular CLI 。
npm install -g @angular/cli
注：安裝過程可能 會比較慢 ，需要等待幾分鐘。
三、創(chuàng)建新項目
運行下列命令來生成一個新項目以及應(yīng)用的骨架代碼：
ng new my-app
注 ：第一次安裝過程也比較慢，耐心等待幾分鐘，
四、啟動開發(fā)服務(wù)器
進入項目 目錄，并啟動服務(wù)器
cd my-app ng serve --open
ng serve命令會啟動開發(fā)服務(wù)器，監(jiān)聽文件變化，并在修改這些文件時重新構(gòu)建此應(yīng)用。
使用--open（或-o）參數(shù)可以自動打開瀏覽器并訪問http://localhost:4200/。
五、在 VS Code中打開項目
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
更多：
相關(guān)文章
Angular實現(xiàn)圖片裁剪工具ngImgCrop實踐
本篇文章主要介紹了Angular實現(xiàn)圖片裁剪工具ngImgCrop實踐，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)注冊表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本文主要對支持Angular2的表格控件進行詳細介紹。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細的介紹和示例代碼，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下2017-11-11
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用詳解
這篇文章主要給大家介紹了如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用@angular/cli V6.0具有一定的參考學習價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了AngularJS 仿微信圖片手勢縮放的實例的相關(guān)資料,希望大家通過本文實現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
Angular2中如何使用ngx-translate進行國際化
本篇文章主要介紹了Angular2中使用ngx-translate進行國際化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案
這篇文章主要介紹了詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07