Vue移动端-轻松切换pnpm，快速安装Vant-快速上手！- day04

1. Vant - 网站地址

https://vant-contrib.gitee.io/vant-weapp/#/homehttps://vant-contrib.gitee.io/vant-weapp/#/home

2.  Vant 介绍

有赞公司出品

Vant 是基于Vue.js的轻量高效的移动端UI组件库。

特性：

• 轻 量 高 效： Vant 组件库经过精心优化，体积小且高效。
• 多样化组件：包含常见的按钮、输入框、轮播图、列表等组件。
• 自定义主题：支持自定义主题，方便符合项目风格。
• 文档和示例：提供详细文档、示例和API文档。
• 可 扩 展 性： 支持自定义组件和扩展已有组件。
• 国际化支持：支持多语言和国际化功能。
• 零部件依赖：不依赖三方npm包

官方文档：

3.   安装 pnpm 

       1. 命令：npm i -g pnpm  

 安装教程： 

4. 接下来通过 pnpm 安装 Vant

        2. 命令 pnpm add vant

        2. 可能在安装过程中遇到一些问题，继续往下看，跟着做

        安装教程：

        

  第一个问题：因为node.js版本不符合要求，需要重新下载版本，第一次安装失败

node.js官网

出现了这个问题以后，我们需要重新下载依赖，先把项目包里的依赖卸载，再次向命令行输入 npm i

然后我们打开项目包，去查看一下依赖下载好了没

最后我们重新敲一遍命令：

       1、  命令   npm i -g pnpm

// 因为国内特殊原因，直接执行3命令的话，会一直处于加载状态，需要配置pnpm源为国内淘宝源

       2.0、命令 pnpm config set registry https://registry.npmmirror.com

       2.1、命令 pnpm add vant

        如果处于等待状态先执行 2.0，再执行 2.1, 若 2.1 步骤执行成功，执行命令 3

真烦人，是不是，如果你没有出现这个问题，直接跳过，继续输入命令,如果有那你跟着我的一步一步来

       3.、  命令 pnpm add -D sass

4. pnpm安装vant的依赖问题解决办法

第二个问题：依赖问题，导致我们又卡在了 pnpm add vant 这步，需要重新执行pnpm add vant 命令，如下图：

    

    前提是先将Vscode关闭，再把项目包这两个文件删除

然后继续新建一个cmd窗口

查看 pnpm 安装依赖的命令，输入 pnpm 原来安装依赖也是后面加个  i

试运行

5. 第二种方案：用 npm 安装

安装：

        1. npm i vant 

        2. npm i sass

        3. 不过咱们学习今天的内容就是为了让我们学会怎么换成用 pnpm 去安装vant 和 sass，去尝试一下，不要怕错