首页 > 其他分享 >uniapp 新建组件

uniapp 新建组件

时间:2024-01-02 13:37:26浏览次数:52  
标签:uniapp index 新建 文件夹 components 组件 logo


1. 新建文件夹 components

文件夹名称必须是 components ,否则组件无法自动导入

uniapp 新建组件_uni-app

2. 新建组件

uniapp 新建组件_uni-app_02

uniapp 新建组件_uni-app_03


uniapp 新建组件_uni-app_04

3. 编辑组件

components/logo/logo.vue

<template>
	<img src="https://img.alicdn.com/imgextra/i1/O1CN01EI93PS1xWbnJ87dXX_!!6000000006451-2-tps-150-150.png" />
</template>

4. 使用组件

因 uniapp 会自动导入 components 文件夹中的组件,所以直接在页面中使用即可

pages/index/index.vue

<logo></logo>

效果如下

uniapp 新建组件_uni-app_05


标签:uniapp,index,新建,文件夹,components,组件,logo
From: https://blog.51cto.com/u_15715491/9068237

相关文章

  • uniAPP IOS 端关闭滚动回弹效果
    进入pages.josn文件找到想要禁止回弹的页面,在对应的style中添加以下代码:{ //我的页 "path":"pages/mine/mine", "style":{ "navigationBarTitleText":"", "navigationStyle":"custom",//隐藏系统导航栏 &quo......
  • 安卓中ViewPager组件的使用场景与优劣分析
    一、文章摘要在Android应用开发中,ViewPager是一个非常重要的UI组件,它允许用户通过左右滑动的方式切换不同的页面视图。同时,ViewPager在Android开发中是一种常用的视图容器,主要用于在应用程序中实现滑动视图的效果。它通常用于分页展示内容,如图片轮播、标签切换等。本文......
  • React 类组件转换为函数式
    函数式的React组件更加现代,并支持有用的hooks,现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。通用替换定义从class(\w+)extendsComponent\{改为const$1:FC=()=>{这是没有export和props的场景从(export)defau......
  • 在 Django 中使用 Vue.js 组件的步骤如下³⁴: 1. **安装 Vue.js**:首先,你需要在你的开
    在Django中使用Vue.js组件的步骤如下³⁴:1.**安装Vue.js**:首先,你需要在你的开发环境中安装Vue.js³。2.**创建Vue组件**:在Vue.js中,你可以创建一个新的Vue组件。例如,你可以在`src/components`文件夹下新建一个名为`Home.vue`的组件¹。3.**在Django模板中引......
  • 『UniApp』uni-app-打包成App
    前言大家好,我是BNTang,在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。正文打包App也是一样的,首先需要配置关于App应用的基础信息,打开manifest.json:配......
  • 【vue】,封装的table组件,table表格超出高度自适应滚动效果,设置页面全局统一自适应高度
    需求背景:为了使后台页面的table列表页面始终保持统一的高度,无论我们的列表数据有多少都只占一个屏幕的高度,如果table表格的数据太多,只滚动table表格的数据,页面高度保持不变;使用window.onresize监听浏览器的高度://tableHeight:为el-table绑定的height高度;onMounted......
  • 结合 element -Plus组件库,压缩图片大小,限制图片格式
    业务背景:业务上需求满足上传的图片不能太大,但是有时候上传的图片确实超过了限制大小,所以前端这边可以将图片压缩再上传,亦或者是上传给后端接口的图片只能是指定格式,我们前端需要将图片后缀转化,也可以处理!封装的使用方法如下:使用canvas对图片进行压缩处理:/**压缩图片......
  • 使用Jenkins和单个模板部署多个Kubernetes组件
    前言在持续集成和部署中,我们通常需要部署多个实例或组件到Kubernetes集群中。通过Jenkins的管道脚本,我们可以自动化这个过程。在本文中,我将演示如何使用JenkinsPipeline及单个YAML模板文件(.tpl)来部署多个类似的Kubernetes组件,而不需要为每个组件提供单独的模板文件。问题背景参......
  • vue3 如何判断组件中的 slot 是否有填充?
    两种方法:1、通过this.$slots.name<divclass="btn-icon"v-if="$slots.icon"><slotname="icon"></slot></div>2、通过 useSlots判断<template><div><slot/><slot......
  • flask vue 在 pycharm中 pycharm 每次新建一个新的项目(虚拟环境) 都需要重新安装vue.
    在PyCharm中使用Flask和Vue.js,你可以按照以下步骤进行:创建一个新的项目:打开PyCharm,创建一个新的项目或者打开一个已有的项目⁴。安装Flask:在PyCharm的设置(Settings)中,选择PythonInterpreter选项,点击+号按钮,搜索flask,并点击InstallPackage按钮⁴。安装Vue.js:在......