整理了一些前端常用的插件安装和使用的命令（记录）一 npm nvm cnpm nrm yarn

本文链接： https://blog.csdn.net/weixin_45430248/article/details/102600437

0. nvm的安装

概念	管理node.js版本的工具，可以让不同的项目使用不同的版本
安装方式	使用github里的安装包
查看node版本	nvm ls
nvm安装node	nvm install versions
查看node是否安装成功	node -v
查看的node版本	nvm ls
切换node版本	nvm use versions

nvm安装地址：https://github.com/coreybutler/nvm-windows/releases

1.npm nrm cnpm 的安装国内资源太慢一般用nrm 或 cnpm

概念	npm（node package manager）是nodejs的包管理器，
nrm	nrm是npm的镜像源管理工具，有时候国外资源太慢，那么我们可以用这个来切换镜像源。
nrm安装	全局安装 npm install -g nrm
列出可用的源	nrm ls
切换源	nrm use taobao
cnpm	cnpm install:淘宝镜https://blog.csdn.net/quuqu/article/details/64121812
cnpm安装 -1	npm config set registry https://registry.npm.taobao.org
-2	npm config get registry
-3	npm install -g cnpm --registry=https://registry.npm.taobao.org
npm的一些命令	npm install -g gulp 安装全局的gulp（install可以使用简写：i）
开发环境	npm install --save-dev gulp (新建目录—安装到项目目录下)项目依赖的环境 -D
生产环境	npm install --save gulp (新建目录—安装到项目目录下)项目依赖的环境 -S

2.yarn的安装

概念	yarn 是类似于npm的一个包管理器
优点	1.yarn 可以保证我们项目中以来的版本的一致性 2.安全
安装方式	`$ npm i yarn -g`
配置国内镜像源：	`$ yarn config set registry https://registry.npm.taobao.org`
生成package.json文件	yarn init
安装第三方插件/包	安装 yarn add 第三方包的名称 -S/-D
下载插件	yarn add xxx
删除插件	yarn remove xxx

3.cnpm的安装

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

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

4.Vue的cli安装

概念	Vue自动构建项目的脚手架工具
yarn安装	yarn add @vue/cli @vue/cli-init global cli全局安装
cnpm安装	cnpm i @vue/cli @vue/cli-init -g
检验安装是否成功	命令行输入 $vue，有输出命令提示，证明安装成功

使用cli创建项目

1.cli3版本的创建–2种方式

方式1：命令创建【推荐】

创建步骤
vue create 项目名称

方式2：图形化界面创建

创建步骤
vue ui
进入可视化界面进行操作，最终的结果是一致的

2.cli2版本的创建—2种格式

标准版
- vue init webpack 项目名称
- 第一步安装完成后出现提示，直接按照提示运行下一步
简易版
- vue init webpack-simple 项目名称

5.cli3版本配置介绍

翻译	选项
使用键盘上下键来选择一个配置	please pick a preset( user arrow keys )
默认配置	default
手动选择配置	Manually select features
优雅降级 es6 —> es5	babel
语法检测	eslint js
预处理语言 less sass/scss stylus	CSS Pre-processors css
	Linter / Formatter eslint / jslint
单元测试	Unit Testing
端到端的测试	E2E Testing
将所选的每一个选项用一个文件来保存（配置）	In dedicated config files
在浏览器中使用的app	PWA (web app )
将上面所选的配置保存下来，以备将来的项目使用	Save this as a preset for future projects?

6.React 项目的安装基本命令

React学习内容

React学习版本： 16.x

React老版本项目： 15.x

react官网说 17.x 会使用的一些技术

React应用级脚手架

CRA

dva

umi

使用 create-react-app 【 CRA 】创建项目

React官网提供的脚手架

脚手架：作用：快速构建一个项目

全局安装create-react-app

$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app	也可以实现相同的效果

创建一个项目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安装过程较慢，可以推荐使用yarn
Installing react, react-dom, and react-scripts...

这需要等待一段时间，这个过程实际上会安装三个东西

react: react的顶级库
react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start      //  开发环境下运行
    Starts the development server.

  npm run build  // 生产环境打包
    Bundles the app into static files for production.

  npm test       // 测试环境下运行
    Starts the test runner.

  npm run eject  // 配置文件抽离
  	// webpack配置放在了node_modules/react-scripts里面 
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。

生成项目的目录结构如下：

├── README.md							使用方法的文档
├── node_modules					所有的依赖安装的目录
├── yarn-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					 项目依赖配置记录文件 、 记录项目脚本命令
├── public								   静态公共目录（ 生产环境 ） 不会被webpack编译
|-- config                   项目webpack配置文件
|-- scripts                  项目wepback脚本命令执行文件
└── src									开发用的源代码目录
	- index.js 项目入口文件
	- index.css 项目全局样式
	- App.js 构建了一个App组件，是项目最大的组件 【 类似根组件 】
	- App.css 是App组件的样式文件
	- App.test.js 是App组件测试文件 
	- logo.svg 初始项目的界面logo
	- serverWorker 内部文件，我们不操作

常见问题：

npm安装失败
- 切换为npm镜像为淘宝镜像
- 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
```
yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源

yarn config list // 查看yarn 镜像列表
```
- 如果还没有办法解决，请删除node_modules及yarn-lock.json然后重新执行cnpm install命令
- 再不能解决就删除node_modules及yarn-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令
- 环境变量问题
- react-scripts 版本过高问题（降低版本 [email protected]）
以上全不行，咋整？
- 将傍边可以安装的人的目录文件拷贝过来，注意不要拷贝node_modules
  - 拷贝过来之后，记得cnpm i