uniapp 新建组件

1. 新建文件夹 components

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

2. 新建组件


3. 编辑组件

components/logo/logo.vue

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

4. 使用组件

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

pages/index/index.vue

html 复制代码
<logo></logo>

效果如下

相关推荐
timeguys20 分钟前
【前端】[vue3] [uni-app]使用 vantUI 框架
前端·uni-app
Aiden Targaryen3 小时前
Windows/MacOS WebStorm/IDEA 中开发 Uni-App 配置
java·uni-app·webstorm
想要飞翔的pig4 小时前
uniapp+vue3页面滚动加载数据
前端·vue.js·uni-app
会功夫的李白4 小时前
uniapp自动构建pages.json的vite插件
前端·uni-app·vite
TE-茶叶蛋4 小时前
Uniapp、Flutter 和 React Native 全面对比
flutter·react native·uni-app
特立独行的猫a8 小时前
uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台
uni-app·开源·harmonyos·鸿蒙·影视
七七小报11 小时前
uniapp-商城-61-后台 新增商品(添加商品到数据库)
uni-app
hbcui198411 小时前
uni-app x正式支持鸿蒙原生应用开发
uni-app·harmonyos·uni-app x
lqj_本人11 小时前
鸿蒙OS&UniApp制作支持多图上传的图片选择器:打造高性能移动端上传体验#三方框架 #Uniapp
华为·uni-app·harmonyos
好好的哦13 小时前
uni-app小程序登录后…
小程序·uni-app