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

1. Vant - 网站地址

https://vant-contrib.gitee.io/vant-weapp/#/homeicon-default.png?t=N7T8https://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,去尝试一下,不要怕错

  • 20
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值