uniapp学习【vue3在uniapp中语法，启用element，使用uView UI】

均基于setup语法糖

1.Vue3 核心语法

1.1 响应式数据（核心！页面交互的基础）

Vue3 通过ref和reactive实现响应式（数据变化时，页面自动更新）

方法	适用类型	访问 / 修改方式	示例
ref	基本类型（Number、String、Boolean）	访问：变量名.value；修改：变量名.value = 新值	const count = ref(0); count.value = 1
reactive	对象 / 数组	直接访问 / 修改（无需.value）	const user = reactive({name: '张三'}); user.name = '李四'

<script setup>
import { ref, reactive } from 'vue'
// 1. ref示例（基本类型）
const username = ref('小白')
const age = ref(18)
const isShow = ref(false)
// 修改ref数据
const changeName = () => {
  username.value = 'Uniapp开发者'  // 必须用.value
}
// 2. reactive示例（对象）
const user = reactive({
  name: '张三',
  address: {
    city: '北京'
  }
})
// 修改reactive数据
const changeCity = () => {
  user.address.city = '上海'  // 直接修改，无需.value
}
// 3. reactive示例（数组）
const list = reactive([
  { id: 1, text: '学习Uniapp' },
  { id: 2, text: '学习Vue3' }
])
// 向数组添加元素
const addItem = () => {
  list.push({ id: list.length + 1, text: '学习Element Plus' })
}
</script>

1.2生命周期钩子（控制页面 / 组件的执行时机）

Uniapp 支持两种生命周期：Vue3 生命周期和Uniapp 页面生命周期。开发小程序时，优先使用 Uniapp 页面生命周期（更贴合小程序场景）。

1.2.1 Uniapp 页面生命周期（常用）

钩子函数	触发时机	常用场景
onLoad	页面加载时触发（只触发一次）	初始化数据、接收路由参数
onShow	页面显示时触发（每次切换到前台都触发）	刷新页面数据（如从详情页返回首页）
onReady	页面初次渲染完成时触发（只触发一次）	操作 DOM、初始化第三方组件
onHide	页面隐藏时触发（如切到其他 tab、退到后台）	保存页面状态
onUnload	页面卸载时触发（如关闭页面）	清理定时器、取消网络请求

1.2.2 Vue3 生命周期

常用onMounted（组件渲染完成）、onUnmounted（组件卸载）

<script setup>
import { onMounted, onUnmounted } from 'vue'
// 组件渲染完成时触发
onMounted(() => {
  console.log('自定义组件渲染完成')
})
// 组件卸载时触发
onUnmounted(() => {
  console.log('自定义组件卸载')
})
</script>

1.3 事件处理（页面交互的核心）

 1.3.1 绑定事件（@事件名）

@click（点击事件）、@input（输入事件）、@change（选择事件）

<script setup>
import { ref } from 'vue'
const selectedCity = ref('北京')
// 点击事件处理
const handleClick = () => {
  uni.showToast({ title: '点击成功' })
}
// 输入事件处理（e.detail.value是输入框的值）
const handleInput = (e) => {
  console.log('输入内容：', e.detail.value)
}
// 选择事件处理（e.detail.value是选中的索引）
const handlePickerChange = (e) => {
  const cities = ['北京','上海','广州']
  selectedCity.value = cities[e.detail.value]
}
</script>

1.3.2 事件传参（@click="handleClick(参数)"）

<script setup>
import { ref } from 'vue'
const username = ref('小白')
const handleSend = (msg) => {
  console.log('发送的消息：', msg)
}
const handleInputWithParam = (e, inputId) => {
  console.log(`输入框${inputId}的值：`, e.detail.value)
}
</script>

1.4 模板语法（渲染页面 UI）

1.4.1 文本渲染（{{ 变量名 }}）

<script setup>
import { ref } from 'vue'
const username = ref('小白')
const age = ref(18)
</script>

1.4.2 条件渲染（v-if/v-else-if/v-else）

根据条件显示 / 隐藏元素（v-if会销毁 / 创建元素，v-show只是隐藏 / 显示，频繁切换用v-show）

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
const toggleShow = () => {
  isShow.value = !isShow.value
}
</script>

1.4.3 列表渲染（v-for）

循环渲染数组或对象，必须加key（唯一标识，提高性能）

<script setup>
import { reactive } from 'vue'
// 循环数组
const list = reactive([
  { id: 1, text: '学习Uniapp' },
  { id: 2, text: '学习Vue3' }
])
// 循环对象
const user = reactive({
  name: '张三',
  age: 18
})
</script>

1.4.4  样式绑定（:class/:style）

<script setup>
import { ref } from 'vue'
// :class相关
const isActive = ref(true)
const isRed = ref(false)
const activeClass = ref('active')
const redClass = ref('red')
// :style相关
const fontSize = ref(32)
const textColor = ref('#333')
const toggleStyle = () => {
  isActive.value = !isActive.value
  isRed.value = !isRed.value
  fontSize.value = 40
  textColor.value = '#007aff'
}
</script>

2. Element Plus 引入与使用

Element Plus 是 Vue3 的 UI 组件库，需适配 Uniapp（部分组件需调整样式）

2.1 安装 Element Plus

打开 HBuilderX 的 “终端”（底部工具栏），输入以下命令（确保项目根目录正确）

npm install element-plus --save

等待安装完成（终端显示 “added xxx packages” 即成功）

2.2 全局引入 Element Plus

在main.js中全局引入 Element Plus 和样式，无需在每个页面单独引入

// main.js
import { createSSRApp } from "vue";
import App from "./App.vue";
// 1. 引入Element Plus
import ElementPlus from 'element-plus'
// 2. 引入Element Plus样式（必须引入，否则组件无样式）
import 'element-plus/dist/index.css'
export function createApp() {
  const app = createSSRApp(App);
  // 3. 注册Element Plus到Vue实例
  app.use(ElementPlus);
  return {
    app,
  };
}

2.3 常用组件示例（适配小程序）

Element Plus 的大部分组件可在 Uniapp 中使用，以下是常用组件的示例（注意：部分组件如ElMenu（导航菜单）在小程序中可能需要调整样式）

2.3.1 按钮

<script setup>
const handleBtnClick = () => {
  uni.showToast({ title: 'Element Plus按钮点击成功' })
}
</script>

2.3.2  输入框

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
const handleInputChange = (value) => {
  console.log('输入框内容变化：', value)
}
</script>

2.3.3 弹窗

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

2.3.4 列表

<script setup>
import { reactive } from 'vue'
// 表格数据
const tableData = reactive([
  { id: 1, name: 'Uniapp' },
  { id: 2, name: 'Vue3' },
  { id: 3, name: 'Element Plus' }
])
// 编辑事件（scope.row是当前行数据）
const handleEdit = (row) => {
  uni.showToast({ title: `编辑：${row.name}` })
}
</script>

2.4 小程序适配注意事项

1. 样式冲突：Element Plus 默认样式可能与 Uniapp 冲突，可在样式中用::v-deep穿透scoped修改组件样式：

   css

2. 组件尺寸：Element Plus 组件默认尺寸较大，可通过size属性（如size="small"）或自定义样式缩小尺寸，适配小程序屏幕。

3. 不支持的组件：部分 Element Plus 组件（如ElCarousel（轮播）、ElUpload（上传））在小程序中可能存在兼容性问题，建议优先使用 Uniapp 自带的swiper（轮播）、uni.chooseImage（图片选择）等 API。

3. uView UI引入与使用（推荐小程序组件库）

3.1 安装 uView UI

npm 安装

npm install uview-plus@3.1.32  # 3.x版本适配Vue3

手动下载（备用，适合无网络环境）

1. 前往 uView UI 官网（https://www.uviewui.com/）下载 3.x 版本压缩包
2. 解压后将uview-plus文件夹复制到项目components目录下

3.2  配置 uView UI（关键步骤，否则组件无法使用）

1. 引入 uView UI 样式

打开uni.scss文件（全局样式变量），添加

@import 'uview-plus/theme.scss';  // 引入uView主题变量

2. 配置全局样式

打开App.vue，在<style>中添加（不要加 scoped）

@import "uview-plus/index.scss";  // 引入uView全局样式

3. 注册 uView UI 到 Vue 实例

main.js

import { createSSRApp } from "vue";
import App from "./App.vue";
// 引入uView UI
import uView from 'uview-plus'
export function createApp() {
  const app = createSSRApp(App);
  app.use(uView);  // 注册uView
  return { app };
}

4. 配置 easycom 规则（自动引入组件，无需手动 import）

打开pages.json，添加 easycom 配置（组件库核心特性，自动按需引入）

{
  "easycom": {
    // uView UI的easycom规则
    "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
  },
  "pages": [/* 页面配置 */]
}

3.3 验证项目与组件库是否配置成功

打开pages/index/index.vue，替换为以下代码

<script setup>
import { showToast } from 'uview-plus'  // 引入uView的toast方法
const showToast = () => {
  showToast('uView UI配置成功！')
}
</script>

1. 点击 HBuilderX 工具栏运行 > 运行到小程序模拟器 > 微信开发者工具
2. 若微信开发者工具中显示蓝色按钮，点击后弹出提示框，则配置成功

3.4 使用

• uView UI 文档：https://www.uviewui.com/

按照官方文档使用就可以了，类似element