【Vue3】知识汇总，附详细定义和源码详解，后续出微信小程序项目（3）
====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================
前情提要
🔺因为最近学习的vue语言，发现有很多细节的碎块需要汇总，所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义，和源代码解析，可以当作类似于英语单词一样瞄几眼，大概知道即可
那么话不多说我们开始吧
Vite
Vite 是一个现代的前端构建工具，它提供了快速的冷启动和即时热模块替换（HMR）。在 Vite 项目中，vite.config.js 文件用于配置项目的各种选项。以下是一个基本的 vite.config.js 示例：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
port: 3000, // 开发服务器端口
open: true, // 自动打开浏览器
},
build: {
outDir: 'dist', // 输出目录
minify: 'terser', // 压缩器，'terser' 或 'esbuild'
sourcemap: false, // 是否生成 source map
},
resolve: {
alias: {
'@': '/src', // 路径别名
},
},
});
-
插件:
plugins: [vue()]: 使用 Vue 插件来处理.vue文件。
-
开发服务器:
server.port: 设置开发服务器的端口号。server.open: 设置为true时，启动后会自动打开浏览器。
-
构建配置:
build.outDir: 指定构建输出的目录。build.minify: 选择压缩器，可以是'terser'或'esbuild'。build.sourcemap: 是否生成 source map 文件。
-
路径解析:
resolve.alias: 配置路径别名，例如将@映射到/src目录。
你可以根据项目需求进一步自定义 vite.config.js 文件。例如，添加 CSS 预处理器、配置环境变量等。
但是呢，我个人不太建议使用这个插件，最好还是自己import比较好喔！
uni-app交互反馈showToast的用法
它有好几种用法呢，比如显示消息提示框、加载动画和模态弹窗。显示消息提示框用uni.showToast，能设置标题、图标、是否防触摸穿透和显示时间。加载动画用uni.showLoading，可以显示一个加载动画，一般用于请求时间比较久的操作，比如文件上传。还有模态弹窗用uni.showModal，可以只有一个确定按钮，也可以同时有确认和取消按钮哦。
- 操作成功
uni.showToast({
title:"操作成功"
})
- 操作失败
uni.showToast({
title:"失败",
icon: "errer"
})
想这些类似的，以下便是总结：
showLoading加载和showModal模态框
showLoading 和 showModal 模态框，这些通常用于前端开发中的用户界面交互。具体来说：
-
showLoading：- 这是一个常见的方法，用于在页面上显示一个加载指示器（loading spinner）。当页面正在处理数据请求或者执行耗时操作时，通常会调用这个方法来告知用户当前正在加载。
- 例如，在发起 AJAX 请求之前调用
showLoading，在请求完成后调用hideLoading隐藏加载指示器。
-
showModal模态框：- 模态框是一种常用的 UI 组件，用于显示重要信息、提示用户输入或进行确认操作。模态框会覆盖在主内容之上，要求用户必须与之交互才能继续其他操作。
- 模态框可以包含各种内容，如表单、警告信息、成功消息等。
示例代码片段
假设使用的是 JavaScript 和 HTML 来实现这两个功能，以下是一些简单的示例代码：
uni.showLoading({
title: '加载中...',
mask: true //当进行加载的时候不允许实行后面的任务
});
setTimeout(()=> {
uni.hideLoading()
},2000)
<template>
<view class="">
分类页面
<button @click="remove">删除</button>
</view>
</template>
<script setup>
function remove(){
uni.showModal({
title: '是否删除？',
});
}
showLoading 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show Loading Example</title>
<style>
#loading {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
</style>
</head>
<body>
<div id="loading">Loading...</div>
<button onclick="showLoading()">Show Loading</button>
<script>
function showLoading() {
document.getElementById('loading').style.display = 'block';
}
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
</script>
</body>
</html>
showModal 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show Modal Example</title>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
</style>
</head>
<body>
<button onclick="showModal()">Show Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span onclick="hideModal()" style="float:right; cursor:pointer;">×</span>
<p>This is a modal!</p >
</div>
</div>
<script>
function showModal() {
document.getElementById("myModal").style.display = "block";
}
function hideModal() {
document.getElementById("myModal").style.display = "none";
}
</script>
</body>
</html>
🌼那么今天就到这里吧！
▲这次的知识汇总框架只是一次尝试，后续会陆续跟新vue系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！
一个小小的赞是对我最大的鼓励！
感谢你们看到这里，下次见~
原文地址：https://blog.csdn.net/Reeuse/article/details/143699941
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！