用npm和cnpm、yarn创建angular项目

说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)

使用npm安装插件:命令提示符执行npm install <name> [-g] [–save-dev] 

<name>:node插件名称。 

例:npm install gulp-less –save-dev

-g:全局安装。 

将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量; 非全局安装:将会安装在当前定位目录; 全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

–save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;

为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包)。

3.使用npm卸载插件:npm uninstall <name> [-g] [–save-dev] 

PS:不要直接删除本地插件包 

4.使用npm更新插件:npm update <name> [-g] [–save-dev] 

5.更新全部插件:npm update [–save-dev] 

6.查看npm帮助:npm help 

7.查看当前目录已安装插件:npm list

PS:npm安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),解决办法往下看↓↓↓↓↓↓。

选装cnpm

说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

官方网址:http://npm.taobao.org

安装:命令提示符执行npm install cnpm -g –registry=https://registry.npm.taobao.org

注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误 

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm。

淘宝镜像安装cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

cnpm -v

安装vue:cnpm install -g vue-cli

vue init webpack demo1

cd demo1

cnpm install (用cnpm速度更快)

npm run dev

 # serve with hot reload at localhost:8080

安装angular

npm install -g @angular/cli

ng new my-app

cd my-app

ng serve –open

47.106.79.168 root Ww959317服务器

全局安装 Angular CLI

网上关于Angular CLI的安装指南有很多,但总是缺一些细节,而这些细节总是导致各种各样的错误。现将安装过程记录如下。

安装前提:Nodejs已安装!Nodejs中包含npm,可用来下载各种工具插件。

安装步骤 

(1)若之前安装过Angular CLI,则需要卸载,并清空缓存。

npm uninstall -g angular-cli

npm cache clean –force

1

2

若清空缓存出现Error,则可执行

npm cache clear –force && npm install –no-shrinkwrap –update-binary

1

(2)设置淘宝代理,以安装cnpm。cnpm可代替npm,命令格式相同。

npm config rm proxy

npm config rm https-proxy

npm install cnpm -g –registry=https://registry.npm.taobao.org

1

2

3

(3)重启命令行或者查看cnpm版本号

该步骤是重要的,否则可能因此一些不好解释的问题~

cnpm -v

1

(4)使用cnpm安装Angular CLI

cnpm install -g @angular/cli@latest

1

(5)设置cnpm为global packageManager

若此时,创建工程,仍会报错!原因在于global packageManager仍是npm。

Angular项目创建

创建工程指令为:

ng new myheros

1

myheros为工程名称

执行指令,将cnpm设置为global packageManager

ng set –global packageManager=cnpm

1

之后创建工程myheros

注意:!!!用npm安装会出现很多问题,这也是我自己踩过的坑!推荐用yarn代替npm


版权声明:本文为qq_38048590原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。