VUE3

首页 > TAG信息列表 > VUE3

Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

前文已经初始化了 workspace-root，从本文开始就需要依次搭建组件库、example、文档、cli。本文内容是搭建组件库的开发环境。1 packages 目录前面在项目根目录下创建了 packages 目录，该目录存放组件库的所有组件及组件库的入口。该目录中已经创建了两个子目录 foo 和 yyg-demo-ui。

从0搭建vue3组件库:Shake抖动组件

其实就是个抖动效果组件，实现起来也非常简单。之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验，比如下面一个简单的登录页面，当点击登录会提示用户哪个信息没输入，当然这只是一个简陋的demo接下来就开始我们的Shake组件实现CSS样式当你需要抖动的时候就给它添

vue3引入element

1. 初始化vue项目 https://www.cnblogs.com/Emking/p/16701767.html 2. 安装element插件进入项目根目录下 npm install element-plus --save 3. 引入插件修改main.js 引入需要用到的组件 import { createApp } from 'vue' import App from './App.vue' //引入element-plus模

vue3中在".vue"文件中使用使用"$store"报警告问题

Vue3：环境集成

1.使用vue-cli创建 1.查看@vue/cli的版本,确保@vue/cli版本在4.5.0以上 vue --version 2.安装或者升级你的@vue-cli 3.创建 vue create vueproject 4.启动 cd vueproject npm run serve 2.使用vite创建创建: 1、生成一个模板页面 npm init vite hello-vue3 -- --template v

vue3中defineComponent 的作用

vue3中，新增了 defineComponent ，它并没有实现任何的逻辑，只是把接收的 Object 直接返回，它的存在是完全让传入的整个对象获得对应的类型，它的存在就是完全为了服务 TypeScript 而存在的。我都知道普通的组件就是一个普通的对象，既然是一个普通的对象，那自然就不会获得自动的提示， imp

vue3工具函数，取响应式的变量值，生成一个新的响应式变量，插入响应式数组。

取响应式的变量值，生成一个新的响应式变量，插入响应式数组，这样防止每次插入数组的是同一个响应式变量，导致数组里面有多个元素，但全部是同一个值：var newRefArtName = ref(unref(artName)); 1、isRef() 检查某个值是否为 ref。var res = isRef(artName);//true2、unref() 如果参数是 re

vue3中axios的配置

安装axios依赖 yarn add axios 或 npm install axios --save src目录下创建相关文件夹各文件内容【config/request.js】 import axios from "axios"; // import store from "@/store"; // 创建并配置一个新的axios const service = axios.create({ baseURL: process.env.

解读keep-alive：Vue3中手动清理keep-alive组件缓存的一个解决方案

用过vue的同学肯定对keep-alive组件不陌生，它允许我们使用key对组件进行缓存，当使用相同key的组件渲染时，就会使用缓存中的组件，这样可以加快渲染速度，特别是在使用路由跳转时，效果是很明显的，而缓存就意味着更多的内存消耗，但是很遗憾，keep-alive组件不允许我们手动释放，我们唯一能操作

Vue3 表单

https://www.runoob.com/vue3/vue3-forms.html 这节我们为大家介绍 Vue 表单上的应用。我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 va

Vue3 样式绑定

转自 https://www.runoob.com/vue3/vue3-class-bind.html Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时，表达式除了可以使用字符串之外，还可以是对象或数组。 v-bind:class 可以简

vue3与vite下，element-plus组件库怎么实现按需引入

vue3与vite下，element-plus组件库怎么实现按需引入按需引入意义：减小打包后的包体积全量引入 // main.js import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import zhCn from 'element-plus/lib/locale/lang/zh-cn'; ... app.use(ElementPlu

vue3+element-plus 报错：Uncaught (in promise) TypeError: Cannot read properties of null (reading '

报错内容： Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore') 解决方法： <template #default="scope"> {{scop

vue2和vue3生命周期的区别

vue2生命周期：（8个阶段）beforeCreate(创建前) beforeCreate(创建前) created(创建后) beforeMount(载入前) mounted(载入后) beforeUpdate(更新前) updated(更新后) beforeDestroy(销毁前) destroyed(销毁后) vue3生命周期： setup() : 开始创建组件之前，在 beforeCreate 和 created

一天一个知识点-----vue3 中简单实现 vue2的bus总线

项目背景：vue3 众所周知在重构的vue3后，vue2的bus总线通信就随之无法使用。 bus总线有点像 Vuex 或者 Pinia ，可以使用发布订阅模式来简单实现下。不是很了解的同学可以 ♥ 观察者模式浅尝♥ ♥ 发布订阅模式浅尝♥ 原理分析：参照发布订阅模式需要一个list来存放相应的事件 $on 方

直播app开发搭建，vue3+vite动态遍历加载图片

直播app开发搭建，vue3+vite动态遍历加载图片 <div class="header-menu-list flex ac" v-for="(item, i) in header" :key="item.title" > <div class="header-img"> <img :src="

vue3 中vue-router

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' // 静态导入 import index from './../components/index.vue' import notfound from './../components/notfound.vue' import HelloWorld from './../co

Vue3 引入路由【Vue专栏】

router.js文件目录结构如下，注意这个404重定向，vue3不支持直接使用“*”匹配所有路由了，要使用:catchAll(.*) import {createRouter, createWebHashHistory} from "vue-router"; const routes = [ { path: "/", component: () => import("../views/HomePage.

vue3--学习技术胖笔记----第四波外部方法or比变量调用

<template> <div> <p>{{lucaxText}}</p> <button @click="getName('大人')">点击</button> </div> </template> <script lang="ts"> import { ref, } from &

jeecg平台相关01-vue2迁移到vue3

01-vue2迁移到vue3 嵌套： datasource: master: url: jdbc:mysql://127.0.0.1:3306/jeecg-boot-vue3?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shangha

vue3 基础-父子组件间如何通过事件通信

前几篇讨论的父子组件间如何进行传数据的话题. 即父组件在调用子组件的时候, 通过自定义属性 (v-bind) 的方式传递数据, 同时子组件通过 props 属性进行接收. 子组件可以对数据进行各种校验, 但不能修改, 即所谓的 "单项数据流''的概念, 这样其实是合理的, 不能混乱. 若是在要改就

前端面试题(持续更新...)

HTML篇 cookie,localStorage,sessionStorage的区别存储大小：cookie40kb左右，Storage20M左右存储格式：cookie是字符串格式，Storage是键值对通讯相关：cookie随请求携带，Storage不会自动携带操作相关：cookie操作复杂，没有api前后端都可以操作；Storage操作简单，有api，只能前端操作。时效相

vue3--学习技术胖笔记

<template> <div> <a href="https://vitejs.dev" target="_blank"></a> <H2>欢迎光临红浪漫洗浴中心</H2> <div>请选择一位美女</div> <button v-for="(item,index) in girls"

Vue3里单页面应用（SPA）参数路由多实例缓存冲突问题

Vue SPA页面会有单组件多实例的参数路由情况，比如现有用户信息如下 { path: "/user/:uid", name: "user", component: () => import("@/views/**/user.vue"), params: {uid: 1}, ... } 那么缓存路由组件可以写成以下形式 <template> <router-view v-slot="

使用 Vue3 构建 Web Components

有时候想写一个无关框架组件，又不想用原生或者 Jquery 那套去写，而且还要避免样式冲突，用 Web Components 去做刚觉就挺合适的。但是现在 Web Components 使用起来还是不够灵活，很多地方还是不太方便的，如果能和 MVVM 搭配使用就好了。早在之前 Angular 就支持将组件构建成 Web Compone