Uni-app使用vant和uview组件

已于 2023-05-29 08:16:01 修改
阅读量1.7k 收藏
点赞数 1
分类专栏： 小程序 文章标签： uni-app vue.js 前端
于 2023-02-23 16:34:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46549023/article/details/129182868
版权

目录

1.安装vant组件

1.1安装前需知

 1.2.安装

1.3.创建uni-app项目

2.安装uview-ui组件

2.1官网

2.2安装 

2.3安装成功

1.安装vant组件

1.1安装前需知

小程序能使用vant-weapp组件，且官网的安装是直接导入小程序中，不能直接导入uni-app框架中

Vant Weapp - 轻量、可靠的小程序 UI 组件库

 1.2.安装

再github上下载https://github.com/youzan/vant-weapp/releases

其中目录为

讲里面的组件引入自己新创建的wxcomponents文件中且必须是这个名字

1.3.创建uni-app项目

结果成功

2.安装uview-ui组件

2.1官网

uView UI

在线文档介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)

2.2安装 

如果没有pages.json

npm init -y 

安装对应依赖

npm install [email protected] 

在main.js中引入

import uView from "uview-ui";

Vue.use(uView); 

在pages.json引入对应

easycom是一种引入规则，不需要导包就可以使用

	"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

2.3安装成功

景庆197
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app中使用vant注意事项
soooyoung的博客
12-08 6526
需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).) 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn/vant/van.
uni-app调用vant组件或uview组件
weixin_55518113的博客
06-11 267
3.把node-modules中下载vant里面的dist文件夹拿出来放在wxcomponents里。2..把node-modules中下载uview-ui拿出来，放在跟pages同级的位置上。4.在pages.json中找到globalStyle，跟它平级加入easycom。6.在pages.json中找到globalStyle，跟它平级加入easycom。4.在uni.scss上引用。最后就可以直接使用组件了~~3.在main.js中引入。5.在App.vue上引用。
uView、ColorUI与Vant框架的深入分析与案例实践
最新发布
chenchuang0128的博客
07-10 710
在未来的移动开发中，我们将继续探索更多优秀的框架和技术，为项目的成功提供有力支持。虽然ColorUI的组件数量有限，但我们通过组合使用已有的组件和自定义样式，成功实现了产品的UI设计。通过利用uView丰富的组件库和强大的自定义能力，我们快速搭建了风格统一的页面，并实现了个性化需求。在开发一款移动商城应用时，我们选择了Vant框架。同时，通过结合其他工具和库，我们也实现了对Vant的定制和扩展，满足了项目的特殊需求。组件丰富：uView提供了大量高质量的组件，涵盖了常见的UI元素，减少了开发者的开发时间。
vant组件改为 uview-plus 组件的时分秒组件
qq_30405009的博客
06-27 421
项目中本来使用过了vant 的组件，但是uniapp 和vant并不兼容，除了几个普通的组件能用之外，想使用弹窗的话vant就完成不了了，还好uniapp官方支持的 uview-plus 支持vue3，就给项目更换了。之前使用vant封装的组件这时候也不能使用了 ，只好更换组件，最麻烦的是组件功能类似，时间传递方式传递参数却变了，真是糟心那！经过两天的组件改写总算是完成了 uview-plus 的年月日时分秒的组件封装，还有默认时间的选择，全套代码哦！
uniapp引用uView和vant Weapp组件
admin_W_KP的博客
03-09 2668
uniapp的引入UI组件库（uview、vant Weapp）
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
张伟的专栏
05-02 559
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)_热爱生活的大辉的博客-CSDN博客
uni-app 请求拦截器
11-11
【uni-app请求拦截器】是基于uni-app框架实现的一种机制，它允许开发者在发送网络请求前和接收到响应后执行自定义的操作。这种机制对于统一处理请求头、数据格式、错误处理以及添加全局的请求前后的逻辑非常有用，极...
uni-app实战项目.zip
09-11
1. 第三方库集成：uni-app支持引入第三方库，如 vant、element-ui 等，丰富UI组件库。 2. 插件市场：HBuilderX提供了丰富的插件市场，可以快速添加功能，如地图、支付等。 3. 自定义组件开发：为了满足特定需求，...
uniapp框架-uniapp选择器,包含一级,二级级联,三级级联uni-app项目源码-vue语法格式.zip
05-21
它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和插件生态系统，为开发者提供了丰富的资源和技术支持。从多级选择器到自定义导航栏，再...
详解VUE项目中安装和使用vant组件
10-17
VUE项目中安装和使用vant组件涉及的技术知识点主要包括以下几个方面： 1. VUE和vant组件库简介 VUE.js是一套构建用户界面的渐进式JavaScript框架，而vant是一个移动端Vue组件库，由有赞前端团队开发。它遵循Vue的...
vue+vant的一个移动端的框架.zip
05-20
平时总是用到下面的三个tab固定，页面的主体内容随tab切换而改变。我这里就直接写了一个空的模板。都是最简单的东西。里面前端框架是vant。首先要下载包依赖npm install 然后npm run dev 就能看到效果了。其实是最简单的东西。对于初学者学习看一下路由相关的知识还是有点作用的
微信小程序引入Vant组件库过程解析
11-30
前期准备 Vant Weapp组件库： https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端： 然后初始化一个package.json文件：输入命令：npm init 然后一路回车默认的即可： npm init 项目就回产生一个package.json文件： { "name": "miniprogram", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 1967
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 6038
解决方法，修改 ~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框架过程
zhu_liu_kun的博客
06-07 1101
1.安装# 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp --production。
如何在uniapp-vue3引入vant4 ui库
qq_40987210的博客
02-22 2735
如何在uniapp-vue3引入vant4 ui库
uniApp 引入iview
weixin_45289656的博客
11-26 1359
uniApp 引入iview。
1、熟练使用 Vue 全家桶(vue-cli、 vue、 vue-router、 vuex) 2、拥有Vite+Vue3+Ts的完整项目开发实战过程，开发复杂大型项目的经验(创建项目到打包上线 0-1) 3、熟练 Es 6语法， 配合 vue 进行开发； 4、熟练使用 Bootstrap、 Element-ui、Element Plus、 Uview、 Vant等 ui 框架进行前端开发； 5、熟练使用 lodash.js 高性能工具库， 多种插件如进度条 树形表格 vue 动画库 ... ； 6、精通 HTML 5和 CSS 3等前端开发技术， 熟悉移动端的常用布局技巧； 7、熟悉 Git、Svn 版本管理工具 ，npm/yarn/pnpm 包管理工具； 8、熟悉使用 Echarts 制作图表； 9、熟悉微信小程序开发， 可结合官方文档自主开发小程序； 10、手写简单 node.js 服务， 优化打包、 部署上线,了解 nginx 服务器...
02-16
你的问题是关于前端开发技能的，请允许我用中文回答。 以上列出的10个技能要求主要涉及以下几个方面： 1. Vue全家桶的使用。Vue是一款流行的前端框架，包括vue-cli、vue、vue-router和vuex等。熟练使用这些工具可以提高开发效率，并且方便构建复杂的Web应用程序。 2. Vite Vue3 Ts项目开发。Vite是一种新型的前端构建工具，结合Vue3和TypeScript使用可以提高开发效率。拥有项目开发实战经验可以加深对这些工具的理解，并且可以更好地解决开发过程中遇到的问题。 3. Es6语法的熟练掌握。Es6是JavaScript的新版本，包含许多新的语法特性。熟练使用这些特性可以提高代码质量和可读性，同时也可以提高开发效率。 4. UI框架的使用。Bootstrap、Element-ui、Element Plus、Uview和Vant等UI框架可以快速构建现代化的用户界面，提高用户体验。熟练掌握这些框架可以提高开发效率。 5. 高性能工具库的使用。lodash.js是一个JavaScript工具库，包含许多常用的工具函数。进度条、树形表格、vue动画库等多种插件可以提高Web应用程序的交互体验。 6. HTML5和CSS3的熟练掌握。HTML5和CSS3是Web前端开发的基础技术，熟悉它们的用法可以创建现代化的用户界面。同时，了解移动端的常用布局技巧也可以提高用户体验。 7. 版本管理和包管理工具的使用。Git和Svn是常用的版本管理工具，npm/yarn/pnpm是常用的包管理工具。熟练掌握这些工具可以更好地管理项目代码和依赖。 8. Echarts的使用。Echarts是一款流行的数据可视化工具，可以帮助开发者快速创建交互式图表，以展示数据。 9. 微信小程序开发。微信小程序是一种轻量级的应用程序，可以在微信平台上运行。熟悉微信小程序开发可以帮助开发者创建小程序并提供优秀的用户体验。 10. Node.js服务的优化和部署。Node.js是一种JavaScript运行环境，可以构建高性能的网络应用程序。了解Node.js可以优化打包和部署Web应用程序，同时了解Nginx服务器也可以提高Web应用程序的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值