ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

1、小程序Vant_WebApp组件库的安装步骤和简单使用

2022-05-31 01:31:07  阅读:142  来源: 互联网

标签:npm Vant 程序 当中 使用 组件 WebApp


Vant

1、小程序对于npm的支持

目前,小程序当中已经支持使用npm安装的第三方包,通过使用这些第三方包,我们可以提高对小程序开发的效率,但是在小程序当中使用所谓的npm包有如下的三个限制

  • 不能支持依赖于Node.js内置库的包
    • 因为小程序当中并没有Node.js的环境,例如有些npm的包,它依赖于某些npm的模块,依赖于fs,path模块,这些是不能在小程序当中进行使用的
  • 不支持依赖于浏览器内置对象的包
    • 例如像Jquery,咱们在小程序当中是无法进行使用的,为什么呢?因为Jquery依赖于浏览器当中的Window对象,而小程序当中是没有的
  • 不支持依赖于C++插件的包
    • 在npm的有些包当中,一些负责加密的包,他们会依赖与npm的C++插件,来提高他们加密的效率和性能,小程序也没有C++的环境,所以不能使用的
  • 虽然npm上的包千千万万,小程序能够使用的包是非常少的,为数不多
  • 在使用这些npm包的时候需要判断这些包是否含有上述的三种情况,如果有的话,小程序是不可以使用的

image-20220531001029875

2、Vant Weapp

2.1、概述

  • Vant Weapp有赞前端开发的一套开源的小程序UI组件库,助力小程序开发者快速搭建和开发小程序的UI界面,他所使用的是MIT开源许可协议,对商业使用非常的友好
  • 类似于我们的Vue当中的ElementUI,都是由一些牛逼的前端团队开源出来的UI组件库
  • 官方文档地址

2.2、安装Vant

  • 在小程序当中安装Vant组件库有如下三个步骤
    • 通过npm安装
    • 构建npm包
    • 修改app.json
  • 详细操作教程:
  • 我们接下来是根据npm进行安装的,需要在环境当中安装Node.js,这里推荐一篇博文
  • Node.js安装

image-20220531001847721

1、搭建项目

image-20220531005822745

2、初始化项目配置

  • 在这里首先我们需要初始化一下这个项目,为了方便我们组件库的使用

  • 在初始化之前我们要确保小程序当中是否存在包管理文件package.json),没有的话我们需要打开命令行窗口进行创建

    • image-20220531005859879
    • 输入=>npm init -y指令
    • image-20220531005921209
  • 创建完毕

    • image-20220531005932674

3、安装我们的Vant组件库

  1. image-20220531003015981

  2. 目前的最新版本是1.10.3

  3. image-20220531003036847

  4. 我这里出现了一个错误,网络上的解决教程是删除掉这个.npmrc的文件,为了防止误删我将这个文件保存在我的小程序文件夹当中(D:\VXdevelopment\防止误删npmrc)

  5. 输入我们的指令=>(npm i @vant/weapp@1.10.3 -S --production)

  6. image-20220531010028541

4、小程序构建npm包

  • 官方文档
    • image-20220531004110872
  • 我们自己来试试
    1. image-20220531004133160
    2. image-20220531010046487
    3. image-20220531010101760
    4. 目前小程序当中的本地设置当中已经没有了使用npm模块这个选项,应该是小程序自动勾选了这个模块,并不影响我们的使用
      • image-20220531010344758
    5. 至此,VantWebApp组件库安装完毕,我们可以根据开发文档进行开发了

2.3、简单使用Vant组件库

  1. 在app.json文件当中去除 style:v2的选项

    • image-20220531010436833
    • 官方文档解释
    • image-20220531010505078
  2. 设置 usingComponents配置项,添加我们需要使用的组件样式,其实就和自定义组件类似

    • image-20220531010618859

    • "usingComponents": {
          "van-button": "@vant/weapp/button/index"
        },
      
  3. 我们这里设置的是全局样式,如果需要在特定页面引用组件的话在对应的页面添加相对参数即可

  4. 在我们的index页面使用这个组件

    • image-20220531011252860

    • <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button plain hairline type="primary">细边框按钮</van-button>
      <van-button plain hairline type="info">细边框按钮</van-button>
      
  5. 更多详细步骤参考官方文档即可

标签:npm,Vant,程序,当中,使用,组件,WebApp
来源: https://www.cnblogs.com/wavesbright/p/wx_Vant_WebApp.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有