VUE3
VIte+Vue3 打包在本地 双击 index.html 打开项目
**1.安装插件** > npm i @vitejs/plugin-legacy > npm i @babel/preset-env vite3 版本以上还需要安装 > npm i terser **2.引用 @vitejs/plugin-legacy** ```` import legacy fr ......
从vue2到vue3，自定义组件的v-model实现原理
### 前言 相信使用vue开发的同学应该都体会过v-model的便利，它可以非常方便地进行双向数据绑定，只要重新输入内容，视图就会立刻发生改变。本文将着重介绍如何在自定义组件当中使用v-model，以及在vue2和vue3中使用方式上的差异。 ### 概述 v-model是一个语法糖，它在组件使用 ......
滚动视差-skrollr.js，vue3初使用
安装插件： npm i skrollr --Saver 在使用页引入： <script lang="ts" setup> import { nextTick, onDeactivated, onMounted, ref } from "vue"; import skrollr from "skrol ......
vue3创建项目，vite+js
之前的时候大哥就让我自己搭架子，但是我拖延症，现在用到了，得自己搭了 我的项目都放到了 VuePorjects这个目录里面， 一、先进入到指定工作目录，（不是你要创建的项目的名称哈） cd VuePorjects/ 二、创建vue3项目，安装创建项目 npm create vite @latest ......
vue3.0 外部配置文件一 (导入json文件方式)
vue3.0 外部配置文件，重点是打包后也可以 修改配置参数 注：js文件中必须是标准的 json 格式 一、在public中创建static文件夹，在static文件夹中创建 config.json 文件 config.json （必须是标准的 json 格式） { "webSocketUrl": ......
2023年最新50道Vue全套vue2+vue3面试题带答案汇总
# 此文章不断更新，欢迎大家在评论区补充 ## 1.什么是MVVM?  M - Model 数据：它是与应用程序的 ......
单页html+vue3+element-plus+axios
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="apple-mobile-web-app-capable ......
vue3 + element 实现季度选择框
效果图 1.子组件 <template> <div class="el-quarter-wrap"> <el-popover title="" content="" width="320" v-model="visible"> <template #reference> <el-input v-mo ......
vue3如何正确设置 Tailwind CSS
1.创建vue3项目 npm init vue@latest 需要配置的选择YES 2.切换到 项目newProject目录下 npm install 下载依赖包 3.安装 tailwind 及其依赖项(PostCSS 和自动前缀) npm install -D tailwindcss@latest ......
vue3+ts利用draggable组件实现拖拽
界面展示 实现步骤 安装组件（vue3引入的包为vuedraggable@next ，vue2为vuedraggable） npm i -S vuedraggable@next 引入并使用组件 <template> <!-- 此页面template中没有可刷新页面的数据变化，拖拽会不起作用，所以加个 ......
vue3 checkbox 单选
<template> <div class="ant-checkbox-group ant-checkbox-group-outline"> <label v-for="item in getOptions" :key="`${item.value}`" :class="getCheckboxwra ......
vue3组合式 API_为 computed() 标注类型
computed() 会自动从其计算函数的返回值上推导出类型 <template> <h3>{{ doubleCount }}</h3> </template> <script setup lang="ts"> import { ref,computed } from "vue" const cou ......
vue3+antd-vue实现增改弹窗
对于前端来说，在后台系统中最常见的需求，就是基于表单表格的正删改查。对于增和改，需要实现弹框组件。代码如下： ``` ``` ###使用方法： ###模板使用组件 ``` ``` ###控制打开弹窗 ``` 编辑 ``` ###js const classModal = ref(null) func ......
vueuse使用（VUE3）
vue create my-vue HelloWorld.vue <template> <button type="button" @click="open">选择文件</button> </template> <script> import { useFileDialog } from '@vue ......
vue3中组合式 API_为 reactive() 标注类型
reactive() 也会隐式地从它的参数中推导类型 <template> <h3>{{ book.title }}</h3> <h3>{{ book.author }}</h3> </template> <script setup lang="ts"> import { reactive } fr ......
Vue3 响应式全局对象json 动态绑定界面四 （Div块样式 Json数据绑定）
效果 man.js 定义 响应式全局对象 globalData //全局对象 const globalData=reactive({ extTelTalkData: [ { userExten: "1000", userName: "刘亦菲", callStatus:"通话" }, { userEx ......
Vue3 响应式全局对象json 动态绑定界面三 （Div块样式 字符串叠加）
效果 man.js 定义 响应式全局对象 globalData //全局对象 const globalData=reactive({ missedCallData:"", currentUserTel:"", }) app.provide('globalData', globalData); 在ma ......
Vue3 响应式全局对象json 动态绑定界面二 （方块矩阵样式）
效果 main.js //全局对象 const globalData=reactive({ extTelMonitorData: [ { title: '用户组一', list: [ { groupID: "0", groupName: "All Users", userDomain: "equii ......
Vue3 响应式全局对象json 动态绑定界面一 （列表样式）
效果 man.js 定义 响应式全局对象 globalData const globalData=reactive({ extTelListData: [ { userExten: "1000", userName: "秦岚", callStatus:"通话" }, { userExten: "10 ......
vue3高阶用法一
### 1. v-model 和v-model:value为什么要的需要加: + v-model vue3中使用了modelValue来代替了value, 所以子组件触发emit的写法为 emit('update:modelValue','xxx') + v-model:value 为什么有的需要加 ......
在Vue3中，解决 Echart tooltip 不显示的问题
为什么在 Vue 中使用 ECharts 时图表显示异常？ Vue3，中使用 reactive 及 ref 会导致 ECharts 的对象实例被代理成为响应式对象，影响 ECharts 对内部属性的访问，可能会导致图表无法正确显示等一系列意外问题，且会由于深度监听而极大地降低图表展示性能。 解决方案 ......
前后端分离实现注册+登录（Vue3.0 + Django3.2)
> 博客地址：https://www.cnblogs.com/zylyehuo/ # 一、使用 vite+webstorm 搭建 Vue 环境，构建前端 ## 1、结构树 * ![](https://img2023.cnblogs.com/blog/3071480/202307/3071480-20 ......
Uniapp + Vue3 引入高德小程序插件js文件失败
## 问题描述 使用uni app模板开发微信小程序过程中引入高德地图小程序插件失败， 先看代码： ``` import amap from "@/lib/amap-wx.130.js";//引入高德地图小程序插件 ``` 报错： `SyntaxError: The requested module ......
[完整]流程解决Vue3项目搭建步骤
# Vue3项目完整搭建步骤 ## 一、 使用vite创建vue3项目 `npm init vue@latest` 或者`npm create vite@latest`进行初始化项目并创建项目名称code，进入code目录进行基本部署。 `cd code`、`npm install` 、`npm r ......
vue3 登录添加图形验证码
### 1. 新增组件 `IdentifyCode.vue` ，使用canvas绘制验证码内容： ``` ``` ### 2. 引入组件并使用： ``` 用户登录 登录 ``` ``` import IdentifyCode from "@/components/IdentifyCode.vue"; ......
关于vue3使用setup语法糖获取不到组件实例内部的变量
// 子组件 <template> <div>{{count}}</div> <template <script setup> import { ref } from 'vue' const count = ref(0) </script> // 父组件 <template> <div> <Chil ......
58.请使用vue3+vite+typescript+element-plus+setup语法糖，使用xlsx和file-saver实现保存excel功能。我的el-table表有分页数据。导出的excel中要包含所有分页中的数据
1 <template> 2 <div> 3 <el-table 4 :data="mergedTableData" 5 border 6 stripe 7 > 8 <!-- 表头 --> 9 <el-table-column 10 prop="date" 11 label="Date" 12 >< ......
Vue3加载Element-plus的字体图标
Element-plus不仅仅是提供了各种组件，同时还提供了一整套的字体图标方便开发者使用 安装icons字体图标 cnpm install @element-plus/icons-vue 全局注册 在项目根src目录下，创建plugins文件夹，在文件夹下创建文件icons.js文件 import ......
uniapp vue3 setup如何兼容顶部状态栏高度
uniapp vue3 setup如何兼容顶部状态栏高度 思路是调用uni.getSystemInfoSync()，然后存到状态管理里，再将headerbar的padding-top加上安全区数值，如下： store/global.js 状态管理 import { defineStore } fro ......
56.vue3+vite+typescript+element-plus+setup语法糖实现el-table中的数据导出excel
vue3+vite+typescript+element-plus+setup语法糖实现el-table中的数据导出excel 2023/7/19 下午4:52:14 要在Vue 3中使用Vite、TypeScript和Element Plus来实现将数据导出为Excel，你可以按照以下步骤进行操作 ......