薛定谔的猫的博客

Vue 的声明性渲染模型抽象了大部分对 DOM 的直接操作，当我们有需要直接访问底层 DOM 元素的需求，就可以使用特殊的 ref attribute，对DOM 元素实现直接引用，从而实现原生audio播放器的更改和控制。如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；

最近在做一个项目，因为项目比较小，用户群体年龄跨度较大，同时对兼容性的要求较高，所以选择webpack+Vue3+JavaScript+antd+less+axios的技术栈，在开发的当中发现一个问题，原来在vue2当中，可以很简单就能实现的组件的全局自动化注册，在当前这套技术栈组合中不能使用，网上的教程大多都是偏向于typescript的，所以决定自己写一个。

在Vue3的script setup语法糖中，没有办法通过Vue2的ref、props、parent、中央时间总线等等众多方法，通过this指针简单的实现父子组件的通信，网络上也很少有关于script setup语法糖的相关教程，所以决定自己写一个详细教程，方便以后学习查看并记录。

到这就具体实现了vite+vue3项目的路由自动匹配生成，无论几级文件夹都可以自动匹配生成相关的路由规则，而我们如要使用，直接写文件地址即可跳转，上面只是初步实现了路由的自动生成，URL传值，meta定制，路由守卫这些还有待继续完善。我们在写vite+vue3项目的时候，总是需要手动的去为每一个.vue文件去手动设置路由，这样做很麻烦，也会占用大量的时间去维护开发，如果我们能自动生成路由，这样就会很方便。2、知识点：forEach、replace、push、module（语法）、Vue Router。

Vite+Vue3项目使用第三方Animate.css动画库简单实现页面级的路由转场动画详细教程

注意：打包之后本地会出现dist文件夹。将dist文件夹以及项目的package.json 文件上传到华为云Windows Server服务器上的WWW文件夹下面（此处随便什么位置，新建个文件夹就能放。

webpack在很多时候都很强大，但是对于在vue2的时代做为脚手架工具对于代码热跟新，以及项目启动就显得很慢，当我们的项目所使用的模块越来越多，基于webpack的vue项目就越慢，很耗时。Vite+Vue3可以完美的解决这些问题，但是其中有一个最致命的问题，在vue2时代有很多的模块和包都是基于AMD、CMD、CommonJS规范开发的，但Vite是基于ES Module的开发服务器，所以在Vite下基于AMD、CMD、CommonJS规范开发的包和模块是无法直接使用的。那么如何解决？

安装相关依赖npm install vue-wechat-title --save在main.ts引入和使用import { createApp } from 'vue'import App from './App.vue'import VuewechatTitle from 'vue-wechat-title' const createapp = createApp(App)createapp.use(VuewechatTitle)在App.vue当中使用，设置统一的路由.

layui - vue目前的版本是1.4.9，目前常用的大部分组件已全部覆盖，最惊喜的地方在动画和过度组件做的比较好，应该是目前Vue组件库里面做的比较好的，Vue的动画相比于React和Angular一直比较弱,layui - vue目前做的不错，目前Vue组件库里面的天花板。

这应该是目前编写体验最简单的serverless云函数服务，体验上应该也是最好的（当然这是对于前端程序员来说），‘轻服务’serverless无服务器架构，基本和理想当中的无服务是差不多的，不过个人感觉步子迈大了，体验上太过激进，不够高大上。首先奉上‘轻服务’官网地址：https://qingfuwu.cn/ ，注册认证选择个人，选择开发版，有免费资源。控制台选择新建项目，目前支持node.js、go、python三种语言，根据自己的需求进行选择新建，题外话：node体验非常好。云函数我选择的

问题（坑）？‘vue-video-player’播放器无渲染vue3.0下的播放器播放地址‘url’赋值问题‘vue-video-player’引入问题前期工作首先我们需要安装相关插件npm install vue-video-player -snpm install videojs-flash -snpm install videojs-contrib-hls -s其实‘vue-video-player’本身是包含videojs-flash和videojs-contrib-hls

在很多时候，开发vue项目需要对我们自己开发的自定义组件进行动态的控制，以实现按照我们想要的组件去进行渲染，同时可以动态的管理操作前端的自定义组件渲染显示。那么如何实现？

通过公共模板组件封装，实现公共部分业务的代码复用，减少不必要的重复开发，减轻开发工作，同时可以避免重复造轮子的尴尬。2、公共模板组件全局注册（main.js或者main.ts）本文原创，原创不易，如需转载，请联系作者授权。3、公共模板组件的使用。1、公共模板组件封装。

vant是在进行移动端vue开发常用的一个轻量可靠的移动端组件库。

本地新建vue项目，webpack初始配置的静态资源图片转base64大小的限制是3kb，所以当资源小于当前限制则不会转base64；在项目的vue.config.js文件当中对webpack对静态资源的初始相关配置进行修改，将条件尽可能的设置的小点就可以了；还有一种办法是在服务端进行一个配置，这样的话就不需要前端进行配置了；两者选其一就可以了；...

vue通过第三方集成Animate.css简单快速的实现动画，通过类名引用，可以轻松实现Animate的所有动画，Animate.css是一款强大的预设css3动画库，Animate.css内置了很多典型的css3动画，兼容性好使用方便。

使用场景：多种类跨组件全局搜索实现，vuex对于当前场景过于繁琐庞杂，由此想用vue中央事件总线bus去处理。使用问题：因为$emit先于$on执行了，所以接受传值的组件无法获得第一次数据；解决办法：main.js//中央事件总线Vue.prototype.$bus=new Vue();传值组件onSearch(value) { this.Sdata.svalue=value; // 加定时器，防止$emit先于$on执行了，否则无法获得第一次数据； setTimeout

在vue项目开发当中，频繁的注册组件，无论是公共组件，或者基础组件，想在其他组件当中使用就需要频繁的在组件内通过import去引用，那么有没有一种方法可以实现组件的全局自动化注册？答案：可以的。

VUE实现路由自动生成，根据src文件夹下（多级文件夹）所有.vue文件路径实现路由自动匹配生成