【uni-app导入vant】

news2025/7/9 21:11:53

uni-app导入vant

      • 一、为什么要写这篇文章
      • 二、 安装vant
      • 三、 进行全局导入Vant组件
      • 四、 导入Vant全局公共样式
      • 五、 在页面中使用Vant组件

一、为什么要写这篇文章

相信有很多人在进行小程序转为uni-app的时候都会遇到转换后vant组件不能用的问题,为了解决这个问题本人打算写这篇文件来记录转换后导入vant的方法。

二、 安装vant

  1. 运行命令安装vant到uni-app项目中
# 首先进入到项目的根目录中
# 此命令安装的是支持Vue2的vant2.X,一定要注意vant的版本,目前用2是不会出问题的
npm i vant@latest-v2 -S
  1. 安装成功后可以在package.json中看到已经加入该依赖
    在这里插入图片描述
  2. 我们可以在根目录中看到下面的文件结构(之后我们使用的将是这个红色框中的目录中
    在这里插入图片描述

三、 进行全局导入Vant组件

在main.js中进行挂载Vant组件,主看带有编号的两步

import App from './App'
// 1. 导入Vant组件,这里的‘vant’就是我们上面新导入的vant的目录
import Vant from './node_modules/vant/lib/vant';


// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
// 2. 将Vant组件挂载到Vue上
Vue.use(Vant);
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

四、 导入Vant全局公共样式

在App.vue中进行导入

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/* 每个页面公共css,这个如果不引入的话会出现vant组件可以使用但是没有样式(注意后缀一定要带) */
	@import '@/node_modules/vant/lib/index.css';
</style>

五、 在页面中使用Vant组件

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<!-- <view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		<van-button type="warning">按钮</van-button>
		
		<van-dialog
			v-model="show"
		    title="弹窗标题 "
		>
		    我是弹窗
		</van-dialog>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Hello',
				show: true,
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

启动项目查看到下面的样式说明导入Vant成功
在这里插入图片描述

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

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

相关文章

前端开发:颜色代码速查表【英文颜色、HEX(十六进制)格式、RGB格式、十进制】

&#x1f48c; 作者简介 &#x1f4d6; 个人介绍&#xff1a;小伙伴们&#xff0c;大家好&#xff01;我是水香木鱼&#xff0c;【前端领域创作者】&#x1f61c;&#x1f4dc; CSDN主页&#xff1a;水香木鱼&#x1f4d1; 个人博客&#xff1a;陈春波&#x1f3a8; 系列专栏&…

Uniapp零基础开发学习笔记(4) -顶部导航栏titleNView的制作

Uniapp零基础开发学习笔记(4) -顶部导航栏titleNView的制作 制作顶部导航栏titleNView的过程。 1.官网上关于顶部导航栏的介绍 https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview 其中关于顶部导航栏的介绍中&#xff0c;有如下的说明&#xff1a; 前端…

一学就会的Vue slot插槽,真的不看看吗?(使用脚手架)

目录 一、前言 完整内容请关注&#xff1a; 开始前的准备&#xff1a; 二、slot插槽的基本使用 子组件&#xff1a; 父组件&#xff1a; 展示效果&#xff1a; 三、域名插槽的基本使用 子组件: 父组件: 效果展示: 注意&#xff1a; 四、如何通过slot从子组件获取内…

实测有效防止colab自动断开连接

在Firefox和Chrome中&#xff0c;在colab页面&#xff0c;按CtrlShiti&#xff0c;打开检查页面&#xff08;也可以右击鼠标&#xff0c;选择“检查”&#xff09;&#xff0c;并切换到控制台或terminal标签&#xff0c;chrome中为Console。 如果你是联想电脑&#xff0c;可以…

vue项目中使用mapbox地图,切换底图

如何在vue项目中加载并使用mapbox mapbox用了感觉确实不错&#xff0c;操作很顺滑&#xff0c;矢量切片体验流畅&#xff0c;地图主题定制化地图漂亮&#xff0c;二三维一体化&#xff0c;二三维切换很是简单&#xff0c;一行代码搞定。 基本使用 这是mapbox官方文档地址&am…

CSS伪类选择器

CSS的选择器有很多种&#xff0c;有一种选择器&#xff0c;与其他选择器完全不同&#xff0c;我们来讲一讲这个选择器——伪类选择器 伪类选择器 伪类选择器&#xff1a;用来描述一个元素的特殊状态&#xff01;比如第一个元素、某个元素的子元素、鼠标点击的元素 我们伪类选…

CSS系列之盒子阴影box-shadow(CSS3)

文章の目录1、属性值规则2、取值2.1、inset 内/外阴影2.2、<offset-x> <offset-y>水平阴影/垂直阴影2.3、<blur-radius>模糊距离2.4、<spread-radius>阴影的尺寸2.5、<color>阴影的颜色3、示例4、注意点写在最后用于在元素的框架上添加阴影效果。…

【javaScript】学完js基础,顺便把js高级语法学了(尚硅谷视频学习笔记)

文章目录【1】基本总结深入一、什么是数据1、数据类型基本&#xff08;值&#xff09;类型对象&#xff08;引用&#xff09;类型2、判断相关问题二、什么是内存1、什么是数据2、什么是内存&#xff1f;3、什么是变量4、内存、数据、变量三者之间的关系相关问题1、问题&#xf…

【web系列十一】使用django创建数据库表

目录 基本介绍 Model ORM 创建数据库的流程 安装插件 安装python中操作MySQL的库&#xff0c;这里用了django官方推荐的mysqlclient 创建数据库 连接数据库 1、工程同名app下的settings.py 2、子应用的models.py 3、子应用中的admin.py 生成数据表 1、更新数据表变…

element-ui 修改el-form-item样式

文章目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改buttonform结构 <el-form :model"formData" label-width"80px"><el-form-item label"label1"><el-input v-model"formData.value1&quo…

vue中使用wangEditor以及设置菜单栏

首先安装&#xff0c;我最开始是安装wangEditor v5版本的也就是安装方式是下面两个 npm install wangeditor/editor-for-vue --save npm install wangeditor/editor --save 但是最后跟着官网的视频教程安装好了&#xff0c;不能够运行&#xff0c;提示是&#xff1a;Module par…

antd中的form表单中的wrapperCol和labelCol问题

之前在学这块时候比较模糊 有点不熟 以至于在后来的开发过程中看别人的代码中的xs sm等 以及{span&#xff1a;8}也表示困惑&#xff0c; 但也不敢问大佬&#xff08;怕因为太简单而被嘲讽&#xff09;&#xff0c;只能自己去百度去了解&#xff0c;总算是有些眉目&#xff0c;…

vue xlsx插件导入

首先安装xlsx插件 yarn add xlsx0.15.3安装时候就有一个坑。版本问题第一次安装没有指定版本直接yarn add xlsx&#xff0c;安装的最新版本0.18多&#xff0c;会报XLSX没有read方法&#xff08;读取Excel表格对象的方法&#xff09; 具体代码 <el-upload class"uplo…

uniapp配置网络请求

1.简介 由于平台的限制&#xff0c;小程序项目中不支持 axios&#xff0c;而且原生的 wx.request() API 功能较为简单&#xff0c;不支持拦截器等全局定制的功能。因此&#xff0c;建议在 uni-app 项目中使用 escook/request-miniprogram 第三方包发起网络数据请求。 官方文…

JavaScript常见数组方法,教你如何转置矩阵

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础,后端 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【JavaScript】 &#x1f680;支持洋锅&#xff…

git提交规范,规范自己的提交标准

为了规范我的git提交内容&#xff0c;提交的时候commit -m “备注的信息”&#xff0c;但是每个人的备注信息千奇百怪&#xff0c;为了统一&#xff0c;我们进行了git的规范。 首先要全局安装commitizen npm i -g commitizen4.2.4然后安装插件 npm i cz-customizable6.3.0…

javascript获取url信息的常见方法

1、获取页面完整的url 1 2 var alocation.href; console.log(a); // “http://www.cnblogs.com/wuxibolgs329/p/5261577.html#flag?test12345” 2、获取页面的域名 var host window.location.host; //www.cnblogs.com var host2 document.domain; //www.cnblogs.com …

学生管理系统Element UI版

&#x1f482; 个人主页: 陶然同学&#x1f91f; 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦&#x1f485; 想寻找共同成长的小伙伴&#xff0c;请点击【Java全栈开发社区】…

微前端 - qiankun

前言 qiankun 是一个基于 single-spa 的微前端实现库&#xff0c;旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 本文主要记录下如何接入 qiankun 微前端。主应用使用 vue2&#xff0c;子应用使用 vue3、react。 一、主应用 主应用不限技术栈&#xff0c;只需…

前后端分离式交互

目录 前言 1.javaEE环境安装 第一步&#xff1a;正常创建javase项目 第二步&#xff1a;右击项目&#xff0c;引入框架支持 第三步&#xff1a;将项目部署到Tomcat服务器上。Tomcat安装及配置 2.servlet搭建 请求格式为&#xff1a;ip:端口/项目名/servlet地址 3.servl…