【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', // 路径别名
    },
  },
});

1. 插件:

   • plugins: [vue()]: 使用 Vue 插件来处理 .vue 文件。

2. 开发服务器:

   • server.port: 设置开发服务器的端口号。
   • server.open: 设置为 true 时，启动后会自动打开浏览器。

3. 构建配置:

   • build.outDir: 指定构建输出的目录。
   • build.minify: 选择压缩器，可以是 'terser' 或 'esbuild'。
   • build.sourcemap: 是否生成 source map 文件。

4. 路径解析:

   • resolve.alias: 配置路径别名，例如将 @ 映射到 /src 目录。

你可以根据项目需求进一步自定义 vite.config.js 文件。例如，添加 CSS 预处理器、配置环境变量等。

但是呢，我个人不太建议使用这个插件，最好还是自己import比较好喔！

---

uni-app交互反馈showToast的用法

它有好几种用法呢，比如显示消息提示框、加载动画和模态弹窗。显示消息提示框用uni.showToast，能设置标题、图标、是否防触摸穿透和显示时间。加载动画用uni.showLoading，可以显示一个加载动画，一般用于请求时间比较久的操作，比如文件上传。还有模态弹窗用uni.showModal，可以只有一个确定按钮，也可以同时有确认和取消按钮哦。

• 操作成功

uni.showToast({
   
	title