前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用Angule Cli创建Angular项目

用Angule Cli创建Angular项目

作者头像
okaychen
发布2018-01-05 12:21:54
1.5K0
发布2018-01-05 12:21:54
举报
文章被收录于专栏:前端那些事

Angular4.0来了,更小,更快,改动少

接下来为Angular4.0准备环境和学会使用Angular cli项目

1.环境准备:

1)在开始工作之前我们必须设置好开发环境

如果你的机器上还没有安装Node.js和npm,请安装他们

(这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了)

代码语言:javascript
复制
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后我们可以通过node -v和cnpm -v来分别查看node和cnpm安装的版本和结果

代码语言:javascript
复制
node -v
cnpm -v

2)安装全局Angular cli

代码语言:javascript
复制
cnpm install -g @angular/cli

2.创建新的项目

打开终端窗口(这里我使用的是webstorm的Terminal,也可以使用计算机自带的powershell)

代码语言:javascript
复制
ng new my-app

项目会很快创建完成,接下来你会看到

代码语言:javascript
复制
Installing packages for tooling via npm

这里如果你选这了淘宝的cnmp镜像,应该最好在安装完全局Angular cli后设置一下,保证正常下载工具

代码语言:javascript
复制
ng set --global packageManager = cnpm

然后我们的项目就创建完成了

我们会发现在文档中有很多文件,这里参考Angular官方文档 ,以便认识这些文件的作用。

 3.在项目中引入bootstrap和jQuery

    这里我使用webstorm的Terminal,直接在终端操作

代码语言:javascript
复制
cnpm install bootstrap --save   
代码语言:javascript
复制
cnpm install jquery --save

我们在项目中就添加了bootstrap和jQuery,我们可以在node_modules文件夹中找到他们(这个文件夹放的是第三方库);

然后我们需要操作.angular-cli.json文件,把bootstrap和jQuery添加进去:

这里需要注意的是:因为angular用的是微软开发的typescript语言,我们需要在终端做下面的操作,以便让typescript认识bootstrap和jQuery一些字符(比如jQuery的$):

代码语言:javascript
复制
cnpm install @types/bootstrap --save-dev
代码语言:javascript
复制
cnpm install @types/jquery --save-dev

这样我们就在项目中正常使用bootstrap和jQuery了

4)项目的启动

启动项目我们可以直接通过:

代码语言:javascript
复制
ng serve

或者是

代码语言:javascript
复制
npm start

这两个的默认端口都是4200:

http://localhost:4200

 这里你也可以修改默认的端口:

代码语言:javascript
复制
ng serve -p 3000

5)最后项目的打包

   用angular cli创建的项目会有很多文件,我们就需要打包后再发行:

代码语言:javascript
复制
ng build
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-05-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.环境准备:
  • 2.创建新的项目
  •  3.在项目中引入bootstrap和jQuery
  • 4)项目的启动
  • 5)最后项目的打包
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档