Angular2環境搭建

来源:http://www.cnblogs.com/SnowBaby/archive/2017/08/03/7281882.html
-Advertisement-
Play Games

01、安裝Node.js 和 npm 安裝完成後,在命令行依次使用node -v 和 npm -v可以看到版本號。 目前安裝的node.js版本為8.2.1 ,npm的版本為5.3.0 02、安裝cnpm npm需要連接谷歌伺服器,國內不能正常使用,因此使用淘寶的鏡像安裝cnpm。命令行輸入npm ...


01、安裝Node.js 和 npm

  安裝完成後,在命令行依次使用node -v 和 npm -v可以看到版本號。

  目前安裝的node.js版本為8.2.1  ,npm的版本為5.3.0

02、安裝cnpm

  npm需要連接谷歌伺服器,國內不能正常使用,因此使用淘寶的鏡像安裝cnpm。命令行輸入npm i -g cnpm --registry=https://registry.npm.taobao.org   

03、安裝Angular CLI

  命令行輸入cnpm i -g @angular/cli。

04、cnpm設置為預設包管理工具

  命令行輸入ng set --global packageManager=cnpm。

05、新建angular2工程

  命令行輸入ng new myApp,在命令行所在目錄創建myApp工程。

06、啟動工程

  命令行進入工程目錄cd myApp,輸入ng serve  即可啟動服務。

  預設的監聽埠為4200,在瀏覽器訪問http://localhost:4200,可看到創建的網頁,

  如果需要更改埠號,可以在啟動的時候設置ng serve --port 3000  這時候訪問的時候就用瀏覽器訪問http://localhost:3000

註意:如果想結束工程服務,可以使用ctrl+c    來選擇是否結束。

  使用ng serve 啟動的好處是,當代碼發生變化時,系統自動重新編譯啟動,並刷新瀏覽器,這樣我們就可以實時的看到更改內容。

07、angular2的代碼編輯官方推薦的是VS Code,自己可以去官網下載,下載後正常安裝就好了。。

      打開VS Code,菜單->文件->打開文件夾->選中myApp文件夾,即可打開編輯myApp工程。

08、在VS Code界面找到index.html可以隨意修改一個標簽內容,這個時候系統會自動編譯刷新,界面會實時顯示。

09、環境搭建就到此為止了,如有任何疑問,請聯繫QQ1006165310。一般晚上9:00後線上。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我們學了這麼多關於函數的知識基本都是自己定義自己使用,那麼我們之前用的一些函數並不是我們自己定義的比如說print(),len(),type()等等,它們是哪來的呢? ...
  • 函數要短。但不是為了短而短,而是為了表達意思,讓讀者看了這個函數而能迅速的把握函數要帶來的信息。盲目的為了短而,並不是初衷,也不是目的。 函數只做一件事。依照單一職責原則(一個類只會因為一個原因改變)設計函數。一個函數要麼進行流程式控制制(即方法裡面先調用A方法,再調用B方法,再調用C方法,依次調用,這... ...
  • 製作.vue模板文件 通過前面的兩篇博文的學習,我們已經建立好了一個項目。問題是,我們還沒有開始製作頁面。下麵,我們要來做頁面了。 我們還是利用 http://cnodejs.org/api 這裡公開的api來做項目。不過本章節不涉及調用介面等內容。這裡,我們假設我們的項目是做倆頁面,一個列表頁面, ...
  • 一、隔了一段時間沒看D3了,好多api又陌生了。武林太大,唯有自強不息。 D3 選擇器算是學習D3的第一步吧。 跟 學習JQ一樣。先熟悉下api,才能夠如魚得水,手到勤來。 二、 選擇器 1.選擇器 2.內容(主要是更改DOM元素的屬性和類名的方法) 3.section.data() ...
  • 前端實現div框邊角的鈍化雖然簡單,但是有時候突然想不到,特此寫下幾句實現方法,以便記憶。 實現div框四個角都鈍角的操作:設置 div : border-radius=10px; 實現div框一個角的鈍角效果 :設置div :border-top-left-radius=10px; border- ...
  • 通過上一篇博文《Vue2+VueRouter2+webpack 構建項目實戰(一):準備工作》,我們已經新建好了一個基於vue+webpack的項目。本篇文章詳細介紹下項目的結構。 項目目錄以及文件結構 如圖所示: 如上圖所示,自動構建的vue項目的結構就是這樣。 src文件夾 如上圖所示,這是sr ...
  • JS遞歸函數(菲波那切數列) 實例解析: 一組數字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; ...
  • 環境準備 首先,要開始工作之前,還是需要把環境搭建好。需要的環境是nodejs+npm,當然現在安裝node都自帶了npm。 在終端下麵輸入命令node -v會有版本號出來。就說明安裝成功了。輸入npm -v也會有版本號出來,就說明,npm也已經安裝好了。 vue-cil構建項目 vue-cil是v ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...