使用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,进入设置窗口

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第1张图片

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第2张图片

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第3张图片

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

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第4张图片

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第5张图片

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第6张图片

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

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

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

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

ng serve --port=4200   

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第7张图片

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第8张图片

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第9张图片

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

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第10张图片

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

使用IntelliJ IDEA从github上拉取Angular项目并且部署运行_第11张图片

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

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

你可能感兴趣的:(前端,Angular)