标签: vue3

提示

主要是介绍该如何上手开发使用

配置特别强调

#加密秘钥
VITE_APP_SEART_KEY=
#加密向量
VITE_APP_IV=
#tinymce的api_key
VITE_APP_TINYMCE_API_KEY=

游鹄君2026/6/27大约 4 分钟

快速开发二(开发规范和路径)

公共资源

提示

经过实际检验,该项目逐渐废弃enum的定义.改为全部使用联合类型

svg资源

位于

src\common\svg\svg-icon.ts

<script setup>
//加载动画
import { LOADING_SVG } from "@/common/svg/svg-icon";
</script>

游鹄君2026/6/27小于 1 分钟

快速开发三(加密和解密)

页面加解密传值

有时候处理复杂业务逻辑,需要在页面之间传递一些敏感信息,比如用户信息,订单信息等,但是又不想在页面之间传递明文,所以需要对传递的信息进行加密,然后在页面之间传递加密后的信息,在接收端解密后再使用.

加密

示例:

//系统
import { useRoute } from "vue-router";
//工具
import { encryptData } from "@/utils/crypt";

//初始化路由
const router = useRouter();

const encryptString = encryptData('{"id":1,"name":"张三"}');
    router.push({
      name: "RouteName",
      query: { repalceObjectString: encryptString }, // 注意：query参数建议序列化，避免对象类型问题
    });

游鹄君2026/6/27小于 1 分钟

vue3的基础使用(三)

事件总线-非父子组件通信

安装

pnpm install mitt

游鹄君2026/5/16大约 1 分钟

vue3的基础使用(一)

ref()和reactive()

ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

可以看出，ref() 函数返回一个可变的响应式 ref 对象，它包含一个名为 value 的属性，我们可以通过 .value 访问其中的值：

//初始化加载样式
const loading = ref(true);
//是否开启弹窗
const dialogVisible = ref(false);
//弹窗标题
const dialogTitle = ref("");

//添加用户
const handleAddUser = () => {
  dialogTitle.value = "添加顶级用户";
  dialogType.value = 10;
  dialogVisible.value = true;
};

游鹄君2026/5/13大约 2 分钟

vue3的基础使用(二)

计算属性,defineModel(),watch()侦听器

示例用户列表的分页(父组件)

下面代码父组件定义计算属性和侦听器

src\pages\laravel-fast-api\v1\user\user\userList\index.vue

<!-- 分页区开始 -->
<template #paginate>
<div>
	<YhPaginate
	v-model:current-page="currentPage"
	v-model:page-size="pageSize"
	v-model:total="total"
	:page-sizes="[5, 10, 20, 30, 40, 50,100]"
	/>
</div>
</template>
<!-- 分页区结束 -->

<script setup lang="ts">
//搜索查询条件
const where = ref({
  //查找内容
  find: "",
  //查找下标
  findSelectIndex: 0,
  //时间范围
  timeRange: [],
  //是否禁用
  switch: null,
  //排序方式
  sortType: 2,
  // 0 不导出 1导出
  isExport: 0,
  // 导出类型 1本页 2全部
  exportType: 1,
  // 分页
  currentPage: 1,
  //每页条数
  pageSize: 10,
  //数据总数
  total: 0,
});
//将分页处理定义为计算属性
//当前页
const currentPage = computed({
  get() {
    return where.value.currentPage;
  },
  set(newValue) {
    where.value.currentPage = newValue;
  },
});
//页面条数
const pageSize = computed({
  get() {
    return where.value.pageSize;
  },
  set(newValue) {
    where.value.pageSize = newValue;
  },
});
//计算总数
const total = computed({
  get() {
    return where.value.total;
  },
  set(newValue) {
    where.value.total = newValue;
  },
});

//侦听分页变化
watch([currentPage, pageSize], () => 
{
	getUserList()
})
</script>

游鹄君2026/5/13大约 6 分钟

快速开发四(组件使用篇)

提示

该章节主要介绍vue3-element-admin-youhujun 的组件使用

游鹄君小于 1 分钟

上传组件使用

图片上传

单图上传

示例:

<template>
	<UploadSinglePicture 
	:upload-data="{type:null, use_type:20, file_type: '', save_path: 'picture'}"
	type="image"
	show-content="轮播图片"
	:is-show-button="true"
	v-model:upload-picture-uid="createForm.album_picture_uid"
	v-model:upload-picture-url="uploadPicutreUrl"
	/>
</template>
<script setup lang="ts">
//公共组件
import UploadSinglePicture from "@/pages/laravel-fast-api/v1/components/element/Upload/UploadPicture/UplaodSinglePicture.vue"

//上传图片回显
const uploadPicutreUrl = ref("");
</script>

游鹄君小于 1 分钟