Angular14 Visual Studio Code做爲Angular開發工具經常使用插件安裝、json-server安裝與使用、angular/cli安裝失敗問題、emmet安裝

前提準備：

　　搭建好Angular開發環境

 

1 安裝Visual Studio Code

　　教程簡單，不會的去問度娘

 

2 安裝Chrome瀏覽器

　　教程簡單，不會的趣聞度娘

 

3 Visual Studio Code須要安裝的插件

　　3.1 Debugger for Chrome

　　　　用於直接在谷歌瀏覽器中調試Angular應用

　　　　

　　3.2 Angular5 Snippets

　　　　代碼生成插件，主要用於在VSCode中快速生成代碼

　　　　

 

4 Chrome須要安裝的插件

　　4.1 Augury插件

　　　　用於在谷歌瀏覽器中查看Angular應用的相關信息

　　　　4.1.1 進入到谷歌插件安裝網頁

　　　　　　點擊前往

　　　　　　

　　　　4.1.2 輸入augury插件的ID

　　　　　　augury插件ID    elgalmkoelokbchhkhacckoklkejnhcd

　　　　　　資源：點擊下載

 　　　　4.1.3 安裝下載好的augury插件

　　　　　　直接將下載好的插件拖到擴展程序便可

　　　　4.1.4 參考博客：點擊前往

5 json-server安裝與使用

　　json-server是一個能夠模擬後臺json數據的工具至關於wireMock

　　json-server 支持get post delete put操做，並且能夠自動生成id

　　json-server教程：點擊前往

　　5.1 安裝

　　　　npm install -g json-server

　　　　

 

　　5.2 使用

　　　　5.2.1 建立一個json文件

{
    "users": [
        {
            "name": "wys",
            "id": "1234qasdfasdf",
            "pwd": "333"
        },
        {
            "name": "wyc",
            "id": "asdfasdfq1234",
            "pwd": "222"
        }
    ]
}

　　　　5.2.2 在json文件所在目錄執行

　　　　　　json-server json文件

　　　　　　

　　　　5.2.3 在瀏覽器中訪問 http://127.0.0.1:3000/ 來查看API信息

　　　　　　

　　　　　　GET請求：

　　　　　　　　

　　　　　　Post請求：

　　　　　　　　

　　　　　　　　

6 安裝angular/cli出現錯誤解決辦法

    執行 npm uninstall -g @angular/cli  卸載
    執行 npm cache clean 清除緩存
    執行 npm install -g @angular/cli 從新安裝

 

7 Emmet安裝與使用

　　emmet能夠幫助前端開發者快速書寫HTML代碼

　　7.1 安裝

　　　　搜索 emmet 選擇安裝便可

　　　　

 　　7.2 使用

　　　　div>p>span  而後按 Tab 鍵便可

　　　　詳情參見：emmet官方文檔