VUE3
vue3 获取asset文件夹下所有资源文件列表
import path from "path"; const getLayerBgs = function () { const imgs: any = []; // 获取所有背景图层 //读取文件的路径 是否遍历文件的子目录 匹配文件正则表达式 const files = require.cont ......
vue3自定义指令实现el-select下拉加载更多
1. 新建js文件 export default (app) => { app.directive('loadmore', { beforeMount(el, binding) { const element = el.querySelector('.t-select__dropdown'); el ......
Vue2.0版本升级到vue3.0
vue版本的升级主要步骤： 一、首先需要卸载你之前的vue2.0版本 输入cmd–>回车–>进入dos界面输入命令查询vue的版本： vue -V or vue -Version 输入命令卸载目前vue版本： npm uninstall -g vue-cli 再输入vue版本查询命令，提示“不是可执 ......
Vue3+typescript如何给元素添加一个Ctrl+s的事件，用于保存文件？
如下代码，建议用这个，e.keyCode 已经过时，后面都是用 e.key:string. onMounted(() => { window.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key 's') { // 检查是否按下了 C ......
【前端可视化】大屏scale适配vue3 hooks
useScalePage.js import { onMounted, onUnmounted } from 'vue'; import _ from 'lodash'; /** 大屏适配的 hooks */ export default function useScalePage(option) ......
Vue3实现组件级基类的几种方法
Vue3的组件有三种代码组织方式 纯Option API （不含setup） option API + setup 纯 setup （即composition API） 对于这三种形式，设置基类的方法也略有不同。 使用 mixins、extends vue3提供了 mixins和extends，但是 ......
初识esbuild、构建vue3脚手架
esbuild 非常快速的 web 打包器,使用 go 语言编写。 📦 特点： 无需缓存也能很快速的编译打包。 内置 js、css、ts、jsx 类型文件编译。 支持 es6 和 commonjs 模块。 可以编译打包成 esm 模块和 common JS 模块 tree shaking 摇树优化 ......
Vue3路由正确写法
import { createRouter, createWebHistory } from 'vue-router' import Home from '@/view/Home.vue'; import Login from '@/view/Login.vue' const routes = [ ......
vue3 ts 项目文件夹解析
vue3 ts 项目文件夹解析 layouts 文件夹通常用于存放应用程序中的布局组件或布局相关的文件。 布局组件是用于包装应用程序中的页面内容的组件，通常包含头部导航、侧边栏、页脚、页面标题等等。布局组件可以在不同的页面中共享，并且可以为应用程序带来一致的外观和体验。 core 存放应用程序中的核 ......
Vue3 实现印章徽章组件
Vue3 实现印章徽章组件 需要实现的组件效果： 该组件有设置颜色、大小、旋转度数和文本内容功能。 一、组件实现代码 组件代码文件结构： src/components/StampBadge/src/StampBadge.vue 文件代码： <template> <div class="first-r ......
WIN7下安装VUE3.0
1、准备工作（你可以检查，清楚的话可以不用管） 1.1、检查nodejs版本：node -v 1.2、检车npm版本:npm -v 1.3、查看VUE脚手架版本:vue --version或vue -V（大写的V） 1.4、卸载VUE2版本命令：npm uninstall vue-cli -g 1. ......
pinia vue3 ts 切换到其他页面后再切回来数据不见了
pinia vue3 ts 切换到其他页面后再切回来数据不见了 刷新有数据，但是切换到其他页面后再切回来数据不见了，我需要切回来后数据还有。 因为我的数据是刷新的话就会watch监视数据有没有改变，但是切换其他页面不会触发 我应该把得到的数据存储到store里面 这样切换其他页面也不会消失 ......
vue3 ts 写搜索联系人功能逻辑
vue3 ts 写搜索联系人功能 vue <input type="text" v-model="search" placeholder="Search contacts"> <template v-for="(item, index) in filteredData" :key="index"> ......
html文件中使用vue3+element-plus开发模版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content ......
vue3+ts 数据双向绑定
在 Vue3 中使用 TypeScript 实现数据双向绑定，主要需要以下几个步骤： 1. 创建组件 首先，需要创建一个组件，定义组件所需要的属性和方法，并使用装饰器 @Component 对组件进行装饰，以便可以在 Vue 中使用。 ```typescript import { Component ......
安装多个NodeJS windows上安装多个Nodejs版本 解决vue2/vue3同时运行
第一步下载nvm-windowsnvm-windows 下载地址：Github最新下载地址 进入之后直接下载 第二步 安装NVM 注意路径一定不要包含空格 中文否则会报错 注意安装路径一定不要包含空格 中文否则会报错 点击安装之后 如果之前安装了nodejs的话会提示 希望nvm管理已安装node ......
vue3 props 双向绑定
官网：https://cn.vuejs.org/guide/components/v-model.html 首先，引用官网一句话:在大多数场景下，子组件应该抛出一个事件来通知父组件做出改变。 一般情况父子组件props 是父组件传递值给子组件，子组件使用。有个别情况子组件更新父组件的传值。 父组件： ......
vue2与vue3的区别
一. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。 vue3 中使用了 es6 的 ProxyAPI 对数据代理。 相比于vue2.x，使用proxy的 ......
vue3+vuesax 安装错误 not find module 'chalk'
vue3中安装vuesax组件库报错 ERROR not find module 'chalk' 解决过程: 安装chalk 继续报错 安装旧版本chalk 解决错误 npm i chalk@4 ......
Vue3中ref和reactive的对比
先说ref()和reactive() Vue3这两个API作用是相似的，只不过ref()是针对变量的响应式包装，而reactive()是针对对象的响应式包装。 ref()和reactive()对比 API 说明 目标 ref() 传入一个值，返回一个响应式的变量 变量 reactive() 返回一个 ......
vue3 ref、computed、watch...
setup() { let jg = reactive({foor:'bar',far:{ a:'ccc' }}) // 解构赋值 foor 为一个普通变量 没有响应式 // 解构赋值 far 为一个响应式,far获得了Proxy的引用 let { foor ,far} = jg function ......
vue3中使用pinia
//npm install pinia //在mian.ts中引入pinia，然后在createApp中use(pinia)即可 import {createPinia } from 'pinia' const pinia=createPinia() createApp(App).use(route ......
vue3 uniapp Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions') 报错
引发这个问题是在三级页面中使用uni.navigateBack({ delta: 2 })返回到一级页面 再重一级页面进入二级页面 二级页面中引用的组件引发的emitsOptions报错 //原因：我在二级页面中的组件使用ts的emit写法引发的报错 const emit= defineEmits< ......
vue3中useRouter和useRoute的使用
vue3路由新玩法useRoute和useRouter详解 原文链接 原来的vue2路由是通过this.$route和this.$router来控制的。 现在vue3有所变化，useRoute相当于以前的this.$route，而useRouter相当于this.$router 一、useRoute ......
Vue3 + element-plus使用注意
1.给组件设置ref="xxx" 例如： <el-table ref="tableRef" 定义tableRef时，需要注意尽量使用 ref() 而非 ref(null) const tableRef = ref(); 因为使用ref(null）会得不到$el的相关属性，即 undefined 例如 ......
vue3+vite自适应PC端
1、下载包pnpm add lib-flexible-computer postcss-px2rem px2rem-loader -D2、在main.ts里引入import "lib-flexible-computer";3、在vite.config.ts写入import px2rem from " ......
Vue3中slot插槽使用方式
********************************** Vue3中slot插槽使用方式****************************************************参考：https://huaweicloud.csdn.net/638eab83dacf622b ......
Vue3 调用本地服务接口失败三次提示下载并安装本地服务
Vue3 调用本地服务接口失败三次提示下载并安装本地服务 Vue3 调用本地服务接口，如果失败，则再尝试调用 2 次，如果 3 次都失败了，就提示下载本地服务 exe 安装包，并提供下载链接，请告诉我实现的代码 以下是一个用于调用本地服务接口，并在失败时尝试重新请求，尝试重新请求 2 次，如果仍然失 ......
Vue3---error xx should be on a new line
ESLint: ':render-header' should be on a new line.(vue/max-attributes-per-line) 此问题是由于.eslintrc.js文件中的vue/max-attributes-per-line配置错误产生的 "vue/max-attri ......
vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目
最后是完整的vite.config.ts、main.ts配置 1、先用vite创建一个项目 npm create vite@latest 2、安装element plus yarn add element-plus @element-plus/icons-vue vite.config.ts配置组件 ......