VUE3

## 1. 官方文档 [pinia官方文档地址](https://pinia.web3doc.top/introduction.html "pinia官方文档地址") [pinia-plugin-persistedstate数据持久化插件](https://www.npmjs.com/package ......

### 1. 背景 vue-router4.x版本，想在路由文件中引入并使用pinia后报错如下：  表面 ......

> 需求场景：弹窗组件需要支持自定义的插槽内容，删除的弹窗也要使用这个组件，只是样式不一样而已，希望在父组件使用删除弹窗的时候直接调用某个方法就可以显示弹窗 ### 组件模拟 `cuDialog` 假设我的弹窗组件有以下的props和事件 + dialogVisible：控制弹窗显示和隐藏 + ti ......

1. 装包 npm i unplugin-auto-import --save-dev 2. 在项目的 vue.config.js 中引入并使用 import { defineConfig } from 'vite' import uni from '@dcloudio/vite-plugin-un ......

一、环境 vue3，ElementPlus，@vue/cli 5.0.8，npm 9.6.7。 我在复制element plus官网的一些代码到vue3框架里测试时出现的问题。 二、不报错方法 图片位置删除lang=“ts”就不报错了 ......

一、环境 vue3，ElementPlus，@vue/cli 5.0.8，npm 9.6.7。 二、报错内容 在vue3框架，views文件夹下的AboutView.vue文件里，执行<el-button>Default</el-button>语句就会报错如下： Uncaught runtime e ......

vue3时间转换插件-Moment.js的使用 一.组件官网moment.js时间转换插件http://momentjs.cn/Moment Timezone 时区处理类库http://momentjs.cn/timezone/二.vue项目中使用我这里使用的是vue3的写法 npm install ......

# 目录 - [目录](#目录) - [初始化项目架构](#初始化项目架构) - [技术栈](#技术栈) - [工具类](#工具类) - [环境](#环境) - [搭建流程](#搭建流程) - [初始化项目](#初始化项目) - [初始化git](#初始化git) - [运行项目](#运行项目) - ......

```html ``` ```javascript // 表格中核心的js import { ref, onMounted, useSlots } from 'vue' const slots = useSlots() // 自动获取父组件传递过来的插槽 // 获取父组件过来的插槽数量，便于循环 c ......

使用element ui -el-table方式编写 功能点：点击全选/单选可以进行删除 <el-table :data="date" ref="grayscaleTableRef" min-height="288" max-height="510" style="width: 100%" head ......

## 3996 条路由？  `addRoute`函数用了大约1s才执行完毕。通过观察，发现居然有3996条路由记录 ......

解决方法 在package.json中的rules下加入 "no-unused-vars":"off" 即可 ......

# 【一】Vue3介绍 ## 1.性能的提升 - 打包大小减少41%： - Vue3采用了一种新的编译器，它能够生成更精简的代码，从而减小了打包后的文件大小。 - 初次渲染快55%, 更新渲染快133%： - Vue3对渲染过程做了优化，提高了首次渲染和更新渲染的速度。 - 内存减少54%： - V ......

# 【一】setup函数 - `setup`函数是用来替代Vue 2中的`data`、`methods`等选项的。 - 它是一个特殊的函数，它会在组件实例创建之前被调用，用于初始化组件的状态和行为 - `setup`函数可以定义变量和函数，并且可以使用ES6的`let`和`const`语法来声明变量 ......

# 【一】Vue3的变化 ## 【1】性能的提升 - 打包大小减少41% - 初次渲染快55%, 更新渲染快133% - 内存减少54% ## 【2】源码的升级 - 使用Proxy代替defineProperty实现响应式 - 重写虚拟DOM的实现和Tree-Shaking ## 【3】拥抱Type ......

Vue3快速上手 ​​​​​​​​​​​​ [TOC]  编辑 ## 1.Vue3简介 - 2020年9月18 ......

一.两种创建方式（vue-cli与vite） 1.vue-cli创建（构建工具是webpack） 打开cmd 运行命令 vue -V 检查vue-cli版本要在4.5以上。 cd desktop 进入桌面 创建一个文件夹 vue create vue3lx 此时创建成功。y 2.运用vite创建（新 ......

文档内容的显示： 在上一次https://www.cnblogs.com/webor2006/p/17510360.html文档管理模块还差文档的显示木有完成，所以接下来先将这块模块给收尾了。 增加单独获取内容的接口： 概述： 在前端页面文档查询时，只查询了文档的基本信息，其中文档的富文本内容是木有 ......

Vue 的数据流传递是单向的，也就说数据只能由父组件通过`props`传递给子组件，子组件无法修改父组件传过来的状态，这样做为了避免因为子组件修改父组件的状态而导致数据流混乱以至难以理解。所以千万不要在子组件中直接修改 props。 子组件如果想要将数据传递给父组件，就需要使用 Vue 提供的事件机 ......

本地项目调的好好的，刷新也没有毛病，扔到服务器上，第一次打开是正常的，再刷新下就404了，不知道什么原因。百度了下才发现问题所在 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), ro ......

vue3引入了Composition API，使开发者能够更灵活组织和重用组件逻辑。采用了基于Proxy的响应式系统，对虚拟DOM进行了优化等，提升了开发体验、性能 ......

1 <template> 2 <div> 3 <el-card style="height:80px;font-size: 30px;">二维码生成器</el-card> 4 <div style="display: flex;"> 5 <el-card style="width: 250px;ba ......

## 1. 问题 ### 1.1 场景 使用**Vue3 + setup**语法，使用`defineProps`时出现Eslint错误： ![](https://img2023.cnblogs.com/blog/2240374/202308/2240374-20230803101840773-197 ......

在使用antd upload组件时，大文件上传等待时长太久，在上传过程中想取消上传，即取消进行中的接口请求。不解释，上代码： ``` import axios from 'axios'; ``` ``` 上传文件 （注：支持pdf、png、jpg格式，大小不超过5M） ``` ``` const C ......

前面已经完成了基本框架搭建，下一步针对各个模块的封装以及实验 本章主要是针对pinia的状态模块实现 1. 创建Store 在src文件夹下创建一个store的文件夹，并在该文件夹下创建index.ts文件，内容如下： import type { App } from 'vue'; import { ......

记录下搭建vite + vue3 + ts + elementPlus项目的过程及遇到的问题。 建议使用pnpm安装依赖，npm切换到pnpm 链接地址：[https://www.pnpm.cn/installation]() 1. 运行环境 node -v v18.17.0 npm -v 9.8. ......

个人博客 前端：https://lujiesheng.cn 个人博客 后端：https://api.lujiesheng.cn 个人博客 运维：https://portainer.lujiesheng.cn # 1. 服务器准备 我采用的是 腾讯云轻量应用服务器（2C 4G 8M 80G），配置如下 ......

vite-plugin-svg-icons 预加载 在项目运行时就生成所有图标,只需操作一次 dom 高性能 内置缓存,仅当文件被修改时才会重新生成 安装 node version: >=12.0.0 vite version: >=2.0.0 yarn add vite-plugin-svg-ic ......

1.在vue3中有两种路由的引入方式 第一种 import { useRouter } from 'vue-router' const use_router = useRouter() use_router.push('/pathName') 第二种 import router from '@/ro ......

eg:父组件a.vue <AddAiDrawer :projectId="route.query.id" v-model="addAiShow" title="新增" type="spaceAi" @call-back-table="refreshTable" ></AddAiDrawer> //新 ......