uniapp创建组件与vue官方文档的差异

于 2024-08-31 22:26:59 发布
阅读量235 收藏 3
点赞数 7
文章标签： vue.js uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p23gjj/article/details/141758761
版权

uniapp创建组件形式相对于官方文档的形式话要简单一点

uniapp创建组件:

另外,有一个注意点,如果你项目特别多的情况下,要先展开,选中这个文件夹,然后找到里面具体要运行的页面来运行,不然的话它是有可能启动不了的,因为它不知道你到底要启动那一个具体页面

选中整体项目名,而后右键点击新建,点击目录按照uni-app官网文档项目名称叫components

如果你右键点击components文件名能够出现新建组件的话,说明你文件夹起名起对了

如果没有出现新建组件的话,说明你起名起错了

创建组件有两种形式,父级为components

第一种使用驼峰,一般首字母大写,中间的话使用驼峰的形式,例如:UserInfo

第二种就是官方用的横线,前面为头部,例如:xxm-header

页面没有什么差异,并且script层默认创建的还是vue2的

我们先在新建组件页面写一些样式想输出看看,但是启动发现什么都没有

如果想看的话,需要输出的话写过来就可以了,在文件夹pages下面,index文件夹里面的index.vue页面清空,把想输出页面给调用可以即可,这样在原来组件写的样式效果就都过来了

而后在xxm-header页面写一个view输出,看有没有效果

事实证明一个页面可以使用多个组件,组件之间并不发生冲突

p23gjj
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是Uniapp以及Uniapp和Vue的区别
BCYHCH的博客
06-20 1万+
是一款基于Vue.js框架的跨平台应用开发框架，它具有跨平台开发、统一的开发语言和工具、独特的基于条件编译的代码生成技术、多种组件库支持等特点和优势。提供了多种应用程序部署方式，包括H5、微信小程序、支付宝小程序、百度智能小程序、头条小程序、QQ小程序、360小程序、App、快应用等。编写完成后，可以使用HBuilder X内置的打包工具，生成多种应用程序包，如H5、微信小程序、支付宝小程序、百度智能小程序、头条小程序、QQ小程序、360小程序、App、快应用等。、独特的基于条件编译的代码生成技术。
uniapp创建项目，使用扩展组件以及生命周期
官方小可爱√的博客
12-04 952
文章目录一、uni-app简单介绍什么是uni-app？uni-app的优点二、功能框架浏览图三、创建项目四、项目中使用扩展组件五、uniapp生命周期应用生命周期页面生命周期组件生命周期 一、uni-app简单介绍 什么是uni-app？ uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点 跨平台发行，运行体验更好 与小程序的组件、API一致； 兼容weex原生渲染，增加了开发效率高，但是由于w
深度分析：React Native、Flutter、UniApp、Taro、Vue的差异
热门推荐
以择人之心择己，以恕己之心恕人。
06-17 1万+
选择框架时，应根据项目需求、团队技能、性能要求和维护成本综合考虑。React Native和Flutter在跨平台开发中表现出色，适用于大多数移动应用场景。UniApp和Taro在多平台统一开发方面有独特优势，适合小程序和多平台发布需求。Vue.js作为Web开发的主力，可通过额外工具转化为原生应用。
uniapp和vue组件之间的传值方法（父子传值，兄弟传值，跨级传值，vuex）
铁锤妹妹的博客
10-31 1万+
在做vue项目或者uniapp开发微信小程序时，经常会用到组件之间传值，因此想总结记录下。
uniapp和vue的区别
On the way
07-07 8413
项目需要，最近看了一段时间的uniapp，再次整理了一下uniapp和vue的一些相同之处和不同之处，进行了一个区别对比。 1、组件/标签的变化 以前是html标签，现在是小程序标签。 p 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在，但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video 这些还在。 select 改成 picke
uniapp步骤(语法简单就是结合了微信小程序和vue)_uniapp是vue的语法小程序的文档
2301_82243710的博客
06-24 810
​ 4、数据绑定及事件处理同 Vue.js 规范，比如 @click=“btnClick” :num=“num”，同时补充了App及页面的生命周期​ 5、为兼容多端运行，建议使用flex布局进行开发。
vue2与vue3的差异（转载）
Turn_to_empty的博客
03-14 3145
vue2与vue3的差异
vue整合uniapp_uniapp教程|vue h5转换uni-app指南（vue转uni、h5转uni）
weixin_29382705的博客
12-23 591
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。首先注意2个前提：你的web站是适合手机屏幕的；你的H5代码是全后端分离的，uni-app只处理前端代码。一切从新建一个uni-app项目开始。然后依次进行文件处理1.把之前的vue web项目的前端代码copy到新项目下2.如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节...
uniapp地图组件（map）使用问题总结
m0_56344602的博客
10-21 4957
​ 前几个月写了一篇关于map组件的使用方式uniapp 地图组件（map）的使用总结，上个月我们公司将整个小程序进行了一次重构，地图这边也有很多修改的地方，看见小伙伴对于上一篇文章写的使用和有些功能有些不清楚。一直都想重新写一篇文章进行总结，因为工作原因（太懒了）一直没机会。正好趁这次1024活动于是决定将文章重新总结一下。
uniapp:使用 Vue.js 开发跨平台应用的前端框架
06-03
其次，uniApp基于Vue.js，这意味着开发者可以充分利用Vue的响应式数据绑定、组件化开发等特性。Vue.js的轻量级和易上手特性，使得开发人员能快速上手uniApp。同时，Vue.js的生态系统也能够为uniApp的开发提供丰富的...
详解vue中使用protobuf踩坑记
10-17
注意，你需要确保 Vue 组件正确引用了生成的 protobuf JavaScript 文件，并按照其 API 文档进行数据解码。 总的来说，在 Vue 中使用 protobuf 需要完成以下步骤： 1. 下载并配置 protobuf 编译器。 2. 编写 `.proto...
vue整合uniapp_vue h5转换uni-app指南（vue转uni、h5转uni）
weixin_36079903的博客
12-23 1040
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。一切从新建一个uni-app项目开始。然后依次进行文件处理把之前的vue web项目的前端代码copy到新项目下如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节...
vue ref和reactive区别
灰海
08-25 4655
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1112
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3插件原理
m0_46281382的博客
08-26 2340
简述vue3中use方法加载第三方插件原理
如何使用Vue 3和Type Script进行组件化设计
yang295242361的博客
08-27 1471
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1193
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 482
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值