【vue2项目总结】——vant-ui的使用

文章目录

  • 安装
  • 导入
    • 全部导入
    • 按需导入
  • toast 轻提示
  • vw适配

安装

通过 npm 安装

# Vue 3 项目,安装最新版 Vant:
npm i vant -S# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S

导入

全部导入

在main.js中

import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)

使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

按需导入

安装一个插件

yarn add babel-plugin-import -D
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}

把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js

import { Button, Icon } from 'vant'Vue.use(Button)
Vue.use(Icon)

main.js中进行导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'

toast 轻提示

两种使用方式

  1. 导入调用 ( 组件内非组件中均可 )
import { Toast } from 'vant';
Toast('提示内容');
  1. 通过this直接调用 ( **组件内 **)
    main.js 注册绑定到原型
import { Toast } from 'vant';
Vue.use(Toast)
this.$toast('提示内容')

vw适配

yarn add postcss-px-to-viewport@1.1.1 -D

项目根目录, 新建postcss的配置文件postcss.config.js

// postcss.config.js
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/721662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI芯片行业深度:发展现状、竞争格局、市场空间及相关公司深度梳理

从广义上讲只要能够运行人工智能算法的芯片都叫作AI芯片&#xff0c;但通常意义上的AI芯片指的是针对人工智能算法做了特殊加速设计的芯片。AI芯片也被称为AI加速器或计算卡&#xff0c;即专门用于处理人工智能应用中的大量计算任务的模块&#xff08;其他非计算任务仍由CPU负责…

ECMAScript语法探秘:从基础到进阶的全方位解析

一、引言 在Web前端领域&#xff0c;JavaScript的地位无可替代&#xff0c;而ECMAScript作为JavaScript的核心语言标准&#xff0c;更是前端开发者必须掌握的重要内容。随着ECMAScript版本的迭代更新&#xff0c;越来越多的新特性和语法糖被引入&#xff0c;使得JavaScript的开…

ACwing :1221 四平方和 (二分)

*#include <iostream> #include <cstring> #include <algorithm>using namespace std; const int N 5e6 10; int n;struct sum{int s,c,d;bool operator < (const sum &T)const{ // 重载小于符号if(s ! T.s) return s < T.s;if(c ! T.c) …

day11_oop_fianl_satic_多态

今日内容 零、 复习昨日 一、final 二、static 三、多态 四、向上转型&向下转型 五、多态应用 零、 复习昨日 0 类封装步骤 属性私有private提供setget方法 1 继承关键词,继承的好处 extends减少代码重复为多态做准备 2 子类可以使用父类什么 非私有的属性和方法 3 方法重写…

都2024年了,我依然在靠做网站赚钱

为了给大家提供更好的出海服务&#xff0c;现推出了出海工具站点&#xff0c;有兴趣想利用技术变现的同学&#xff0c;可以关注下哈。 关于网站建设&#xff0c;我目前手头管理着好多个网站&#xff0c;并持续不断地新增项目。很多人认为网站早已过时&#xff0c;不再能盈利等等…

总结:直径测量的发展历程!在线测径仪已成主要方式!

测量在生活、生产和科学探究中扮演着至关重要的角色。从古至今&#xff0c;人们对测量的探索从未停止。而外径作为一种基础的几何尺寸&#xff0c;其测量也经过了多代发展&#xff0c;直到至今被广泛应用到工业生产中的在线测径仪。本文就来介绍一下外径测量的发展历程&#xf…

【pyinstaller打包记录】Linux系统打包可执行文件后,onnxruntime报警告(Init provider bridge failed)

简介 PyInstaller 是一个用于将 Python 程序打包成可执行文件&#xff08;可执行程序&#xff09;的工具。它能够将 Python 代码和其相关的依赖项&#xff08;包括 Python 解释器、依赖的模块、库文件等&#xff09;打包成一个独立的可执行文件&#xff0c;方便在不同环境中运行…

【牛客】SQL139 近三个月未完成试卷数为0的用户完成情况-窗口函数

描述 现有试卷作答记录表exam_record&#xff08;uid:用户ID, exam_id:试卷ID, start_time:开始作答时间, submit_time:交卷时间&#xff0c;为空的话则代表未完成, score:得分&#xff09;&#xff1a; iduidexam_idstart_timesubmit_timescore1100690032021-09-06 10:01:01…

【Sql Server】存储过程的创建和使用事务,常见运用场景,以及目前现状

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

浅析扩散模型与图像生成【应用篇】(五)——SDEdit

5. SDEdit: Guided Image Synthesis and Editing With Stochastic Differential Equations 该文提出一种基于SDE扩散模型的引导图像生成和编辑方法。通过使用者在原图上给出一些引导&#xff0c;比如在图像上涂鸦或者增加一个图块&#xff0c;甚至可以不给定原图&#xff0c;直…

如何从 WordPress 中的静态资源中删除查询字符串

今天有一个客户来问询&#xff0c;hostease主机创建的WordPress站点&#xff0c;在GTMetrix或Pingdom进行网站速度测试&#xff0c;看到有关查询字符串的警告。如果不想看到查询字符串的警告&#xff0c;要如何处理呢?我们测试&#xff0c;可以通过一些处理满足这个需求。我们…

三整数排序问题的解题逻辑

【题目描述】 输入3个整数&#xff0c;从小到大排序后输出。 【样例输入】 20 7 33 【样例输出】 7 20 33 【解析】 本题解法大概有3种&#xff1a; 1、穷举条件法。 此方法先判断a、b、c大小的所有可能&#xff0c;再根据各种可能性输出不同的排序。 思路是先判断a、…

C++17中的类模板参数推导

在C17之前&#xff0c;必须明确指出类模板的所有参数。自从C17起必须指明类模板参数的限制被放宽了。通过使用类模板参数推导(Class Template Argument Deduction(CTAD))&#xff0c;只要编译器能根据初始值推导出所有模板参数&#xff0c;那么就可以不指明参数。 C17中的类模板…

记录一次排查负载均衡不能创建的排查过程

故障现象&#xff0c;某云上&#xff0c;运维同事在创建负载均衡的时候&#xff0c;发现可以创建资源&#xff0c;但是创建完之后&#xff0c;不显示对应的负载均衡。 创建负载均衡时候&#xff0c;按f12发现console有如下报错 后来请后端网络同事排查日志发现&#xff0c;是后…

中科大计网学习记录笔记(十七):拥塞控制原理 | TCP 拥塞控制

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…

论文学习—Model-based Adversarial Meta-Reinforcement Learning

Model-based Adversarial Meta-Reinforcement Learning Abstract1. Introduction2. Related work3 Preliminaries基于模型的强化学习&#xff08;MBRL&#xff09;:区别和联系&#xff1a; 4 Model-based Adversarial Meta-Reinforcement Learning4.1 Formulation 4.2 Computin…

LeetCode 每日一题 Day 88 - 94

2673. 使二叉树所有路径值相等的最小代价 给你一个整数 n 表示一棵 满二叉树 里面节点的数目&#xff0c;节点编号从 1 到 n 。根节点编号为 1 &#xff0c;树中每个非叶子节点 i 都有两个孩子&#xff0c;分别是左孩子 2 * i 和右孩子 2 * i 1 。 树中每个节点都有一个值&a…

代码随想录刷题第50天

继续炒股。第一题是买卖股票的最佳时机IIIhttps://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/description/&#xff0c;与上题不同的是&#xff0c;本题要求买卖的次数要限制在2次以内。对上题的dp数组&#xff0c;显然要增加它的状态以适应题目要求。对于遍历…

好书推荐丨细说PyTorch深度学习:理论、算法、模型与编程实现

文章目录 写在前面深度学习推荐图书内容简介作者简介 推荐理由粉丝福利写在最后 写在前面 本期博主给大家推荐一本深度学习的全新正版书籍&#xff0c;感兴趣的小伙伴快来看看吧~ 深度学习 深度学习是机器学习的一个分支&#xff0c;它模仿人脑神经网络的工作原理进行复杂的…

linux使用anaconda服务

另一篇可以结合使用&#xff1a;python-miniconda安装及使用注意 安装 去 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/?CN&OD wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-5.3.1-Linux-x86_64.sh(这里选择浏览器下载&#xff…