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

                   通过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,进入设置窗口

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

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

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

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

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

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

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

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

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

ng serve --port=4200   

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

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

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

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

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

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

   后面会持续更新,如有需要,可以在评论区留下大佬的问题或指教,小弟会尽快改正的。或者也可以微信私我,大家相互交流:微信号: DC04250101

猜你喜欢

转载自blog.csdn.net/qq_41221030/article/details/81235913
今日推荐