分类：vue3

2021
03-05

vite2.0+vue3移动端项目实战详解

一.涉及技术点vite版本vue3ts集成路由集成vuex集成axios配置Vant3移动端适配请求代理二.步骤vite+ts+vue3只需要一行命令npminit@vitejs/appmy-vue-app--templatevue-ts配置路由npminstallvue-router@4--save在src下新建router目录，新建index.ts文件import{createRouter,createWebHashHistory,RouteRecordRaw}from"vue-router";constroutes:Array<RouteRecordRaw>=[{path:"/",name:"Hom... 继续阅读 >
2021
01-29

Vue 3自定义指令开发的相关总结

什么是指令（directive）在Angular和Vue中都有Directive的概念，我们通常讲Directive翻译为“指令”。在计算机技术中，指令是由指令集架构定义的单个的CPU操作。在更广泛的意义上，“指令”可以是任何可执行程序的元素的表述，例如字节码。那么在前端框架Vue中“指令”到底是什么，他有什么作用呢？ 在Vue开发中我们在模板中经常会使用v-model和v-show等以v-开头的关键字，这些关键字就是Vue框架内置的指令。通过使用v-model... 继续阅读 >
2021
01-27

vue3 watch和watchEffect的使用以及有哪些区别

1.watch侦听器引入watchimport{ref,reactive,watch,toRefs}from'vue'对基本数据类型进行监听-----watch特性：1.具有一定的惰性lazy第一次页面展示的时候不会执行，只有数据变化的时候才会执行2.参数可以拿到当前值和原始值3.可以侦听多个数据的变化，用一个侦听起承载setup(){constname=ref('leilei')watch(name,(curVal,prevVal)=>{console.log(curVal,prevVal)})}template:`Name:<inputv-model="name... 继续阅读 >
2021
01-26

使用vue3重构拼图游戏的实现示例

前言花了两天时间，重构了项目中的一个拼图小游戏（又名数字华容道），为了方便使用抽离成了独立组件，效果如下：线上体验源码地址在文章最后哦!主要重构点原有拼图游戏是通过开源代码加以改造，使用的是vue2。在实际项目使用一切正常，但还是存在以下痛点源代码臃肿，暴露的配置项不足，特备是和项目现有逻辑结合时体现的更加明显生成的游戏可能出现无解情况，为了避免无解，只好写死几种情况然后随机生成源代码是vue2版... 继续阅读 >
2021
01-08

vue3中轻松实现switch功能组件的全过程

what编程语言里面，除了使用if语句来做条件判断，还有另外一个常用的就是switch了。而在vue中，官方已经帮助我们实现了v-if这个指令，但是还没有switch，那我们能不能自己实现一个呢？这篇文章就是来探索这个问题，并且最终实现一个Switch组件以终为始先来看看我们希望用户是如何使用Switch的用js的方式来对比一下：用户可以通过一个VSwitch组件来应用switch功能通过case来确定匹配的条件然后每一个case匹... 继续阅读 >
2020
12-30

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析 之前有分享一个vue2.x移动端弹框组件，今天给大家带来的是Vue3实现自定义弹框组件。V3Popup基于vue3.x实现的移动端弹出框组件，集合msg、alert、dialog、modal、actionSheet、toast等多种效果。支持20+种自定义参数配置，旨在通过极简的布局、精简的调用方式解决多样化的弹框场景。v3popup在开发之初参考借鉴了Vant3、ElementPlus等组件化思想。并且功能效果和之前vue2.0保持一致。◆快速引入在main.js中全局引入v3popup组件。i... 继续阅读 >
2020
12-29

vue3+typeScript穿梭框的实现示例

前言实现功能：模仿element穿梭框的简单功能每周分享一个vue3+typeScript的小组件，我只想分享下自己的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮助。效果展示预览地址github地址开发过程思路：用两个数组分别记录左右框框里面的值，根据复选框选中状态来实现删除增加即可html部分<divclass="shuttle"><!--左边列表--><divclass="shuttle-box"><divclass="shuttle-box-title"><div>列表一</d... 继续阅读 >
2020
12-24

vue3使用vue-count-to组件的实现

vue3使用vue-count-to组件的实现 项目场景：数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔符等等)，但是在vue3中使用会出现问题。<template><divid="nav"><router-linkto="/">Home</router-link>|<router-linkto="/about">About</router-link></div><count-to:startVal="0":endVal="2045":duration="4000"></count... 继续阅读 >
2020
12-22

Vue3 实现双盒子定位Overlay的示例

在Vue3中，使用<Teleport>可以很优雅的把某个组件渲染到根节点之外的节点，同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此，用<Teleport>实现相对于某一元素的Overlay。实际上，这篇文章跟Vue3的关系不大，只是通过Vue3讲解一类Overlay的设计方法。原理要实现相对于某一元素的Overlay需要依靠两个元素，Origin和Panel，Origin表示相对于的元素，而Panel表示Overlay本身，实现方法... 继续阅读 >
2020
12-02

详解Vue3 Teleport 的实践及原理

详解Vue3 Teleport 的实践及原理 Vue3的组合式API以及基于Proxy响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新，Vue3还新增了一个内置组件：Teleport。这个组件的作用主要用来将模板内的DOM元素移动到其他位置。使用场景业务开发的过程中，我们经常会封装一些常用的组件，例如Modal组件。相信大家在使用Modal组件的过程中，经常会遇到一个问题，那就是Modal的定位问题。话不多说，我们先写一个简单的Modal组件。<!--Modal.vue-->... 继续阅读 >
2020
12-02

element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

element-plus一个vue3.xUI框架(element-ui的3.x 版初体验) 突然发现已经半年没更新的element-ui更新了更新了什么还不清楚，但是告知了基于vue3.x版本的element-plus已经出来了。先来上手体验一下首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧npmielement-plus为了方便，直接采取全部引入的方式src/plugins/element.tsimportElementPlusfrom'element-plus'import'element-plus/lib/theme-chalk/index.... 继续阅读 >
2020
12-02

Vue3+elementui plus创建项目的方法

1.使用elementuiplus版本实现按需加载组件会报错Error:Cannotfindmodule'babel-preset-es2015'from'D:\danzhukeji\danzhu\my_pp\src'这样的情况下{"presets":[["es2015",{"modules":false}]],"plugins":[["component",{"libraryName":"element-plus","styleLibraryName":"theme-chalk"}]]}换成下面这样无需安装任何插件依赖即可{"presets":[["@babel/preset-env",{"module... 继续阅读 >
2020
10-30

利用vue3+ts实现管理后台（增删改查）

 简单的管理后台基本上就是数据的增删改查。主要就是列表+form表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体API及参数。以前vue2的时候最简单的做法是写出来一个页面的逻辑，然后直接copy到各个页面中，修改API及参数即可。高级一点的是利用mixin函数，将可复用逻辑抽离，每个页面引入mixin。vue3之后新增了compositionAPI。本文就是利用compositionAPI，将可复用的逻辑抽离到c... 继续阅读 >
2020
10-28

让你30分钟快速掌握vue3教程

经过了漫长的迭代，Vue3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript进行了大规模的重构，带来了CompositionAPIRFC版本，类似ReactHook一样的写Vue，可以自定义自己的hook，让使用者更加的灵活，接下来总结一下vue3.0带来的部分新特性。setup()ref()reactive()isRef()toRefs()computed()watch()LifeCycleHooks(新的生命周期)TemplaterefsglobalPropertiesSuspenseVue2与Vu... 继续阅读 >
2020
10-20

vue3为什么要用proxy替代defineProperty

在这之前，我们得先了解下vue的核心理念mutable不管是vue2还是vue3，在实现的过程中，核心概念一直保持稳定，以可变数据源为核心的理念，来实现整个UI变动更新用最简单的讲法就是：初始化数据生成了页面，直接修改源数据触发更新，页面重新渲染关注vue的人都知道，vue3里面使用了proxy替换了defineProperty，在使用vue2的时候，我们经常会碰到一个问题，添加新的对象属性obj.a=1会无法被vue2劫持，必须使用vue2提供的$set方法来... 继续阅读 >