vue3
Vue3 脚手架
1. 使用vue-cli创建脚手架 PowerShell vue create vue3_test # 创建vue3工程,vue-cli版本必须在4.5.13以上 PowerShell npm run serve # 运行工程 2. 使用vite创建脚手架 方式一: PowerShell npm i ......
对于Vue3和Ts的心得和思考
Vue3已经正式发布了一段时间了,各种生态已经成熟。最近使用taro+vue3重构冷链的小程序,经过了一段时间的开发和使用,有了一些自己的思考。 ......
vue3 + vite 调试时断点位置错误
vite-plugin-vue-setup-extend(版本0.4.0) 插件的问题,删掉就好了。 该插件用于解决script setup语法糖下,不方便直接指定name名称的问题。 在 vite/plugins/index.js 文件中 注释 export default function cr ......
Vue3的fetch和Axios
Vue3的fetch和Axios都是用于发送HTTP请求的JavaScript库,但是它们之间有以下几个区别:语法不同:fetch是浏览器原生的API,使用起来比较简单,而Axios是一个第三方库,需要通过npm安装后引入才能使用。功能不同:Axios提供了丰富的API来处理HTTP请求和响应,包括 ......
Vue2和Vue3之响应式原理详解
1 响应式原理 1.1 简介 在讲解之前,我们先了解一下数据响应式是什么? 所谓数据响应式就是建立响应式数据与依赖(调用了响应式数据的操作)之间的关系,当响应式数据发生变化时,可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作,可以是DOM更新,也可以是执行一些回调函数。 1.2 vue2和 ......
vue3基础练习
slot就是把标签传递进组件 实现同一个组件有不同的表现形式 同样因为组件就是自己制造的特殊标签,所以这儿也可以直接把组件传递到slot中 slot组件中,作用域的问题 传递进去的东西会替换掉slot,但是里面用的属性还是调用者的,也就是父组件中的{{}}变量直接调用父组件中data内容。 slot ......
初识Vue3
vue3.0 一、创建Vue3.0工程 1.使用 vue-cli 创建 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上 vue -- ......
初识vue3-setup语法糖,ref和reactive语法,computde计算属性,watch开启监听
vue3和vue2的区别 1,vue3首次渲染更快(Vue3在编译和渲染性能上有了很大的提升,主要是因为使用了Proxy代理和优化算法,使得组件可以更快的渲染) 2,diff算法更快 3,内存占用体积变得更小 4,打包体积变得更小 5,更好的ts支持(这里不是因为vue3是ts写的,所以更加支持ts ......
vue3中vue-router一个简单使用案例
![](https://img2023.cnblogs.com/blog/1202393/202303/1202393-20230325153048659-840207058.png)![](https://img2023.cnblogs.com/blog/1202393/202303/120239... ......
vue3中的setup含义
setup 是 Vue3 中引入的一个新的选项,用于替代 Vue2 中的 beforeCreate 和 created 钩子函数。 setup 选项是一个函数,它在组件实例被创建之前执行,并返回一个包含状态和方法等配置信息的对象。 具体来说,setup 选项的作用包括: 响应式数据:使用 Vue3 ......
vue3报错 Vue received a Component which was made a reactive object.
报错信息如下: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking ......
Vue3+vite项目中如何动态导入并创建多个全局组件
背景 实际开发项目中,有些时候我们需要通过全局注册多个自定义组件,但是每个组件都导入一次,将会导致代码很冗余。 实现方案 customComponents/index.js const files = import.meta.globEager("@/customComponents/*.vue") ......
vue3组件之间传值
父组件向子组件传值 1.简单的props方式 //fater.vue <div class="father"> <children :carr="arr" /> </div> <script setup lang="ts"> import children from './children.vue' ......
Vue3中使用pinia
Vue3中使用pinia Pinia是一个轻量级的、基于Vue 3的状态管理库,它的设计目标是提供简单易用的API,使得开发者能够更加便捷地管理Vue 3应用程序中的状态。与Vuex相比,Pinia更加轻量级和易于理解,适用于中小型应用程序。 Pinia的核心是store实例,每个store实例都包 ......
基于Vue3搭建ChantGPT前后端端源码及搭建教程-官方接口
ChantGPT很多,网上很多说的ChantGPT搭建及源码都是假的,无法使用的,自己研究了好几天,搞定了基于Vue3搭建ChantGPT前后端端源码及搭建教程,现在分享出来,有喜欢的朋友自行下载搭建,用的是openAPI官方接口和key。 搭建好的ChantGPT主要可以实现多聊天窗口,聊天记录导 ......
VUE3刷新页面报错:Uncaught SyntaxError: Unexpected token ‘<‘
今天用vue3配置嵌套路由时,发现刷新页面后,页面变为空白,打开控制台发现报错: Uncaught SyntaxError: Unexpected token '<' 解决方法: 修改vue.config.js文件: publicPath:"/", 注意不是: 登录后复制 publicPath:". ......
如何设置Vue3 + Vite + Tailwind + Typescript 的6个简单步骤
Vite Vue3 Vue Router4 Typescript Pinia Tailwind CSS Fonts & Icons - (As needed) 第一步 npm create vite@latest vue3 和 Typescript 在设置vite时候会被选择为选项 1.1 项目名字 ......
Vue3
Vue3.0 Devtools6.5.0 开发者工具下载和安装 1、官网地址下载: GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 2、下载安装 ①找到其main下的T ......
vue3 移动端 实现树形结构 tree
实现效果: ) 版本号: 1、需求是支持全选功能,网上找了许多 这里做个记录 这里使用的是vue-virtual-tree 感觉作者写的很详细 可以跳转查看 git地址 2、使用方法 (1)npm i @ysx-libs/vue-virtual-tree (2)main.js中引入 import ' ......
vue3+ts的toRef和toRefs用法
<template> <div> <h2>toRefs的使用</h2> <h3>姓名:{{ obj.name }}</h3> <h3>年龄:{{ obj.age }}</h3> <hr /> <h3>姓名:{{ name }}</h3> <h3>年龄:{{ age }}</h3> </div> </ ......
vue3中如何通过遍历传入组件名称动态创建多个component 组件
背景 在 vue3 中,如果使用 component,可以动态加载一个组件,例如 <!-- 直接创建 --> <component :is="Image" /> 这样会将已经定义好并导入的比如 Image 组件加载出来,但是如果将需要展示的自定义组件放在一个数组中,遍历展示,则无法展示成功。 <!- ......
从0搭建Vue3组件库(七):使用 glup 打包组件库并实现按需加载
使用 glup 打包组件库并实现按需加载 当我们使用 Vite 库模式打包的时候,vite 会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。所以打包的时候我们可以不让 vite 打包样式文件,样式文件将使用 gulp 进行打包。那么本篇文章将介绍如何 ......
Vue3中KeepAlive的使用
我们在开发一个功能是,经常会遇到从一个列表页面,点击列表项跳转到详情页面的需求,理想的情况下,从详情页面返回到列表页,应该回到跳转前的状态,可以继续浏览其他内容;但是在没做任何处理的情况下,返回列表页后,列表页会被刷新,回到初始的状态,这就与我们的预设不符;为了实现这样的需求,我们需要使用keep- ......
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口
在基于vue-next-admin 的 Vue3+TypeScript 前端项目中,可以整合自己的 .NET 后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操作,如消息提示、辅助函数、正则测试等等。本篇随笔介绍在Vue3+TypeScript 前端项目中全局... ......
vue的从0到1 p4—— vue2改vue3
背景:由于配置公司的vue2项目,什么东西都用不了很烦,我就重新卸载了vue2.9.6,参考文档:https://blog.csdn.net/qq_48736958/article/details/111405591 步骤: 1、卸载原有的版本,首先打开cmd,查看现有的vue版本 $ vue -- ......
Vue3 学习记录
VUE3 学习记录 模板语法 绑定文本值 <p>Using text interpolation: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> 绑定 Attribute <div v- ......
vue3+vite+ts:使用@符号,找不到模块
报错问题 情况说明:在.vue后缀的文件中 导入.vue组件 import Drawers from '@/components/Drawer/index.vue' 找不到模块“../../../../components/Drawer/index”或其相应的类型声明 解决办法 第一步 配置vite ......
Vue3 点击复制功能,利用vue-clipboard3
首先安装插件 vue-clipboard3 npm install vue-clipboard3 --save 然后在页面里面引入 <button class="btn" @click="copy()">点击复制</button> 建议用buttn标签,因为别的标签可能会失效 <script set ......
vue3+ts ckplayer播放监控视频
1、第一步下载ckplayer,然后把ckplayer复制到项目中public文件夹下 2、index.html引用ckplayer.js <script type="text/javascript" src="/ckplayer/ckplayer.min.js" charset="UTF-8" d ......