开发环境是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" …
开发环境是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();
我的环境: MacOS Apple芯片 Vue3+TypeScript 遇到一个问题,npm run serve的时候正常,但是npm run build的时候遇到错误,如下: Syntax Error: HookWebpackError: Module build failed (from . /node_modules/image-webpack-loader/index.js) : Error: spawn /path/to/node_modules/optipng-bin/vendor /optipng E…
前言 最近在一次理解vue项目的代码时,发现周一对好多API都不太熟悉。这间接导致的问题是,代码理解速度要比平常要慢很多。于是乎,赶忙把vue API的学习提上了日程。 在下面的文章中,将地板式地扫盲vue3文档中API模块的所有内容,融入周一的理解进行深入介绍。下面就来一起看看吧~? 一、框架搭建 1、关于文档 首先附上官方文档的具体材料:cn.vuejs.org/api/ 2、VUE3 API整体盘点 在vue3的全新API中,有部分在vue2的基础上沿用了。还有另外一部分,是vue3所新增加的。我们先来看vu…