uniapp 全局引入vant 组件库_uniapp vant

最新推荐文章于 2024-06-01 22:28:50 发布
最新推荐文章于 2024-06-01 22:28:50 发布
阅读量931 收藏 8
点赞数 16
文章标签： 运维 linux 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61068088/article/details/138985354
版权

最全的Linux教程，Linux从入门到精通

======================

  1. linux从入门到精通(第2版)

  2. Linux系统移植

  3. Linux驱动开发入门与实战

  4. LINUX 系统移植 第2版

  5. Linux开源网络全栈详解 从DPDK到OpenFlow

华为18级工程师呕心沥血撰写3000页Linux学习笔记教程

第一份《Linux从入门到精通》466页

====================

内容简介

====

本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。另外,本书还为读者提供了大量的Linux学习资料和Ubuntu安装镜像文件，供读者免费下载。

华为18级工程师呕心沥血撰写3000页Linux学习笔记教程

本书适合广大Linux初中级用户、开源软件爱好者和大专院校的学生阅读，同时也非常适合准备从事Linux平台开发的各类人员。

需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以点击这里获取！

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

一、创建uniapp项目 + vue3

在这里插入图片描述

二、通过npm安装vant
  • vue3项目，安装最新版Vant npm i vant
  • vue2项目，安卓vant2 npm i vant@latest-v2

  • node_modules中有@vant证明下载好了

在这里插入图片描述

三、main.js引入vant
  • uniapp项目中找到main.js文件
// #ifdef VUE3
import { createSSRApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
export function createApp() {
	const app = createSSRApp(App)
	app.use(Vant)
	return {
		app
	}
}
// #endif
四、在根目录下创建一个文件夹wxcomponents
五、在pages.json中配置

在这里插入图片描述
直接粘贴就行

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#f1f1f1",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-dropdown-menu": "/wxcomponents/dist/dropdown-menu/index",
			"van-dropdown-item": "/wxcomponents/dist/dropdown-item/index",
			"van-action-sheet": "/wxcomponents/dist/action-sheet/index",
			"van-area": "/wxcomponents/dist/area/index",
			"van-button": "/wxcomponents/dist/button/index",
			"van-card": "/wxcomponents/dist/card/index",
			"van-cell": "/wxcomponents/dist/cell/index",
			"van-cell-group": "/wxcomponents/dist/cell-group/index",
			"van-checkbox": "/wxcomponents/dist/checkbox/index",
			"van-checkbox-group": "/wxcomponents/dist/checkbox-group/index",
			"van-col": "/wxcomponents/dist/col/index",
			"van-dialog": "/wxcomponents/dist/dialog/index",
			"van-field": "/wxcomponents/dist/field/index",
			"van-goods-action": "/wxcomponents/dist/goods-action/index",
			"van-goods-action-icon": "/wxcomponents/dist/goods-action-icon/index",
			"van-goods-action-button": "/wxcomponents/dist/goods-action-button/index",
			"van-icon": "/wxcomponents/dist/icon/index",
			"van-loading": "/wxcomponents/dist/loading/index",
			"van-nav-bar": "/wxcomponents/dist/nav-bar/index",
			"van-notice-bar": "/wxcomponents/dist/notice-bar/index",
			"van-notify": "/wxcomponents/dist/notify/index",
			"van-panel": "/wxcomponents/dist/panel/index",
			"van-popup": "/wxcomponents/dist/popup/index",
			"van-progress": "/wxcomponents/dist/progress/index",
			"van-radio": "/wxcomponents/dist/radio/index",
			"van-radio-group": "/wxcomponents/dist/radio-group/index",
			"van-row": "/wxcomponents/dist/row/index",
			"van-search": "/wxcomponents/dist/search/index",
			"van-slider": "/wxcomponents/dist/slider/index",
			"van-stepper": "/wxcomponents/dist/stepper/index",
			"van-sticky": "/wxcomponents/dist/sticky/index",
			"van-steps": "/wxcomponents/dist/steps/index",
			"van-submit-bar": "/wxcomponents/dist/submit-bar/index",
			"van-swipe-cell": "/wxcomponents/dist/swipe-cell/index",
			"van-switch": "/wxcomponents/dist/switch/index",
			"van-tab": "/wxcomponents/dist/tab/index",
			"van-tabs": "/wxcomponents/dist/tabs/index",


### 最后的话

最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！

### 资料预览

给大家整理的视频资料：

![](https://img-blog.csdnimg.cn/img_convert/e746ec6937f509c1699135604410c76c.png)

给大家整理的电子书资料：

  

![](https://img-blog.csdnimg.cn/img_convert/0afa3e46f90c374c0e9dcd4a311d1e41.png)



**如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！**

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以点击这里获取！](https://bbs.csdn.net/topics/618635766)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

**

**[需要这份系统化的资料的朋友，可以点击这里获取！](https://bbs.csdn.net/topics/618635766)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
Java后时代
关注
  • 16
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app 多端操作引入vant 避坑亲测版~
a895544608的博客
02-10 1631
uni-app 小程序 h5引入vant 实测版！
小程序引入vant组件（已解决）
01-03
我找到方法了，你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除，之后再https://github.com/youzan/vant-weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到 ...
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 4656
解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。
uniapp 全局引入vant 组件库
m0_64373473的博客
09-12 4810
【uni-app】uniapp 全局引入vant 组件库。
uniapp引入vant UI
weixin_42040328的博客
04-16 828
直接引用node_modules文件里面的暂时没找到合适方法，有会的大佬可以分享下哈。第一种引用方法, 使用那个引用那个 或 根据需求引用。下载之后根目录会多一个node-modules。第二种使用easycom自动批量移入组件。在pages.json里面引用。/*每个页面公共css */
uniapp项目中引入vant
热门推荐
baogeprh的博客
05-17 3万+
uniapp项目引入vant-UI 引入方式和踩到的坑 uniapp框架可以写多端的项目和生成多端代码，在引入vant-UI时要确定是写那个端的项目，小程序端和H5项目引入vant组件是不一样的。这个对于刚用uniapp的搬砖人很不友好，容易搞错。今天简单把两种引入的方式在这里讲一下 希望能帮到一些人。 uniapp小程序引入vant方法 .在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级 2.前往https://github.com/youzan/vant-weapp下
微信小程序引入VANT组件的方法步骤
10-16
主要介绍了微信小程序引入VANT组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
a uniapp demo for vant-weapp示例.zip
02-04
uniapp版的vant微信小程序源码
uniapp如何安装vant
jakelihua
06-01 2955
uniapp如何安装vant
【前端 Uniapp】使用Vant打造Uniapp项目（避坑版）
Qianmoer的博客
01-30 3982
Uniapp 是基于 Vue.js 的开发框架，通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合，我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台，也对 Uniapp 实现了完美的支持。我们可以使用 Vant 提供的丰富的组件和功能，来快速开发一个漂亮、易用的移动应用。
在uniapp中使用VantUI组件库(微信版)
weixin_48888726的博客
11-08 1739
【代码】在uniapp中使用VantUI组件库(微信版)
学习整理 docker
wonder_dog的博客
05-31 320
nexus。
llama-factory微调大模型
05-31 505
微调或者全量调大语言模型，还包括deepseek,想找个快速的微调教程，网上暂时没有。原理：搭建环境太累了，还是docker环境镜像简单快捷。如果用本身的会自动从huggingface下载，2、拉去LLAMA-factory repo。3、要根据自己的目录调整启动镜像。这下不了（也没有提示）
运维开发详解
最新发布
modaoshi51991的博客
06-01 728
运维开发（DevOps）是开发（Development）和运维（Operations）的结合，旨在通过自动化和协作提高软件开发和交付的效率、速度和可靠性。DevOps强调文化、实践和工具的融合，以实现持续集成（CI）、持续交付（CD）和持续监控。Stack Overflow、Reddit的r/devops、DevOps相关的Slack和Discord社区。通过系统学习和实践，逐步掌握DevOps的核心概念、工具和实践，可以显著提高软件开发和运维的效率和质量。
Linux部署安装
Love_Ban的博客
05-29 1158
Linux: Linux是目前全球使用量最多的服务器操作系统（开源）其体系很强大，其分支有很多（数不胜数）,其目前主要的分支有：RedHat （红帽）、Debian、乌班图 （ubuntu）、CentOS等等。其在世界范围最大的使用分支是安卓。
如何在uniapp中引入vant组件库
05-03
要在uniapp中使用vant组件库，需要进行以下步骤： 1. 在uniapp项目中安装vant组件库，可以使用npm或者yarn进行安装，命令如下： ``` npm install vant -S ``` 或者 ``` yarn add vant ``` 2. 在`App.vue`文件中引入vant组件库的样式文件和组件库的注册方法，代码如下： ```vue <template> <div class="app"> <router-view/> </div> </template> <script> import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); export default { name: 'App', } </script> <style> </style> ``` 3. 在需要使用vant组件的页面中

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值