vscode怎么启动angular项目?

VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。

布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`,`GIT`,`调试`,`插件`,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边。

底栏:依次是`Git Branch`,`error&warning`,`编码格式`等。

vscode中启动angular项目的方法如下:

1、 安装插件:

首先我们需要在VSCode中安装Debugger for chrome插件,这个很简单,在扩展面板中输入名称,点击install即可:

1 (2).jpg-600

2、配置启动参数:

在VSCode中,打开调试面板,点击齿轮按钮,VSCode是通过.vscode/launch.json文件来配置管理项目启动的,可以在configurations里面配置多个启动方式,我们这里添加如下代码:

{
        "type": "chrome",
        "request": "launch",
        "name": "启动并打开chrome",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
 }

2.jpg-6003、开始调试

3.jpg-600

口令执行完成,会有显示:Compiled successfully,说明编译成功。

然后在调试面板里面,点击绿色的启动按钮:

4.jpg-600

启动后,chrome浏览器会自动打开,看到如下首页效果:

5.jpg-600

PS:如果想要重启,可以在这个控件上直接点击:

6.jpg-600

以上就是vscode怎么启动angular项目?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Angular.js 答疑