使用若依框架，新增了一个vue页面后，发现当前页面的标签页可以打开，但是再切换到其他页面就无法显示了，控制台报错： TypeError: Cannot read properties of null (reading 'nextSibling') 查了很多，最后发现原因是<template></template>中的没有一个单独的根元素的问题，因为vue3不再要求template里只需要一个根元素了，但是发现在若依中还是需要的 原来这样写（均不行）： <template> Hel…

效果动画图： 完整代码如下 <template> <div class="number-flip"> <div class="box-item" v-for="(digit, index) in digits" :key="index"> <span class="item-num" ref="spanRefs">0123456789</span> </div> </div> </template> <script…

开发环境是vue，需要实现一个在网页上动态漂浮的窗口，漂浮到边界处，再弹回来。点击浮窗，可以跳转到新页面。 Baywindow.vue <template> <!-- 飘窗效果 --> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd" …

某些场景下，需要使用自定义的字体，例如类似计算器的显示效果，还有用户的手机使用了卡通字体的效果，但是希望我们的应用还是需要显示传统的字体。 实现方式： 准备好自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），进入项目中在assets文件夹下建一个font文件夹，把字体文件放进去 把拿到的字体包放到font文件夹中接着创建一个font.css文件，内容如下(以pingfang字体为例)： @font-face { font-family: 'PingFang-RE'; /* 重命名字体名 */ …

因为域名有限，所以想把vue项目部署在某个域名的二级路径上，例如：https://www.example.com/someapp/下 nginx的配置如下： location ^~ /someapp/ { index index.html; alias /opt/someapp/; try_files $uri $uri/ /someapp/index.html; } 在/opt/下新建someapp目录，里面放的就是vue项目打包后的html文件 修改路由文件：router/index.js，主要是history…

vue2项目中的路由页面，希望可以为每个页面设置不同的标题（title），就是显示在浏览器或微信中的标题。 总结以下的2种方式： 方式1，router/index.js 中增加如下代码： import Vue from 'vue'; const DEFAULT_TITLE = '这是个默认的标题'; router.beforeEach((to, from) => { Vue.nextTick(() => { document.title = to.meta.title || DEFAULT_TITLE;…

vue的项目，运行run serve的时候，控制台没有报错，但是打开首页，显示： Cannot GET / 网上知道有这几种解决方案，整理下，供参考： 打包的时候会把config文件夹下index.js的assetsPublicPath改成了 "./“ ，再次编译 npm run dev 却没有改回来 ，去掉 . 改成/就可以  把项目下的node_modules文件夹删除，然后重新npm install

ElementPlus/Vue3项目启动时候，遇到如下错误： error in ./src/i18n/index.ts Module not found: Error: Package path ./lib/locale/lang/zh-cn is not exported from package /path/to/project/node_modules/element-plus (see exports field in /path/to/project/node_modules/element-plus/p…

前端Vue项目使用npm run启动的时候，遇到如下报错，无法启动 Error: error:0308010C:digital envelope routines::unsupported 具体信息如下： > [email protected] serve > vue-cli-service serve INFO Starting development server... 10% building 2/3 modules 1 active ...website/node_modules/cache-…

在一些业务或者代码逻辑中，需要在代码中直接激发按钮或者其他元素的鼠标click点击事件， 而不是通过用户的直接点击。 可以使用ref取得这个button，然后有一个$el，执行click()方法即可，代码如下： <button ref="button1"></button> this.$refs.button1.$el.click(); <!--有肯呢个ref有多个，取第一个--> this.$refs.button1[0].$el.click();