Angular学习心得

一、环境搭建
感觉安装配置比较繁琐,从菜鸟网络看文档,先要安装node.js,最新版的的node.js集成npm,然后使用淘宝的npm镜像,再安装脚手架,似乎这个流程很简单,但是我在查找资料的时候,资料上写了一大堆,也没有整合到一起。所以自己装备写一个简明版的安装流程博客啦。

  • 安装node.Js
    下载地址:http://nodejs.cn/download/
    安装 angular 的计算机上面必须安装最新的 nodejs。
    检查安装是否成功:
    打开cmd命令窗口输入命令:node --version;如图
    在这里插入图片描述

  • 安装cnpm
    新版的nodejs已经集成了npm,所以npm已经顺带安装好了。因为npm 官网镜像国内访问太慢,所以使用淘宝的npm镜像会快些。之后能用到 npm的时候尽量都用cnpm来代替。
    Cmd窗口安装命令:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    安装angular脚手架
    Cmd窗口安装命令:cnpm install -g @angular/cli
    在这里插入图片描述
    查看angular版本
    Cmd窗口安装命令:ng --version
    在这里插入图片描述
    出现相关版本表明angular环境搭建成功!

二、创建项目
Angular使用命令ng,所以都是 ng +其他 的组合命令。看了很多创建angular项目的版本,感觉这个版本挺好的,推荐使用:Cmd窗口下输入命令:(可以先cd到一个你指定的目录下再创建项目)
1.ng new demo1 --skip-install (创建angular项目demo1 不使用npm更新)
2.cd demo1 (到demo1文件夹下)
3.cnpm install (使用cnpm更新,更快些)
4.ng serve (运行)或 ng serve --open(运行并用默认浏览器打开)
运行的效果是这样的:把访问地址贴到浏览器运行
在这里插入图片描述
初始项目页面
在这里插入图片描述
三、Angular 环境搭建以及创建项目的时候可能遇到的错误。
我在创建项目的时候发生了很多次错误,项目有时还不能运行,所以很麻烦,百度贴了很多错误,才知道一些,按照我上面的步骤,应该不会出现此类错误,我把我错的错误贴出来,供参考(解决办法也是百度获得)。

  • npm 安装 angular/cli 失败
    建议用cnpm来安装

  • 创建项目 npm install初始化项目的时候失败
    建议用cnpm install来初始化项目

  • 创建项目后用 npm i 或者 cnpm i 后项目没法运行
    用 yarn 替代 cnpm 和 npm,步骤为
    1 cnpm instal @angular/cli
    2 ng new 的时候阻止自动安装 ng 包,只创建 ng 目录
    (命令为ng new my-app --skip-install)
    3 安装 yarn npm install -g yarn / cnpm install -g yarn
    4 进入目录 my-app 使用 yarn 安装 ng 所依赖的包 yarn

记录,总结,分享!学习永远在路上!

猜你喜欢

转载自blog.csdn.net/qq_35340913/article/details/88560577
今日推荐