用npm和cnpm、yarn创建angular项目

说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
使用npm安装插件:命令提示符执行npm install [-g] [--save-dev] 
: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 [-g] [--save-dev] 
PS:不要直接删除本地插件包 
4.使用npm更新插件:npm update [-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

你可能感兴趣的:(用npm和cnpm、yarn创建angular项目)