Vue3

说明记录一次Vue3的项目搭建过程。文章基于vue3.2.6和vite2.51版本，使用了ui库Elementplus，vue-router4，Layout布局封装，axios请求封装，别名配置等。开始1.使用vscode开发工具安装vue3的插件Volar，在vue2中我们使用的是Vetur。vue3在线code工具传送门sfc.vuejs.org/2.执行初始化及安装命令：npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts

父组件中：1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出getCurrentInstance方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法实现调用子组件count+1import{getCurrentInstance,ComponetInternalInstance,ref}from"vue";importChildfrom"./zi.vue";constchild=r

首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据，配置如下：//此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址，此处代表localhostport:8888,

countUp简介CountUp.js是一种无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。CountUp可以在两个方向上进行计数，具体取决于传递的开始和结束值。虽然现在市面上基于countUp.js二次封装的Vue组件不在少数，但我个人是不太喜欢使用这些第三方封装的，因为第三方组件的更新频率很难保证，也许作者只是一时兴起封装上传了，并未打算继续维护，如果使用了等于后续根本没有维护性了，所以这种二次封装我推荐自行实现，我们可以通过本次封装熟悉一下vue3,ts的语法

解决办法，每次addRoute时深复制组件对象importtimefrom"../views/time"functioncopyObj(obj){if(typeofobj=="object"){if(Array.isArray(obj)){letarr=[];for(letitemofobj){arr.push(Object.assign(copyObj(item)));}returnarr;}elseif(obj==null){returnnull;}else{letobj1={};for(letind

1、创建一个名为request.js的新文件，并导入Axios：importaxiosfrom'axios';2、创建一个名为request的函数，并将其导出：这将创建一个名为request的函数，并将其设置为具有基本URL的新的Axios实例。要在封装的Axios实例中添加超时设置，可以在创建Axios实例时传递timeout选项。exportconstrequest=axios.create({baseURL:'https://example.com/api',time

侦听响应式对象前面我们聊到计算属性，它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时，执行一些预设的操作，就可以使用watch侦听器。我们还是先来实现一个最简单的例子，然后来一点一点扩充它。constdata={foo:1}constobj=reactive(data)watch(obj,()=>{console.log('obj已改变')})在这个例子中，我们使用了watch侦听器，当obj的属性被改变时，控制台应该会打印出obj已改变。基于前面我们对计算属性的实现

函数定义createApp函数定义在文件packages/runtime-dom/src/index.ts中exportconstcreateApp=((...args)=>{constapp=ensureRenderer().createApp(...args)if(__DEV__){injectNativeTagCheck(app)injectCompilerOptionsCheck(app)}const{mount}=appapp.mount=(containerOrSelector:Element

是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。以上是vue3官网对的说明，其实＜scriptsetup＞就是setup函数的一个语法糖。一、基本语法setup函数的写法im

什么是CompositionAPICompositionAPI是Vue3中引入的一种新的API风格，旨在提高代码的可读性、可维护性和可重用性。CompositionAPI不同于Vue2中的OptionsAPI，它采用了一种基于函数的编程方式，将组件内的逻辑分解成更小的可组合函数单元，以实现更加灵活和高效的代码组织方式。为什么Vue3推荐使用CompositionAPIVue3推荐使用CompositionAPI的主要原因是为了更好地组织和重用组件逻辑。在Vue2中，我们通常使用OptionsAPI，其中我

想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。在Vue中，想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有onBefo

登录页面:注册页面:(1)引入element-plus组件库引入组件库的方式有好多种,在这里我就在main.js全局引入了.npmielement-plus-Smain.js中代码:import{createApp}from"vue";//element-plusimportElementPlusfrom"element-plus";import"element-plus/dist/index.css";importAppfrom"./App.vue";importrouterfrom"./router"

一、前言1-1.三点变化：异步组件声明方法的改变：Vue3.x新增一个辅助函数defineAsyncComponent，用来显示声明异步组件异步组件高级声明方法中的component选项更名为loaderloader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise1-2.引入辅助函数defineAsyncComponent的原因：现在，在Vue3中，由于函数组件被定义为纯函数，异步组件定义需要通过将其包装在一个新的defineAsyncComponenthelpe

对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装效果图一、定义数据MenuData.tsexportdefault[{id:"1",name:"第一级菜单",level:'1',child:[{id:"11",name:"第二级菜单",level:'1-1',child:[{id:"111",name:"第三级菜单",level:'1-1-1'

简介axios是一个基于promise的网络请求库，管理后台使用的场景通常获取后端api数据，然后交给页面渲染还是在前面的示例项目上操作，安装axios最新0.27.2版本cdHELLO-WORLDnpminstallaxiosopenapi在网上找到一个开放的openapi地址，免费且无需认证就可以使用方便开发时模拟接口数据，但不能使用在生产环境中该openapi返回json数据，比较符合我们的需求,这里直接写死到axios配置中基本配置axios配置项较多，这里只配置基本功能在src目录下创建util

一、token登录鉴权jwt：JSONWebToken。是一种认证协议，一般用来校验请求的身份信息和身份权限。由三部分组成：Header、Hayload、Signatureheader：也就是头部信息，是描述这个token的基本信息，json格式{"alg":"HS256",//表示签名的算法，默认是HMACSHA256（写成HS256）"type":"JWT"//表示Token的类型，JWT令牌统一写为JWT}payload：载荷，也是一个JSON对象，用来存放实际需要传递的数据。不建议存放敏感信息，比

1.Vite首先来给大家介绍一下Vite，虽然这在Vue3中并不是必须的，但是考虑到TienChin项目前端用了这个，还是给大家稍微说两句。Vite（法语意为"快速的"，发音/vit/，发音同"veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。Vite意在提供开箱即用的配置，同

首先介绍一下vue-cli3默认生成的目录结构+demo+node_modules（存放第三方模块）+public（存放静态文件）-favicon.ico（图标）-index.html（页面模板）+src（我们自己写的文件一般放在这个文件夹下）+assets（存放资源文件）+components（存放公共组件）+router.js（路由管理：Router）+store.js（状态管理：Vuex）+views（存放视图组件）-App.vue（页面入口文件）-main.js（程序入口文件）-package.j

一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup(props){consticonName=com

1.shallowReactive与shallowRefshallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理基本数据类型的响应式,不进行对象的响应式处理。什么时候使用?如果有一个对象数据，结构比较深,但变化时只是外层属性变化===>shallowReactive。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef。2.readonly与shallowReadonlyreadonly:让一个响应式数据变为只读

ref是处理基本数据类型响应式API函数,在setup中声明定义的变量,可以直接在模板中使用没有被响应式API包裹处理的变量数据,是不具备响应式能力的也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据就需要用到toRef()与toRefs()这两个componsitionAPI的单纯的去看概念,往往比较抽象,是难以理解的,还是需要从具体的实例出发toRef()函数作用:创建一个ref对象,其value值指向另一个对象中的某个属性值,与原对象是存在关联关系的。也就是基于

getCurrentInstance与ts结合使用vue3项目中，如果不用ts这样使用是没问题的const{proxy}=getCurrentInstance()在ts中使用会报错：报错：...类型“ComponentInternalInstance|null”我们在项目中一般会用到很多getCurrentInstance()方法，直接封装一下创建useCurrentInstance.ts文件：import{ComponentInternalInstance,getCurrentInstance}from

前言对于大多数单页应用程序而言，管理路由是一项必不可少的功能。随着新版本的VueRouter处于Alpha阶段，我们已经可以开始查看下一个版本的Vue中它是如何工作的。Vue3中的许多更改都会稍微改变我们访问插件和库的方式，其中包括VueRouter。一、第一步：安装vue-routernpminstallvue-router@4.0.0-beta.13二、第二步：main.js先来对比一下vue2和vue3中main.js的区别：（第一张为vue2，第二张为vue3）可以明显看到，我们在vue2中常用到