欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用 IDEA从github上拉取Angular项目并且部署运行

程序员文章站 2022-06-28 18:00:42
通过idea上的VCS从github上cloneAngular项目由于公司编写Angular项目使用的工具是vs Code,但是觉得idea真的很强大,也很好用,加上最近有小伙伴讨论怎么用idea部署并运行Angular项目,经过资料查阅和亲自实践,在idea上把项目跑起来了,下面是一些总结,希望能帮到更多像我一样初入Angular世界的小伙伴们。准备工具:IntelliJ IDEA(我的是2018版的),Git(没有的需要先安装一下哦,这里是官网地址:Git官......

                   通过idea上的VCS从github上cloneAngular项目

由于公司编写Angular项目使用的工具是vs Code,但是觉得idea真的很强大,也很好用,加上最近有小伙伴讨论怎么用idea部署并运行Angular项目,经过资料查阅和亲自实践,在idea上把项目跑起来了,下面是一些总结,希望能帮到更多像我一样初入Angular世界的小伙伴们。

  1. 准备工具:IntelliJ IDEA(我的是2018版的),Git(没有的需要先安装一下哦,这里是官网地址:Git官网
  2. 步骤:

(1)打开idea软件,配置github账号,用于从github上down下项目文件。

首先,点击 File -> Setting,进入设置窗口

使用 IDEA从github上拉取Angular项目并且部署运行

     (2) 选择Version Control -> GitHub,在弹出的窗口中填写你的github账号和密码,并点击 Test 按钮,测试你的github账号是否配置成功

使用 IDEA从github上拉取Angular项目并且部署运行

使用 IDEA从github上拉取Angular项目并且部署运行

    (3) 点击 OK 。账号配置成功之后,就可以从github上远程拉取你的Angular项目啦。

   回到主页面去,在工具栏中点击 VCS -> Checkout from Version Control -> Git 

使用 IDEA从github上拉取Angular项目并且部署运行

    (4) 在弹出来的窗口中输入github上的需要导出的项目地址

使用 IDEA从github上拉取Angular项目并且部署运行

  这个地址需要是http访问链接,如果输入的是SSH链接的话,是需要再次输入账号和密码的,为了简便,这里使用http访问链接

使用 IDEA从github上拉取Angular项目并且部署运行

   (5) 之后就是静待项目的下载啦。

    (6)下载完成之后,修改 angular 默认端口号。找到  package.json 文件,打开它,找到代码段如下:

"start": "ng serve --port=4200",

   Angular项目的默认端口号是  http://localhost:4200/,但是在这里可以修改为任意的空闲端口号,这里我为了方便展示,依然修改成4200, 使用语句  

ng serve --port=4200   

使用 IDEA从github上拉取Angular项目并且部署运行

  或者使用语句  "set port=4200 && ng serve"

使用 IDEA从github上拉取Angular项目并且部署运行

    (7) 一般会在左侧工具导向栏里显示 npm  的弹窗按钮,点击之后会弹出 npm 命令按钮窗口(在vs Code中是使用 npm 命令启动,idea把它集成到了按钮里,免得忘了启动命令),然后双击  "start" 按钮

使用 IDEA从github上拉取Angular项目并且部署运行

       如果没有出现左侧 "npm" 按钮的话,不用急,还可以在 package.json 上右击,选择  "Show npm Script",一样可以弹出 npm 命令框

       (8)  如果你是首次运行Angular项目的话,这里会报一个警告Warn,大概就是说你的 npm start 需要的module missing了,这时候点击右下角的提示链接  "npm install",等待 npm module的安装完成,完成之后,再重新执行第(7)步的操作,再次 start 项目,这样就可以啦。

使用 IDEA从github上拉取Angular项目并且部署运行

     (9) 项目成功启动之后,打开浏览器,在地址栏输入  localhost:4200/ ,回车,就可以显示你的Angular项目默认页面啦。

使用 IDEA从github上拉取Angular项目并且部署运行

   好啦,Angular项目从github中拉取和默认端口号的修改,以及运行都完成啦。现在可以非一般的编写你的代码啦!

本文地址:https://blog.csdn.net/qinleilei7760631/article/details/109635904