Uni-app + Vue3 页面组件介绍

uni-app 项目中，面组页面有两种：.vue 和 .nvue 文件。面组两者差异在于 .vue 文件使用 webview 进行渲染，面组.nvue 会使用原生进行渲染。面组

一个页面就是面组一个符合 vue 的单文件组件(SFC)规范的 .vue 或 .nvue 文件。

页面文件为实现多端兼容，面组综合编译速度、面组运行性能等因素，面组依旧遵循 vue 单文件组件规范。面组

组件特点：

组件是面组视图层的基本组成单元。组件是面组一个单独且可复用的功能模块的封装。

每个组件，面组包括如下几个部分：以组件名称为标记的面组开始标签和结束标签、组件内容、面组组件属性、面组组件属性值。

组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>是开始标签，亿华云</component-name>是结束标签。在开始标签和结束标签之间，称为组件内容。如下面示例的content。开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2。注意闭合标签上不能写属性。每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。

uni-app 支持的组件分为：

vue 组件。支持 vue SFC 规范。小程序自定义组件。组件规范不是 vue 规范，而是小程序规范。

日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。

什么是 vue SFC 规范？

我们开发的时候创建的 .vue 文件，亿华云计算用于表示一个单一组件。SFC 的全拼为 Single-File-Components，翻译为中文就是单文件组件。

一个完整的单文件组件，顶级标签有 template、script、style，还可以允许添加可选的自定义块：

<template> <view class="content"> 组件内容 </view></template><script setup lang="ts">import { ref } from vueconst title = ref(Hello)</script><style>/* 样式设置 */</style><custom1> This could be e.g. documentation for the component.</custom1>

vue-loader 会解析文件，提取每个语言块。能够支持使用非默认语言，如 css 预处理器，通过设置语言块的 lang 属性，如：

<style lang="sass"> /* write Sass! */</style>

Vue3 一大特点：能够更好地支持 typeScript ，因此：

<script setup lang="ts">import { ref } from vueconst title = ref(Hello)</script>

setup 是 vue3 的语法糖，使用 setup 可以自动导出定义的变量和方法。

模板<template>template 里面包含该组件的 html 结构，可以在该组件内使用其他组件，如果使用 setup 语法糖，导入的组件无需注册可以直接使用，如果不使用 setup 语法糖，就需要在 components 内注册组件。每个 .vue 只能有一个匿名的 template 标签，云服务器提供商插槽处使用的 template 需要加 v-slot 。不同于 vue2 template 标签内可以放多个根标签。脚本<script>不同于 vue2 ，每个 .vue 文件，可以有多个 script ，但是必须保证使用语法一致，不可以一个 js，一个是 ts 。vue3 中可以使用选项式 API，也可以使用组合式 API 。vue3 新增 setup 语法糖，可以大大简化代码。样式<style>默认匹配的是 .css ，也可以通过 lang 指定扩展类型 。一个 .vue 文件可以包含多个 style 标签，可以设置不同的 lang 属性。style 标签可以有 scoped 或 module 属性。自定义块

可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求，例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应地块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

小程序组件有哪些？

视图容器：view、scroll-view、swiper、match-media、cover-image 等。基础内容：icon、text、rich-text、progress。表单组件：button、checkbox、editor、from、input、picker、switch、textarea、label、radio等。页面路由跳转：navigator。媒体组件：audio、camera、image、video、live-player、live-pusher。地图组件：map。画布：canvas。webview ：web-view。广告：ad、ad-draw。页面属性配置：custom-tab-bar、navigation-bar、page-meta。

前端同学基本没有没开发过小程序的，简单介绍下，就不详细介绍具体用法了。