目录
前言
最近在学习搭建Angular项目,在这里记录搭建项目的过程以及一些相关操作。
参考文章:Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
一、学前必备知识点
1.TypeScript
TypeScript学习文档 TypeScript中文网-TypeScript--JavaScript的超集
2.Angular
Angular学习文档 Angular文档简介
3.Angular CLI
Angular CLI命令参考手册 Angular CLI概览与命令参考手册
二、必备软件
1.Node
Node.js(携带NPM包管理工具),在构建Angular项目之前,需先安装Node.js
下载安装包地址:https://nodejs.org/en
安装及环境配置教程:nodejs安装及环境配置
安装完成后查看node版本
node --version
node -v
获取到版本号即代表安装成功
安装成功后需要配置环境变量,根据上面的链接教程配置环境变量
如果本地有多个项目,并且每个项目的node版本都不一致,可以使用nvm来管理node版本。
windows版本下载及安装教程:nvm-windows下载与安装_小 源的博客-CSDN博客
三、镜像源
Node.js安装好之后,NPM就可以使用了(NPM是随同NodeJS一起安装的包管理工具)。NPM的默认安装源在国外,一般会比较慢或因为网络原因安装失败,因此需要把NPM的安装源设置到国内镜像源,可以使用淘宝镜像(npm.taobao.org/)。
1.临时切换使用
npm --registry https://registry.npm.taobao.org install express
2.持久使用(推荐)
npm config set registry https://registry.npm.taobao.org
# 恢复到默认状态
npm config delete registry
3.验证是否配置成功
npm config get registry
或者
npm info express
四、Angular相关开发环境
1.全局安装Angular CLI脚手架工具
安装命令(只需要安装一次)
npm install -g @angular/cli
或者
cnpm install -g @angular/cli --推荐使用速度较快
安装前最好先将NPM安装源切换成淘宝镜像,使用默认的安装源可能会因为网络原因报错
验证Angular环境是否安装成功
ng version
2.Angular项目创建
ng new yourProjectName(项目名称)
3.本地运行项目
- 直接通过脚手架命令运行项目
ng serve --open
# ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用
# --open(或者只用 -o 缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/
- 通过npm run 命令执行package.json的脚本命令运行项目,本地运行的脚本命令默认为start,可以自己进行修改。
npm run start
- 指定端口号运行项目
项目默认的端口号为4200,可以指定端口号避免出现端口号被占用的情况。
方式一:在使用脚手架命令运行项目时指定端口号
ng serve --port 9285
方式二:在package.json的脚本内指定端口号,运行npm run dev即可
Angular本地运行项目成功啦~
五、创建并提交到远程仓库
使用脚手架创建的项目,自动创建了本地仓库,并且commit了相关文件,因此不需要再初始化本地仓库,只需要在远程创建仓库并提交。
- 在gitee创建一个仓库
- 提交到远程仓库,执行以下命令
# 添加远程仓库地址
git remote add origin https://gitee.com/username/xxx.git
# 代码提交到远程仓库
git push -u origin master
具体操作可以查看 git 创建远程仓库并且本地代码提交到远程仓库_小香菜今天吃什么的博客-CSDN博客
总结
本文仅简单介绍了通过脚手架Angular CLI搭建Angular项目的过程,更多相关内容在今后使用过后再做记录。