anguar一个空间多个项目实战

一、前言

有时候我们在一条产品线上,会有多套前端代码,运行在不同平台或者有多个业务端。这些代码可复用性非常高,以至于可以从某套代码直接copy出来用于开发另一个业务端。于是某个小组件需要改动时却要跑起多个项目来修改。angular-cli很好地帮我们解决了这个问题——建立多项目的工作空间。

在正式投入实战之前,先来试一试。来,,,做好笔记。
假设你已经装好了node和全局安装最新的angular-cli,然后,我们开始快活吧~

二、建立项目

1. 建立工作空间

首先,建立一个无项目空间,终端输入:

ng new my-workspace --createApplication="false"

好了,建好了,
在这里插入图片描述
但是建好的项目,空空如也,=͟͟͞͞( •̀д•́) 我的src呢?我的index.html呢?

2. 建立第一个项目

别急嘛,既然没有,那建一个不就是了。我们终端进入根目录,运行一下命令

cd my-workspace
ng generate application my-first-app

建立项目的时候会询问是否需要测试框架、使用什么样式预编译语言、还有是否使用路由功能。我们有yes就选yes,没yes就… 选你喜欢的(。◝‿◜。) ,有时候不是小孩子更需要选择。
在这里插入图片描述
在这里插入图片描述
建好之后会多出一个projects目录,该目录下有一个我们刚刚建立的项目 my-first-app,我们npm start跑起来 ↖(▔▽▔)↗
在这里插入图片描述

3. 建立第三个项目
接着,我们建立另一个项目

ng generate application my-second-app

在这里插入图片描述
好了,项目有了,但是,,,
怎么跑起来啊(゚Д゚)w,先去喝杯咖啡冷静一下…

唔,,,咖啡甜中略带苦涩的味道涌上心头,宛如浓郁的花香,带领你置身清新悠然的大自然,翱翔在自由的天空,柔和的微风宛如仙女的双手…
.
咳咳~,对了,还有正事呢,不是想入非非的时候…

我们看packge.json,跑起项目my-first-app的时候ng serve就跑了起来,官方对ng serve的用法是

ng serve
Builds and serves your app, rebuilding on file changes.

ng serve <project> [options]
ng s <project> [options]

恍然大悟,醍醐灌顶,毛塞顿开,ng serve要传入一个项目名称的参数,那么我们在package.json的scripts加入这两句:

"second-project": "ng serve my-second-app --port=5000 --open"
"build:second-project": "ng build my-second-app"

好了,我们跑一下

npm run second-project

在这里插入图片描述
果然跟我预期那样跑了起来(〃‘▽’〃),端口是5000,–open是自动打开了浏览器。

好了,两个项目的组件和公库,可以复用啦ds(❁´◡`❁)✲゚

总结

angular-cli在前端项目工程化方面做得非常好的一个框架,官方脚手架本身集成路由和状态管理、分包加载项目代码,无需其他过多配置。相对于简单的react,留给你自由发挥的空间并不多,但却省去前期配置的很多工作量。比起vue跟react,angular才更像是一个框架。react、vue、angular我都用过,我不是在打广告,我只是说出我的感想。(#゚Д゚)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值