前提准备:

  搭建好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官方文档

  

Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装的更多相关文章

  1. 新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows)

    原文出处:新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows) 这是我的文章备份  http://www.dotblogs.com.tw/ ...

  2. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  3. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  4. 基于Visual Studio Code搭建Golang开发调试环境【非转载】

    由于对Docker+kubernetes的使用及持续关注,要理解这个平台的原理,势必需要对golang有一定的理解,基于此开始利用业余时间学习go,基础语法看完之后,搭建开发环境肯定是第一步,虽然能g ...

  5. Visual Studio Code和Docker开发asp.net core和mysql应用

    Visual Studio Code和Docker开发asp.net core和mysql应用 .net猿遇到了小鲸鱼,觉得越来越兴奋.本来.net猿只是在透过家里那田子窗看外面的世界,但是看着海峡对 ...

  6. Windows下visual studio code搭建golang开发环境

    Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...

  7. Visual Studio Code配置GoLang开发环境

    Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...

  8. Visual Studio Code 做PHP开发

    Visual Studio Code 做PHP开发 1. 在Windows 10环境下安装PHP: 1. 下载自己中意的PHP版本:http://windows.php.net/download (我 ...

  9. Visual Studio Code配置 HTML 开发环境

    Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...

随机推荐

  1. CSS选择器(二)

    五.属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title ...

  2. Kattis - fairdivision 【贪心】

    题意 有一堆人 要给他们的朋友 买一个生日礼物,然后 每个人 给出自己的最大负担额度 并且给出礼物总价 然后要给出一种解决方案 尽量让 所有人的支出都接近平均,如果实在无法平均,那就让 先来的人 多处 ...

  3. iOS:学习runtime的理解和心得 (转)

    Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门语言所必需理解的东西.最近在学习Runtime,有自己的一些心得,整理如下, 一为 查阅方便 二为 或许能给他人一些启发, 三为 希 ...

  4. Linux平台下贪吃蛇游戏的运行

    1.参考资料说明: 这是一个在Linux系统下实现的简单的贪吃蛇游戏,同学找帮忙,我就直接在Red Hat中调试了一下,参考的是百度文库中"maosuhan"仁兄的文章,结合自己的 ...

  5. ps 切片 蓝色 灰色 小标志 什么意思

    切片颜色 区分自动切片与用户切片和基于图层的切片.默认情况下,用户切片和基于图层的切片带蓝色标记,而自动切片带灰色标记.-----用户切片就是你需要的切片,其他区域会形成自动切片,可以视为自己不要的, ...

  6. ubantu删除文件(夹)

    格式:rm -rf 目录名字 -r 就是向下递归,不管有多少级目录,一并删除 -f 就是直接强行删除,不作任何提示的意思 名称 rm - 移除文件或者目录 概述 rm [选项]... 文件列表... ...

  7. Linux课程---2、Linux下最常用命令(查看帮助命令)

    Linux课程---2.Linux下最常用命令(查看帮助命令) 一.总结 一句话总结: man 1.显示文件? ls:ls带其它参数详情可以man ls man ls:比如 ls -a显示隐藏文件,l ...

  8. TXLSReadWriteII2版本导出Excel文件:

    //TXLSReadWriteII2版本导出Excel文件: procedure TForm1.N1Click(Sender: TObject); var i: Integer; aSaveDialo ...

  9. GridView设置多个DatakeyNames

    1.aspx页面GridView直接绑定DataKeyNames aspx设置: <asp:GridView ID="grvGrid" runat="server& ...

  10. 六 Django框架,models.py模块,数据库操作——链表结构,一对多、一对一、多对多

    链表操作 链表,就是一张表的外键字段,连接另外一张表的主键字段 一对多 models.ForeignKey()外键字段一对多,值是要外键的表类 from __future__ import unico ...