前端框架
文章平均质量分 60
sywdebug
一枚啥都不会的前端中白
展开
-
Vite + vue3 项目使用 amfe-flexible 和 postcss-pxtorem 实现不同屏幕自适应
amfe-flexible 和 postcss-pxtorem 可以一起使用来实现移动端的适配效果。amfe-flexible 主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局。它会根据设备的屏幕宽度计算出根元素字体大小,并将其设置为页面的根元素的字体大小。然后,开发者可以在 CSS 样式中使用 rem 单位来设置元素的尺寸和间距,从而实现自适应布局。postcss-pxtorem 是一个 PostCSS 插件,用于将 CSS 中的像素单位(px)转换为 rem 单位。原创 2023-09-09 08:36:29 · 1491 阅读 · 1 评论 -
vue3 将 HTML 网页内容生成为 PDF 文件
使用 html2pdf.js 实现使用 html2pdf.js 的方法非常简单,只需要能获取到要生成 PDF 的 HTML 元素即可。原创 2023-09-09 08:36:15 · 1170 阅读 · 0 评论 -
初始化一个 vite + vue 项目
在 main.js 中引入,在 use 一下,这里同时引入 locale 是因为在使用分页组件时是英文,需要引入这个更改成中文。然后在 main.js 中引入,再注册一下全局属性,不在 main.js 引入,每次使用时在页面引入使用也可以。在项目目录下 src 目录内新建 store 目录,然后在 store 目录内新建 index.js 文件。在项目目录下 src 目录内新建 axios 目录,然后在 axios 目录内新建 index.js 文件。然后在 main.js 中引入,再 use 一下即可。原创 2023-09-08 16:12:10 · 493 阅读 · 0 评论 -
vue3使用xlsx导出json数据为excel表格
可以看到虽然导出了,但是上面name和age显然不是我们想要的,我们想要的是“姓名”和“年龄”,使用。导出文件结果,下面工作表名称就不截了,图片太长不好看,工作表名就是students。更改标题后的结果,可以看到从A1开始数据改变成了刚刚写的数据。也可以改变列宽,我用不到就先不写了,可以自行看官方文档。可以向工作表中添加JS数据的数组实现标题重命名。要导出的数据需要是一个没有嵌套的对象数组。总的来说比之前写的乱七八糟的更简单易懂了。可以看到从B5改变数据为上面添加的。在需要使用的页面引入。......原创 2022-08-01 13:11:05 · 2164 阅读 · 0 评论 -
vue父子组件传值记录
不知道咋说,懒得写案例了,直接拿我这个页面说一下:在父组件使用时,上面写的和后面其他的就是要从父组件传递向子组件的值,例如就是我要传递的本页面的标题名此时父组件传值就完成了,接下来在子组件使用如下,props 与 data 同级,在 props 里面直接写上即可,我这里是在 data 里面重新赋值了一下,使用时就是模板语法直接用 data 里的 pageTitle 即可,如果不进行重新赋值到 data 直接使用 propsPageTitle 也是可以的,因为 props 里的是传递下来的,不可以重新改变这原创 2022-02-20 01:28:07 · 163 阅读 · 0 评论 -
记录做vue项目时遇到的错误
一、echarts图表第一次进入页面显示正常,返回上一页再进入此页面或者其他页面相同但数据不同的页面时,图表显示不出参考解决 Echarts 图表在旧容器上重新渲染不出来的问题因为init后会给图表容器附加一个_echarts_instance_属性,因此需要每次进入页面重新渲染图表之前去除图表容器上的_echarts_instance_属性例如我有一个id为myCanvas的图表var chartEle = document.getElementById("myCanvas");//取到这个元素原创 2022-02-08 15:55:01 · 1761 阅读 · 0 评论 -
vue与vue-cli记录
自己看,不知道咋总结,我这里主要是验证一下之前是不是糊涂了,总之以后就是用 vue-cli4.x,想创建 vue2.x 就创建 vue2.x,想创建 vue3.x 就创建 vue3.x,毕竟明面上看 vue-cli4 创建的项目目录是给分好了,vue3.x 和 vue2.x 区别还是挺大的,应该是各方面都提升了不少,人往高处走,还是要适应新版本❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀。原创 2022-01-05 22:45:30 · 446 阅读 · 0 评论 -
vue选择图片的几种方式
后台有上传图片功能,用了好几次还是还是没记住,每次都要上网找,索性写一下方法。原创 2021-10-18 17:08:03 · 4098 阅读 · 0 评论 -
vue 遍历目录下的文件,获取图片名并直接遍历渲染
使用场景:搭了个资源网站,想直接遍历显示当前图片目录下的所有图片,但是图片名字乱七八糟花里胡哨。原创 2021-10-14 15:32:55 · 8253 阅读 · 0 评论 -
vue2 导出及导入 excel 数据
场景:我们做的后台,老总想要批量导入数据的功能,因此有了导入,后来又想要excel表的数据,因此有了导出。原创 2021-09-03 14:47:52 · 2387 阅读 · 0 评论 -
HbuilderX打包的vue项目,状态栏问题
场景:老总让做的那个 APP,页面改来改去,最后做完了,状态栏需要沉浸背景,状态栏文字颜色也要改上集说到解决 HbuilderX 打包的 vue 项目,物理返回键问题,当时装了 mui 框架,这个也需要,安装方法可以看之前那个有写,原创 2021-08-11 17:07:18 · 899 阅读 · 0 评论 -
解决使用HbuilderX打包vue项目后,按物理返回键直接退出程序的问题
使用场景:老总让我一个前端开发搞 APP,不会原生啊,无奈使用 vue 项目,然后使用 HbuilderX 打包成 APP,完事之后测试,发现按返回直接退出程序了。原创 2021-08-05 17:29:35 · 1953 阅读 · 0 评论 -
使用FFmpeg将rtsp流转为rtmp流,并在vue项目使用vue-video-player进行播放
使用场景:老总买了安防摄像头,想做一个可以查看摄像头拍摄画面的后台,但是摄像头只给配了 rtsp 的流,h5 上面不支持使用 rtsp 的流直接渲染播放,因此要将 rtsp 转为 rtmp 进行播放,以下操作最终延迟大概在两秒左右。原创 2021-07-26 11:47:18 · 5665 阅读 · 5 评论 -
HbuilderX打包vue移动端项目自有证书生成
我是 Windows 下使用,下载完成,解压出来将里面的 bin 目录添加到环境变量 path 中。test.keystore 是证书文件名称,可修改为自己想设置的文件名称,也可以指定完整文件路径。36500 是证书的有效期,表示 100 年有效期,单位天,建议时间设置长一点,避免证书过期。使用以下命令生成,生成后证书就在输入命令的目录下,生成前记得 cd 到存放证书的目录。testalias 是证书别名,可修改为自己想设置的字符,建议使用英文字母和数字。下面这条是查看证书信息的命令。原创 2021-07-23 15:59:01 · 587 阅读 · 0 评论 -
vue2 中使用 vue-lazyload 做图片懒加载
注意:以下图片只可以使用 url 图片,本地图片加载不出。main.js 里引入并使用。原创 2021-06-17 16:50:56 · 528 阅读 · 0 评论 -
vue2 中使用 Swiper Animate
写博客时,嫌麻烦直接拷的项目中的代码,自行取需要的,加动画的元素必加 class 为 ani,更换动画直接换 swiper-animate-effect 属性值,swiper-animate-duration 是持续时间,swiper-animate-delay 是延迟。在 main.js 中引入 vue-awesome-swiper 和 css 文件。在 main.js 中引入 animate.css。首先使用命令安装以下依赖。具体有哪些动画可以看。原创 2021-06-15 17:27:10 · 1246 阅读 · 0 评论 -
在 vue 中使用 jquery 方法
在 vue.config.js 中配置。使用以下命令安装 jquery。在需要使用的页面中引入即可使用。原创 2021-05-31 16:27:30 · 6435 阅读 · 0 评论 -
PC端网页项目将网页内容生成为PDF
后台查看结果,有一堆图表数据,老板想给报告导出为 PDF,于是。。。原创 2021-03-18 12:38:37 · 1665 阅读 · 4 评论 -
vue 全局导航守卫使用方法及判断是否已经登录
前言:在很多项目中我们需要使用登录功能,在没有登录时无法查看更多内容,但是登录过后点击退出登录,然后返回上一页还可以继续看,这时候就可以用到导航守卫,使在未登录的时候就只能进入到登录页,在前端可以使用 vue 的导航守卫来完成在此,我使用全局前置守卫在router.js中加入全局前置守卫//全局前置守卫router.beforeEach((to, from, next) => { console.log("beforeEach to:", to); console.log("bef.原创 2021-03-15 11:19:28 · 1242 阅读 · 0 评论 -
vue2 项目使用px2rem插件做自适应
在根目录下创建 vue.config.js,写入。在 App.vue 里的 mounted() 写。原创 2021-03-13 16:44:28 · 953 阅读 · 0 评论 -
uni-app中使用vuex方法
在项目目录下创建 store 文件夹,创建 index.js 文件,引入 vue 和 vuex。uni-app 中是有内置 vuex 的,可以直接使用。在页面中加入计算属性(使用 state 的简单方法)在 main.js 中引入 store。原创 2020-12-24 13:40:38 · 2200 阅读 · 0 评论 -
vue 项目打包成 apk 安装包详细步骤
下面有说明"全屏并非状态栏透明或变色,而是没有状态栏",就像打王者吃鸡的时候,手机顶部状态栏是不显示的,那就是全屏显示。而下面说的状态栏透明则是沉浸式状态栏,这里面没有配置项,但是可以自己写,如果需要可自行添加。随后点击 manifest.json,会给你调出配置页面,自行配置。打开左边源码视图,找到"plus",在这个里面加上这串代码即可。在打包队列中,等就完事了,过会控制台会给你弹出下载链接。就是这个玩意,里面的 css、js 等文件复制过去。大概五分钟过后,打包好了,这个链接就是下载地址。原创 2020-10-27 11:23:42 · 11052 阅读 · 9 评论 -
vant组件库的使用 - - - vue2篇&小程序篇
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。原创 2020-12-07 21:16:57 · 7121 阅读 · 0 评论 -
安装 Vue-CLI 详细方法及踩坑记录
配置: 如果环境中没有配置全局目录,那么安装模块时会自动安装装到 C:\User\当前用户\Appdata\Roaming\npm 目录下。原因: 没有权限,以管理员身份运行即可,也有可能是 nodejs 安装后没有配置环境变量。这个玩意我也是第一次见到,清缓存等方法还会给我报错,就记录一下吧,搞了好长时间,最后参考。右键我的电脑 - - - 属性 - - - 高级系统设置 - - - 环境变量。或者使用下面命令安装 cnpm,然后使用 cnpm 进行安装。用户变量和系统变量应该都是可以的。原创 2020-11-18 22:12:12 · 4830 阅读 · 1 评论