vue和react创建项目使用yarn包管理工具

1.开发环境 vue || react

2.电脑系统 windows10专业版

3.在使用vue和react开发的过程中,我们在创建项目的过程中,我们之前选择的都是npm包,但是我们之后创建项目想要使用yarn包管理工具,怎么做呢?

4.安装yarn

npm install -g yarn

4-1.配置yarn全局

//新建 yarn_global文件夹
yarn config set global-folder "D:\node\node-v16.10.0-win-x64\yarn_global"

yarn config set cache-folder "D:\node\node-v16.10.0-win-x64\yarn_cache"

// : 注意 D:\\\\\\\\\ 是环境路径,根据自己的情况进行调整

5.vue使用yarn首先在C盘找到

//删除选中的文件

删除之后,再次执行 vue create xxx,会提示你选择对应的包管理工具

5-1.关于.vuerc

6.react使用yarn

// 首先在终端(管理员身份)
 yarn config set ignore-engines true

6-1.官方react创建项目方法

npx create-react-app my-app
cd my-app
npm start

6-2.使用yarn创建react项目错误方法

!!!!!注意以下方法错误

yarn create-react-app my-app 

6-3.yarn创建react项目正确方法

yarn create react-app reactmo2

7.扩展:如果你刚安装node,之后想要yarn进行管理,怎么搞呢?

首先全局安装 yarn 
npm install -g yarn

7-1.配置yarn全局

//新建 yarn_global文件夹
yarn config set global-folder "D:\node\node-v16.10.0-win-x64\yarn_global"

yarn config set cache-folder "D:\node\node-v16.10.0-win-x64\yarn_cache"

7-2.yarn常用命令

yarn global add @vue/cli 全局安装vuecli
yarn add axios 安装axios到生产环境
yarn add ant-design-vue -D 安装ant-design-vue到开发环境
yarn remove element-ui 卸载element-ui

7-2-1.yarn安装指定版本

在开发的过程中,我们会根据需要安装指定库的版本,下面我来举例vue
yarn add vue@999 -D

按键盘的上下选择版本,这样我们就可以根据自己的需要安装指定的版本了。

7-2-2.package.json中版本^2.0.0和~2.0.0以及2.0.0之间的区别:

{
  "name": "chenAdmin",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.2.1"
  }
}

^2.0.0:表示锁定主版本号,就是第一位版本2,在升级的时候主版本号不变,次版本号和末版本号升级到最新
~2.0.0:表示锁定主版本和次版本,在升级的时候只会末版本号升级到最新
2.0.0:表示锁定当前版本(锁定主版本和次版本已经末版本)

7-3.npm和yarn对比

 NPM                               Yarn
npm install                     ==     yarn
npm install vue -g              ==     yarn global add vue
npm install vue --save          ==     yarn add vue
npm install vue --save-dev      ==     yarn add vue --dev
npm uninstall vue --save(-dev)  ==     yarn remove vue
npm unpdate vue --save          ==     yarn upgrade vue

7-4.yarn配置环境变量

找到yarn全局安装的目录:D:\node\node-v16.10.0-win-x64\yarn_global\node_modules\.bin

//把D:\node\node-v16.10.0-win-x64\yarn_global\node_modules\.bin配置为环境变量就可以了

7-5.重置npm镜像:

npm config set registry https://registry.npmjs.org/ 

7-6.查看镜像配置结果:

npm config get registry

7-7.配置淘宝镜像:

npm config set registry https://registry.npm.taobao.org

7-8.npm i 报错:

是npm 版本太高造成的,降低npm 版本 npm i npm@6 -g

8.node-sass安装失败(解决方法):

在安装的时候会出现node-sass安装失败的问题,下面我来分享一下解决方法：
npm config set sass_binary_site npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

// 之后再涉及到 node-sass 的安装时就会从淘宝镜像下载

9.如果使用8的步骤解决不了问题的话,可以使用cnpm进行安装,操作如下:

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

// 注意:要保证 cnpm和npm的版本保持一致,比如说 npm的版本是6 那么对应的cnpm的版本也应该是6

9-1.配置cnpm的环境变量:

9-2.cnpm 使用

cnpm i
//如果遇到报错:
1.首先 先确认 cnpm的版本是否和npm的版本一致
2.是否配置了环境环境变量
3.npm的版本和cnpm的版本是否 过高 或者 过低

9-3.如果以上都解决不了问题的话,可能因为缓存的问题,查看是否配置了缓存：

npm config set prefix "D:\nvm\nvm\node_global"

npm config set cache "D:\nvm\nvm\node_cache"

建议配置这个

10.npm切换镜像后,npm i 安装依然卡,需要好久才完成

//背景:node 16
镜像使用的也是淘宝镜像(https://registry.npm.taobao.org/)依然是卡着好几分钟才完成。
// 产生原因:原因是：淘宝 npm 镜像切换新域名了

解决方法(淘宝npm新的镜像):
新的 web 站点：https://npmmirror.com

新的 镜像 地址：https://registry.npmmirror.com

1.更换 新的地址 npm config set registry https://registry.npmmirror.com
2.查看是否更换成功 npm config get registry
3.重新安装 npm i

//并且推荐使用 nrm 来管理npm 镜像地址
 npm install -g nrm
最新淘宝源默认就有,直接使用就行
nrm use taobao

查看所有的源
nrm ls
增加源地址
nrm add taobao https://registry.npmmirror.com/
切换镜像源,比如切换到 淘宝源
nrm use tobao
删除源地址
nrm del taobao
测试所有源的相应时间 看那个更快
nrm test

100.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。