仰望星空的代码
专注Web前端和微信小程序开发。
展开
-
基于 jspdf.js 库生成 PDF 文件时中文乱码问题的解决
因此,要解决这种方式中文乱码的问题,其实就是解决 html2canvas 库对中文的不支持问题,其解决方式是通过设置 html2canvas 的字体。中的字体转换器,可以将字体的ttf文件转换为base64编码字符串的形式。使用 jspdf.js 生成 PDF 文件有两种方式:一种是创建 jsPDF 实例后,手动使用 addPage、text 等 api 把获取到的数据排版生成 PDF 文件;jsPDF支持 .ttf 文件,因此,如果你想在 PDF 中使用中文文本,则字体必须具有包含必要的中文字形的功能。原创 2023-03-08 18:06:17 · 4138 阅读 · 0 评论 -
视频自动播放的实现与问题解决
一个布尔属性,如果为 true,那么当用户在当前页面和另一个页面或应用程序之间来回切换时,会自动切换画中画(picture-in-picture)模式。在发布代码之后,页面第一次加载时,视频可以正常播放,但是在页面刷新后,视频却不能正常播放了。通常,网站上展示的视频推荐采用 WebM 格式,其中使用 VP9 编解码器,以及 MP4 格式,采用 AVC(H.264)编解码器。muted:布尔属性,指明在视频中音频的默认设置。指定后,会在视频播放结束的时候,自动返回视频开始的地方,继续播放。原创 2023-03-03 15:00:22 · 1384 阅读 · 0 评论 -
在 vite 为构建工具的开发环境中实现 SVG 图标组件化
一、前言在以 webpack 为构建工具的开发环境中我们可以很方便的实现 SVG 图标的组件化,这里面 require.context 可以被使用是实现的关键。在 vite 为构建工具时,require.context 不再可用,那应该采用什么样的方式实现呢,这就是本文的要阐述的内容。 开发环境版本: vue:v3.2.31 vite:v2.8.0vite-plugin-svg-icons:v2.0.1二、we......原创 2022-02-25 10:43:08 · 1399 阅读 · 0 评论 -
vue-router v4.x版本创建router对象注意点
vue-router 的 v4.x 版本是为适应 vue3 而开发的版本,它的引入和创建实例对象的方式有所改变,在使用的时候容易忽略变化导致低级错误。1、采用旧的导入方式 在 npm 管理依赖包的开发模式下使用 import 导入时不能采用 import Router from 'vue-router' 的方式,应该采用import {createRouter, createWebHashHistory} from 'vue-router',否则会报错...原创 2022-01-18 10:33:11 · 1687 阅读 · 0 评论 -
Vue项目中Nginx配置及第三方模块添加采坑记
一般项目的前端工程都是在开发完毕并打包后交给后端或运维来部署,前端开发人员是两耳不闻部署事,一心只把UI画。正在开发的一个项目采用了前端人员自己部署打包好的前端文件并自己配置web服务器,web服务器采用的是高性能web服务器——Nginx。本文记录在使用Nginx过程中遇到的各种坑,比如Nginx的基本配置、作为反向代理服务器的配置、缓存的配置、读取环境变量的配置等等。原创 2021-11-22 15:58:55 · 2212 阅读 · 0 评论 -
ts配置文件配置踩坑
文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言tsconfig.json是一种内置的能够管理TypeScript工程的配置文件。“tsconfig.json”配置文件是一个JSON格式的文件,用来管理TypeScript工程的功能。在配置的过程中有可能回产生一些配置,而这些错误可能不那么容易发现和解决。一、增加allowJs:true配置项后编辑器报错 1、报错信息 无法写入“XXXXX.js...原创 2021-10-31 19:55:46 · 756 阅读 · 0 评论 -
vue3中如何优雅地在 setup 使用 globalProperties
一、前言vue3 已经发布到 v3.2.x 版了,在项目中也使用上了 vue3,总体感觉还是不错的。vue3 中使用Proxy 来实现响应式数据,解决了 vue2 中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问题。vue3 中的模板可以包含多个根节点、v-model 参数化等等特性也很值得肯定。还没有使用 vue3 的开发者,推荐赶快上手试用。二、令人困惑的 globalPropertiesvue3 中每个 vue 的实例都会对外暴露一个包含此应用实例的原创 2021-09-15 22:34:22 · 12381 阅读 · 1 评论 -
vue中可响应式provide/inject的实现
一、基本概念当需要访问父级组件的实例的时候,我们可以通过$parent属性来获取父级组件的实例。但是,在嵌套了多层组件并且想在较深层级的子组件中获取顶级父级组件时通过这个属性就不太好了。这个时候就要用到vue中依赖注入的概念了。vue中依赖注入的具体实现是通过两个实例选项——provide/inject实现的。provide选项允许我们指定我们想要提供给后代组件的数据/方法。示例:export default { provide: function(){ retur原创 2021-04-22 16:32:08 · 1515 阅读 · 0 评论 -
npm发布项目报404错误解决
一、问题描述在npm官方创建了账号并且创建了一个项目,在向npm使用npm publish命令发布项目时报错。报错内容为 404.'projectName@0.0.1' is not in the npm registry.。二、解决方案通过查询资料得知造成这个报错的原因是在命令行中未登录到npm,执行npm publish命令时无法通过npm的权限校验。所以,只需要登录npm账号获取到token,再执行npm publish命令就可以了。步骤如下。在命令行终端执行 npm login。在.原创 2021-04-09 14:21:40 · 6334 阅读 · 0 评论 -
最完整的webpack Dll打包与采坑总结
webpack已经成为前端主流的项目打包工具,对于前端开发必不可少。在前端项目依赖第三方库过多,项目比较大文件比较多时,webpack打包的速度也会被拖成蜗牛,是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式,其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库(动态链接库:windows系统中库文件概念,这里是借用了这一概念。),DllPlugin将不频繁更新的库进行编译,当这些依赖的库的版本没有变化时,就不需要重新编译。如果更新了依赖的第三.原创 2020-05-21 15:29:43 · 1048 阅读 · 0 评论 -
解决vue项目在development模式下ie11、ie10 出现语法错误的问题
一、前言开发vue项目过程中,在development模式下发现在IE10,、IE11中无法运行,打开控制台发现已经报错。错误信息提示语法错误,打开定位到的报错位置,可以发现是严格模式报错。编译的代码中出现严格模式可能是因为代码中存在es6而没有被转换为es5,而在项目中已经配置了babel;正常情况下是不会出现es6未被转换的情况的。由于babel配置采用的是vue官方推荐的或者说vue...原创 2020-01-09 15:31:11 · 4728 阅读 · 0 评论 -
基于vue-cli3创建的项目引入PWA(二)
在上篇文章中写了安装PWA插件、配置PWA插件的步骤以及注意点,这篇文章写一下service worker的实现——sw.js。一、安装installservice worker在注册完成后会进入到安装阶段。在安装阶段service worker的生命周期状态是installing-->installed,当service worker安装成功时状态变为installed。安装成...原创 2019-08-15 19:02:51 · 4826 阅读 · 0 评论 -
vue-cli构建项目报“Unexpected space before function parentheses”错误
解决方案:在项目目录下找到.eslintrc.js文件,使用编辑器打开进行编辑。在rules下添加'space-before-function-paren': ['error',{anonymous: 'always',named: 'always',asyncArrow: 'always',},]即可。如图:...原创 2018-07-30 14:47:38 · 23771 阅读 · 0 评论 -
vue-cli 构建的项目中如何使用 Less
vue-cli 构建的项目默认是不支持 less 的,需要自己添加。首选,安装 less 和 less-loader ,在项目目录下运行如下命令npm install less less-loader --save-dev安装成功后,打开 build/webpack.base.conf.js ,在 module.exports = 的对象的 module.rules 后面添加一段:...转载 2018-08-07 13:52:15 · 533 阅读 · 0 评论 -
ASP.NET Core Web API+Vue.js+axios 实现图片下载
前端访问下载图片API下载图片。一、ASP.NET Core Web API代码方案一: [Route("api/[controller]")] [ApiController] public class DownloadController : BaseController { // GET: api/Download [...原创 2018-09-21 14:25:30 · 3198 阅读 · 0 评论 -
element UI表单验证:一个复杂循环表单渲染后数据修改后的部分表单项验证
一、前言普通的表单验证参考element UI官方文档即可找到解决方案并顺利进行代码实现,官方也给出了几个示例,是很好的参考。不过,对于复杂的表单验证,官方文档并没有给出过多示例或者说明。文章中的实例就是在实际项目中遇到的一个复杂表单的验证问题。文章中前端代码基于Vue.js框架,element UI开发。表单的初始数据来自API返回的数据。返回的数据结构如下:{ Id:'',...原创 2018-09-27 10:29:35 · 3074 阅读 · 0 评论 -
使用Jenkins自动化部署Vue.js项目——兼容Vue CLI3生成的项目
Jenkins是非常流行的持续集成工具。使用Jenkins部署服务器端应用程序是非常方便的,那么使用Jenkins部署web前端应用程序效果怎么样呢,如果可以使用Jenkins部署,那么就可以直接从版本库自动拉取,自动构建,相比传统方式会省去很多麻烦。一、准备服务器上已经安装并配置好了Jenkins。二、部署步骤1、新建任务。点击左侧导航“新建任务”,跳转到新建任务页面,输入任务名...原创 2018-10-13 17:09:38 · 8720 阅读 · 1 评论 -
Vue.js——监听组件的生命周期
有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规的写法可能如下:// Parent.vue<Child @mounted="doSomething"/>// Child.vuemounted() { this.$emit("mounted");}这里提供一种特别简单的方式,子组件不需要任何处理,只需要在父组...转载 2019-07-04 10:59:50 · 2119 阅读 · 0 评论 -
Vue-cli3执行serve和build命令时nodejs 内存溢出问题
前端项目越来越大,最近在执行serve和build命令时出现了CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory错误。这是因为在webapck打包过程中占用的内存堆栈超出了node.js中采用的V8引擎对内存的限制导致的。V8引擎对内存的使用的默认大小限制是1.4G,可以通过node.js命令设置限制...原创 2019-07-04 11:21:53 · 14136 阅读 · 2 评论 -
基于vue-cli3创建的项目引入PWA(一)
在vue-cli创建的项目中要引入pwa可以通过安装和配置webapck插件进行集成,但是通过vue-cli3创建的项目是不推荐这种方式的。在vue-cli3的插件的中存在一个pwa插件,可以通过这个插件来引入PWA。零、配置manifest.jsonmanifest.json的各项配置基本是固定的,配置完成后基本不会修改了,不同项目配置时display项不需要修改。如下。{ "...原创 2019-08-15 15:06:16 · 7486 阅读 · 4 评论 -
vue-cli构建项目时eslint一直报Expected linebreaks to be 'LF' but found 'CRLF'错误
解决方案:在项目目录下找到.eslintrc.js文件,使用编辑器打开进行编辑。在rules下添加'linebreak-style': [0, 'error', 'windows']即可。如图:原创 2018-07-30 11:46:27 · 9344 阅读 · 0 评论