- 博客(89)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 [Vue warn]: Invalid vnode type when creating vnode: false
[Vue warn]: Invalid vnode type when creating vnode: false
2024-03-26 10:44:03
667
原创 CSS选择器学习与使用
CSS中，用来指定网页上我们想要样式化的HTML元素。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象。
2023-02-05 15:35:46
1198
原创 微信jsApi调用失效的相关问题
今天项目新增一个需要，要求添加微信扫一扫的功能，把官方文档看了一下，太简单了，直接拉起来开搞。按文档写的，【公众号绑定JS接口安全域名 ok】-【查看扫一扫接口权限 ok】-【项目引入jsapi ok】-【调用 `wx.config()` ok】-【调用 `wx.ready()` ok】-【调用扫一扫 `wx.scanQRCode()` 失败！】。...
2022-08-03 16:36:18
2343
2
原创 TypeScript学习三（联合类型和类型别名）
本章我们来学习联合类型以及类型别名。在基础类型一文中我们提到过，将变量定义为字符串类型后是不能再赋值为其他类型的，那如果我们需要这个变量既可以是字符串也可以是数值该怎么办？此时我们就可以使用联合类型来实现需求。（Union Types）表示取值可以为多种类型中的一种，除此以外的类型则会报错。举个例子：联合类型使用 分隔每个类型，上面例子中 既可以是 也可以是 类型。当它是 时可以使用 的属性或方法，比如属性 ；当它是 时，因为 没有 属性，所以会编译报错。上面的例子是通过 得到变量准
2022-07-06 17:42:00
459
原创 TypeScript学习二（变量声明）
在前一篇文章，我们了解了TS的安装使用以及基础类型，本文接着学习类型推断以及变量声明的内容。TS的核心功能就是，我们需要给变量或方法添加类型注解来表明数据类型。当没有提供类型注解时，TS编译器会利用来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 类型。有些情况下，我们会比TS清楚更确切的类型，可以使用手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。它没有运行时的影响，只是在起作用。类型断言有两种形式，第一种是语法：第二种是 语法：举个例子：通过上面的例子可以知
2022-06-24 18:31:19
1882
原创 TypeScript学习一（基础类型）
作为前端开发者，我们都知道JavaScript是一门弱语言，它的类型是可以动态发生改变的，由此会导致一些较为隐蔽的错误。而TypeScript作为JS的超集，核心功能就是在编译时将类型错误找出来，可以节省相当多的时间，同时也有利于项目的维护与拓展。为了方便的使用它，我们就需要了解它的功能与特性。要使用typescript就需要先安装，通过npm安装：构建一个TypeScript文件新建一个 文件，输入以下代码：在上面代码中，我们加入了TS的，然后使用将ts文件编译成js文件：编译后的js代码如下：
2022-06-23 18:45:46
357
原创 了解ES6模块
在早期，JavaScript程序很小，用来你的 web 页面需要的地方提供一定交互，所以不需要多大的脚本。而后来，随着JavaScript程序越来越复杂，需要一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，著名的 和 诞生了。前者主要用于服务端，后者则是用于浏览器。但这些都是社区提供的模块加载方案，随着ES6的到来，JavaScript原生模块（）也正式在浏览器登场。ES Module（简称）在所有现代浏览器都支持，它依赖于 和 命令。命令用于，命令用于。一个模块就是一个独立的文
2022-06-17 16:53:18
856
1
原创 VueCLI5.X版本构建项目(打包)本地打开报错
报错截图：报错分析：跨源请求只支持协议方案:http, data, chrome, chrome-extension, chrome-untrusted, https。解决方案：1、把项目部署到服务器2、在vscode安装插件Live Server在html文件右键打开：其他：在vue-cli5之前的版本中，打包项目是可以本地打开的，只要在vue.config.js 中配置 publicPath 选项，但是在vue-cli5中无效。查看了打包文件后，发现vue-cli5打包的in
2022-05-25 13:53:39
1022
5
原创 postcss-px-to-viewport安装及使用
简介如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。安装npm安装npm install postcss-px-to-viewport --save-devyarn安装yarn add -D postcss-px-to-viewportpnpm安装pnpm add -D postcss-px-to-viewport配置参数默认参数：{ // (String) 需要转换的单位，默认为"px" uni
2022-05-19 11:40:56
15218
2
原创 ECharts饼图常见效果
本文记录一些平时常见的折线图的效果图及代码，需要时方便直接套用。本文只列出echarts的配置项代码，不了解echarts的使用方法可查看官方文档。基础饼图、选中高亮效果图：配置项：option = { tooltip: { trigger: 'item' }, legend: { left: 'center' }, series: [ { name: '电商', type: 'pie', radius: '50%',
2022-05-15 20:59:34
4488
1
原创 vue全局引入vant时报错Vant is not defined
今天接手离职同事的项目，项目用到了vant，他使用的按需引入的方式个人感觉引入了这么多组件，还不如直接全部导入，后面用到没引入过的组件也能直接使用，因此把按需引入的代码改成了全局导入的方式，然后运行，报错：Vant is not defined。检查文档后发现了一个提示：此处的配置是引入方式一的 自动按需引入组件，因为我平时项目如果引用vant组件极少，会使用引入方式二的 手动按需引入组件，方式二不需要任何配置，在需要的页面即写即用但是方式一（推荐方式）是需要配置的，并且与全局引入方式是冲突的
2022-05-12 14:41:14
8498
2
原创 pnpm的安装与使用
项目初衷当使用 npm 或 Yarn 时，如果你有 100 个项目使用了某个依赖（dependency），就会有 100 份该依赖的副本保存在硬盘上。 而在使用 pnpm 时，依赖会被存储在内容可寻址的存储中，所以：如果你用到了某依赖项的不同版本，只会将不同版本间有差异的文件添加到仓库。 例如，如果某个包有100个文件，而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件，而不会因为仅仅一个文件的改变复制整新版本包的内容。所有文件都会存储在硬盘上的某一
2022-05-07 16:25:44
7640
原创 ECharts柱状图常见效果
目录基础最大值、最小值、平均值条形：横向背景色折柱混合堆叠、高亮本文记录一些平时常见的柱状图的效果图及代码，需要时方便直接套用。本文只列出echarts的配置项代码，不了解echarts的使用方法可查看官方文档。基础效果图：配置项：option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'val
2022-05-06 22:10:22
2091
原创 ECharts折线图常见效果
目录基础平滑最大值、最小值、平均值图表标域区域填充坐标轴留白策略：紧挨边缘缩放：脱离 0 值比例堆叠同期比对、多x轴渐变面积图、拐点描边样式、悬停显示拐点本文记录一些平时常见的折线图的效果图及代码，需要时方便直接套用。本文只列出echarts的配置项代码，不了解echarts的使用方法可查看官方文档。基础效果图：配置项：option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',
2022-05-01 22:38:50
1919
原创 Mock.js基本使用
核心生成随机数据，拦截 Ajax 请求安装npm install mockjs或yarn add mockjs语法规范语法可参考官网API，前往语法规范；效果可参考官网示例，前往示例。方法参数rurl可选表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、’/domian/list.json’。rtype可选表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。templa
2022-03-17 15:51:07
549
原创 vant picker选择器自定义选项内容
前言项目中遇到需要在选择器中展示多行数据，这里需要用到picker的自定义选项内容。代码<template> <div class="app-container"> <van-nav-bar :title="navTitle" /> <section> <van-form @submit="onSubmit"> <van-field readonly
2022-03-16 17:57:26
11183
8
原创 vue图片压缩上传
前言之前图片压缩是公司前辈留下的一个js方法，采用的回调函数处理。最近一个项目为了优化用户体验，在图片上传失败后要根据接口返回的状态值更改页面UI，此时该js方法就会出现异常，于是我找到了 image-conversion。安装npm i image-conversion --save或者yarn add image-conversion引入import * as imageConversion from 'image-conversion'或者import {compress, c
2022-03-16 16:45:04
8840
2
原创 Vue开发报错To install it, you can run: npm install --save core-js/modules/es.reflect.to-string-tag.js
报错经过一开始使用vue-cli创建了一个vue2项目，然后安装各种需要的依赖并且配置选项，想着下次做类似项目还要再安装依赖再配置一遍很烦，就想着弄一个通用的模板，能偷点懒也是好的。别的都没遇到什么问题，唯独固定版本号时出现了错误。上图是项目中的依赖以及版本，我想着既然这个版本能运行起来，那就直接固定用这套版本号好了，当时只知道 ^ 和 ~ 不会固定版本号，想着把它们去掉应该就行了。事实证明，这个想法错的很离谱。将两个符号全部删除后，重新执行安装依赖，然后运行程序，就报了最上面的错误。看一下.
2022-03-07 13:50:24
4140
原创 Vant定制主题
简介Vant是一个便捷、好用的移动端组件库，你可以通过它快速的搭建移动端网页。组件中提供了大量的属性供我们自定义编辑，但也有一些常用属性组件中并未提供，比如 NavBar导航栏 的背景色。想要修改它我们有两种方案，第一种是 检查元素 ，找到对应的类名，修改相关属性即可。第二种是 定制主题 ，下面详细介绍该方案。定制主题介绍Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。Vant 使用了 Less 对
2022-02-24 15:08:31
3229
1
原创 Chrome浏览器全屏打开指定网页以及开机自启
前言最近一个项目是给社区做一个便民服务，设备是室外触摸大屏（windows系统），而项目载体居然是web网页。项目的核心是只给用户使用网页上的内容，那么需求就很明确了：浏览器全屏打开指定网页浏览器开机时自启动具体操作因为平时开发时使用Chrome浏览器居多，所以设备上准备安装Chrome来实现效果。全屏打开指定网页首先是浏览器全屏打开指定网页，通过参数 --kiosk 可以实现，具体写法：--kiosk https://www.baidu.com右键Chrome快捷方式，打开 属性
2022-01-26 10:20:24
12538
原创 animate.css的使用
前言Animate.css是一个现成的跨浏览器动画库，此处采用的是v4版本，v3.x 及以下更新之前参考官网的迁移指南。安装使用安装使用npm安装：npm install animate.css --save使用yarn安装：yarn add animate.css将其导入你的文件：import 'animate.css';或者使用 CDN 将其直接添加到你的网页<head> <link rel="stylesheet" href="https://cdnj
2022-01-25 18:18:58
728
原创 vue2+高德地图实现区域采点功能
前言最近业务中遇到一个需求，要把一些小区的边界画在地图上，而客户是没有坐标提供的，那么就只能自己在地图上将小区边界画出来。这里使用的是高德地图，并没有找到相关的可以直接画边界的功能，所以这里采用 绘制覆盖物 + 覆盖物编辑 来实现效果。步骤这里大概解释一下步骤，查看详细代码可以直接跳过创建vue2项目，添加 JSAPI Loader 依赖初始化地图添加 鼠标工具-绘制覆盖物添加 多边形编辑器添加 右键菜单添加 关键字搜索 (非必须)详细代码<template> &
2022-01-11 11:57:13
886
原创 html移动端浏览器宽度默认980以及如何自适应
前段时间一直开发vue项目，创建项目都是使用的脚手架，很多细节都没有太多关注，今天突然安排做一个简单的移动端页面，只是要求要用原生来实现，结果遇到了未曾想到的问题。如下图：图上页面宽度固定是980px，而我选的移动端设备宽度明明是375px，而且不论选择其他哪种分辨率结果都一样，甚至我还换了不同浏览器做测试，结果自然都一样，因为根本不是浏览器的问题。通过百度得知，safari 中 viewport 默认宽度为 980px。也就是说，如果你不指定 viewport 的宽度，那么就会默认按980处理。回
2021-12-07 11:12:43
5196
原创 vue中使用canvas手写输入识别中文
效果图前言最近做一个室外大屏项目，系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。核心后端接口api：使用 QQ输入法手写接口https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi参数说明类型默认值track_str笔画字符串，单笔画以’x1,y1,x2,y2,…‘格式拼接，多笔画在单笔画的基础上以eb拼接，例如’x1,y1,x2,y2,eb,x3,y3,x4,y4’s
2021-11-15 17:41:30
3357
7
原创 vue-jsonp的使用
前言最近在做手写输入法时遇到跨域问题，使用的是qq输入法的接口，代理无法实现效果，这里使用jsonp来实现。jsonp原理可以自行百度，这里记录一下vue-jsonp的使用和踩的一点小坑，官方文档请前往npm地址。安装npm install vue-jsonp -S或者yarn add vue-jsonp使用mian.js引用// main.jsimport Vue from 'vue'import { VueJsonp } from 'vue-jsonp'Vue.use(
2021-11-10 17:51:45
3718
原创 jquery删除包含指定字符串的类名
前言通常情况下我们使用 removeClass 来删除具体的类名，例如 $(“p”).removeClass(“selected”)。但也有一些情况，我们需要删除的不是具体的类名，而是包含有些特定字符串的类名，同样也是使用 removeClass 。removeClass方法removeClass([class|fn])jquery v1.4新增了参数function，因此可以通过回调函数来返回更复杂的类名：// 删除'part'开头的类$('.container').removeClass
2021-10-28 13:19:58
891
原创 VueCLI4更改创建项目时的包管理器
当电脑上只存在npm时，创建新项目是不会提示选择包管理器的。当电脑上同时下载了npm和yarn，创建新项目会弹出如下提示：选择了yarn后，下一次创建新项目时不再提示选择包管理器，默认使用了yarn。为什么会默认使用yarn？如果想切换成npm该怎么办？回顾了一遍官方文档找到了问题所在：一开始我以为选择包管理器会跟着preset一起被保存起来，事实上创建完项目后它就被保存进 ~/.vuerc 文件中。如果是windows系统，文件存在了 C:/user/administrator/ 下：将y
2021-10-25 16:04:04
326
原创 echart柱状图自动滚动
效果图代码<template> <div ref="myChart" style="width: 600px; height: 400px;"></div></template><script>import * as echarts from 'echarts'export default { mounted() { this.initChart() }, methods: {
2021-10-25 15:26:42
5318
3
原创 JavaScript数组Array常用方法
push()：添加新元素到数组末尾，会改变原数组。var array = [‘Hello’]array.push(‘JavaScript’)console.log(array) // [‘Hello’, ‘JavaScript’]unshift()：添加新元素到数组开头，会改变原数组。var array = [‘Hello’]array.unshift(‘JavaScript’)console.log(array) // [‘JavaScript’， ‘Hello’]concat
2021-10-14 17:26:36
562
vant-weapp-dev.zip
2020-07-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人