前提准备:

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

  

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

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

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

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

    前提准备: 搭建好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和Docker开发asp.net core和mysql应用

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

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

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

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

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

  7. Visual Studio Code 做PHP开发

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

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

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

  9. 使用 Visual Studio Code 进行远程开发

    使用 Visual Studio Code 进行远程开发 在完成了 AT 指令入门的学习之后,接下来就要使用 AT 指令进行 Socket 通信了.问题在于,之前 .NET 的 Socket 编程只需 ...

随机推荐

  1. [转载] Kafka+Storm+HDFS整合实践

    转载自http://www.tuicool.com/articles/NzyqAn 在基于Hadoop平台的很多应用场景中,我们需要对数据进行离线和实时分析,离线分析可以很容易地借助于Hive来实现统 ...

  2. 【游戏开发】Excel表格批量转换成CSV的小工具

    一.前言 在工作的过程中,我们有时可能会面临将Excel表格转换成CSV格式文件的需求.这尤其在游戏开发中体现的最为明显,策划的数据文档大多是一些Excel表格,且不说这些表格在游戏中读取的速度,但就 ...

  3. 设计模式的征途—7.适配器(Adapter)模式

    在现实生活中,我们的笔记本电脑的工作电压大多数都是20V,而我国的家庭用电是220V,如何让20V的笔记本电脑能够工作在220V的电压下工作?答案:引入一个电源适配器,俗称变压器,有了这个电源适配器, ...

  4. #postman接口测试系列:基本操作总结

    最近项目需要接口测试,所以选择了不少工具对比,最终决定使用postman进行接口测试,这个工具目前使用比较简单,但是有点还是比较多的,如下: 方便切换不同的环境进行接口测试工作,而不用修改变量或代码 ...

  5. AES高级加密标准简析

    1 AES高级加密标准简介 1.1 概述 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区 ...

  6. memcached复制-repcached

    1.前言 由于memcached把数据都放到内存里,因此性能是极高的,正因为如此,不可避免会造成数据丢失,repcached就派上用场了,它可以实现memcached的主从复制 2.安装repcach ...

  7. 使用ThinkPHP的扩展功能

    文件上传类的代码位于“\ThinkPHP\Libabry\Think\Uplod.class.php”,实例化电偶用即可.1:在Home模块Index控制器test方法中实现文件上传功能.打开文件\A ...

  8. 用C语言画一个心

    用C语言图形库画一个心 --环家伟 这次我教大家用代码画一个心,这样你们就可以送给你们的女(男)朋友了.没找到对象的也可以用来表白啊. 1.首先,我去百度找了心形线的函数,如下: 2.  联系高中的数 ...

  9. spring boot + mybatis + hikaricp + swagger2 + jasypt

    好久没写博客了记录下写过的东西,别到时候又忘了 文章前提:前面开发项目的时候数据池一直用的阿里的druid,这个数据池吧也不能说它不好,为什么现在想改成hikaricp数据池呢,完全是实用项目需要.d ...

  10. NNSZ OIers' Blog Archive

    HWL:ssttkkl ,已经搬家到这个地址 NINGLONG:NINGLONG 愤鸟先飞: FNXF Syhien:13355936 ,已经搬家到这个地址 IDE:ThetaS TFW:TFX‘s ...