首页 > 编程语言 >小程序基础之引用vant组件库

小程序基础之引用vant组件库

时间:2022-11-15 10:23:52浏览次数:43  
标签:npm vant 样式 weapp json 引用 install 组件

第一步:终端npm init -y 会生成一个pack.json文件。(初始化包管理,记录这个项目用的包。)
第二步:npm install 会生成一个 package-lock.json文件。(一个版本锁定的功能)
上两步有对应的文件不用整,
第三步: npm install @vant/weapp (默认就生产环境,咱能省就省,完整就这:npm install @vant/weapp --save -product)
第四步:构建npm(左上角工具那里),会生成一个miniprogram_npm,这才是我们要的。
第五步:好了,现在哪里需要引哪里,.json注册引入(例子: "van-icon": "/miniprogram_npm/@vant/weapp/icon"),完美!
好丝滑,不用自己码了,突然发现这个样式有点问题,不是我们想要的,这时候我们整个狠的,改源码?
当然不可能!
改样式这样就可以:页面调试选出类名,来个样式覆盖,别忘了加!important,不然级数不够,干不过!
上代码:
.van-info {
background-color: red !important;
font-size: 50rpx;
}
还有一种方法:改变量,看用什么变量取出来重新赋值,nice!
上代码:page {
--info-background-color: orange
}
整完过后有可能会发现有警告[component]..., 这时候不是咱的问题小程序内部问题,
切换基础库2.18.1以下就没了。还有就忽视得了,改源码,呵呵,不可能的!
完结——
各位老铁有用点点star,让更多的友友一起学习!

标签:npm,vant,样式,weapp,json,引用,install,组件
From: https://www.cnblogs.com/chenger1032020/p/16891512.html

相关文章

  • k8s中查看各个组件的启动命令
    方式1:可以直接到kube-system中,查看各个组件的PODYAML定义文件方式2:到目录下/etc/kubernetes/manifests查看组件的定义文件方式3:通过pgrep命令,如查看kubelet$tr\\0......
  • Vue 子组件调用父组件方法[不参数版]
    子组件<template><div><button@click="childEvent()">点击调父组件方法</button></div></template><script>exportdefault{methods:{......
  • Vue 子组件调用父组件方法[含参数版]
    子组件<template><div><button@click="childEvent(_obj)">点击调父组件方法</button></div></template><script>exportdefault{methods:{......
  • Vue 父组件调子组件方法[含参数版]
    子组件<template><div></div></template><script>exportdefault{methods:{childEvent(_value){alert("我是子组件方法"+......
  • Vue 父组件调子组件方法[不参数版]
    子组件<template><div></div></template><script>exportdefault{methods:{childEvent(){alert("我是子组件方法");......
  • 自定义组件
    创建自定义组件类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成。要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将component字段设为true......
  • 自定义组件传参
    参数声明Component({//参数properties:{//这里定义了innerText属性,属性值可以在组件使用时指定innerText:{type:String,value:'def......
  • 自定义组件事件
    子组件<viewbindtap="onItemChildClick"data-item="item">{{item}}</view>Component({methods:{onItemChildClick(event){this.trigger......
  • 1-3 k8s各组件介绍
    k8s各组件介绍master端:apiserver:资源操作的唯一入口,介绍用户的命令,提供认证,授权,api注册和发现等机制scheduler:负责集群资源调度,按照预定的调度策略将pod调度到相......
  • React组件基础四
    一.组件生命周期概述意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期:组件从被创建到挂载到页面中运行,再到组......