在项目中使用uni-app组件

最新推荐文章于 2024-04-21 09:11:27 发布
最新推荐文章于 2024-04-21 09:11:27 发布
阅读量773 收藏 2
点赞数
分类专栏： 前端 文章标签： vue.js 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51126511/article/details/124543325
版权

在项目中使用uni-app组件

本演示在HbuiderX软件中进行

以实例带入场景作为参考吧，我想使用uni-app的自定义导航栏，首先，我需要下载插件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

复制npm安装代码，然后对应新建项目目录终端粘贴安装
在这里插入图片描述

如图，产生了这样的目录

在这里插入图片描述

然后，在uni-ui->lib文件夹中找到我要的自定义导航栏组件

在这里插入图片描述

复制该文件夹到项目根目录下的commponents文件夹下面（如果没有该文件夹，新建一个）

在这里插入图片描述

之后在vue文件中引用

在这里插入图片描述

效果展示

在这里插入图片描述

刚开始可能会因为缺少某些插件而报错，但是软件会自动安装对应插件并且运行成功

绘绘～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp 项目创建与目录结构
huangdj321的博客
12-27 1847
uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。具有vue和微信小程序的开发经验，可快速上手uniapp。相对于开发者来说，减少了学习成本，因为学会uniapp后，即可开发出iOS、Android、H5，以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。...
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 730
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
uniapp unpackage里面没有componets组件uniapp运行到微信开发者工具,缺少components文件夹
黎小小的博客
05-26 851
项目用js创建的，创建的componts组件里面使用了ts语法，就不行，去掉lang="ts"即可，组件引入只能使用大写BjsSearch不能使用bjs-search的方式，而且组件中的所有样式，属性穿透都不能实现，嗐，找了半天。
uni-app入门及uni-app项目目录介绍
肖帅的博客
10-16 3303
uni-app项目路径介绍 介绍项目目录和文件作用 uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vue和微信小程序的开发经验，可快速上手uni-app 为什么要去学习uni-app？ 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Andr
在HBuilderX中创建的uni-app应用默认没有components目录
最新发布
听海边涛声
04-21 516
在HBuilderX中创建的uni-app应用默认没有components目录
uni-app开发中遇到的问题（持续更新...）
Serena_tz的博客
05-24 2535
去掉顶部导航栏 在pages.json里面进行配置： 去掉所有页面的顶部导航栏 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" "navigationStyle":"custom", "app-plus":{ "title
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
很好用的uni-app节点树组件！
06-23
很好用的uni-app节点树组件！
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板官网地址 平台兼容说明模板说明：基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器...
uni-app 组件里面获取元素宽高的实现
10-15
主要介绍了uni-app 组件里面获取元素宽高的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-app基础篇
linxuanasd的博客
04-10 1696
对vue的学习，通过这个会更好一些 首先来说，为什么会出现uni-app呢？ 就要从当前平台开发存在的的问题说起了，第一，多端泛滥，端很多，用户被分散，工程师需要适配的更多。第二，体验不好。第三，生态不丰富。 uni-app的产品特征 1.跨平台更多 并行的维护和升级，通过条件编译，跨端的过程中并不牺牲平台的特色。 2.运行体验更好 体验和小程序相同，引入了week原生渲染，效率高，使用局部渲染优化，其他部分还是用uni-app 3.通用的技术栈，学习成本低 使用的是微信小程序的api，以
uni-app 组件找不到问题常规解决办法
热门推荐
云间月
04-01 1万+
uni-app 组件找不到问题常规解决办法 1.确认文件是否保存 2.确认引用路径是否正确，特别是利用复制粘贴的引用路径最容易导致组件应用错误，这时候需要手动敲一遍路径 3.组件是否注册，引用的组件需要在 components:{ } 中注册，请注意书写规范为驼峰式 4.确认以上均没问题，请尝试重编译或者关闭编程环境，重启试试 5.如果以上均不能解决请针对具体问题寻找解决办法 ...
Uniapp开发小程序中，如何编写自定义组件(component)并实现传值
ShopWind的博客
08-18 3179
我们在做uni项目开发的时候，经常会遇到要使用一些通用的模块，比如一个弹窗，一组按钮，如果每个页面重复编写，比如会耗费很大的时间，也不利于系统的维护和管理，所以我们有必要把它写成一个通用的模块，以实现任意调用的目的。 所有的组件都会被定义在components目录下，如果您新建的项目中没有这个目录，也可以自己创建，如下就是一个被定义好的组件(shopwind-multpicker)结构: components/ shopwind-multpicker/ shopwind-multpicker.js
uni-app中引入和使用uViewUI
Mr_chen的博客
09-04 4245
????摘要 今天分享下 —— uni-app 中引入和使用 uViewUI 的一些基本知识，欢迎关注！ ????uni-app 引入uViewUI uViewUI 在 HBuilder X 的插件市场：https://ext.dcloud.net.cn/plugin?id=1593 uViewUI 官方地址：https://uviewui.com/ 1、npm 安装或者更新 uViewUI 1.1、安装 // 安装 npm install uview-ui 1.2、更新 已经安装想更新版本可
uniapp实现登录功能步骤
weixin_52312684的博客
06-05 2855
uniapp登录获取token
如何在项目中引入 uni-icons 组件
07-10
4. 现在，您可以在项目的任何组件中使用 `uni-icons` 组件了。例如，在某个组件的模板中，可以这样使用： ```html <uni-icons name="home"></uni-icons> <!-- 其他内容 --> ``` 请注意，上述示例中的 `...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值