- 博客(32)
- 收藏
- 关注
RSS订阅原创 Vue3 自定义指令
不同于vue2不需要被use使用，vue3的机制是你的指令必须要被注册成方法的，这样你才能全局使用到自定义指令，细看可以知道，在前端项目中，有很多需求是需要在多页面进行逻辑处理，通常我们所需要的功能可以通过。但是在vue3中注册机制已经改变，如果你还是沿用原来的注册方法，指令将。操作来实现，或者多处功能一致，我们就可以使用自定义指令。在接下来的全局注册到应用层级，文档就并不是非常的清晰了。在vue2中的自定义指令指令注册的方法是。，我们就可以拿到app去注册全局指令了。接收一个方法，方法返回参数携带。
2022-09-27 13:35:22
1003
原创 Vite图片压缩(vite-plugin-imagemin) imagemin error: XXXX解决办法
1 安装 vite-plugin-imagemin（yarn or npm）node version: >= 12.0.0vite version: >=2.0.0yarn add vite-plugin-imagemin -Dornpm i vite-plugin-imagemin -D2 imagemin error:XXXXX因为imagemin在国内不好安装，所以提供几个解决方案1）使用yarn在package.json内配置（推荐）"
2022-05-12 15:29:46
13214
5
原创 Vue3+TypeScript+ElementPlus 组件式开发思路分享
Vue3+TypeScript+ElementPlus 组件式开发思路分享 如何设计组件
2022-04-07 16:00:31
1314
1
原创 Vite使用.env文件
Vite使用.env文件开发中经常会使用环境变量，Vite相比于Webpack 也有一定的变化项目目录下创建.env.development .dev.production文件NODE_ENV = 'development'VITE_APP_BASE_API = '/api' // 暴露必须以VITE开头才能被Vite识别项目使用import.meta.env.XXXXif (process.env.NODE_ENV === 'development') { BASE_URL
2022-01-11 17:36:47
8829
原创 Vue3 模版介绍
Vue3 - Vite - TypeScriptVite ：下一代前端开发与构建工具基于原生 ES-Module 的前端构建工具ES-Module 代码模块化的语言规范快速冷启动即使的模块热更新按需编译TypeScript：JavaScript的一个超集TS入门教程面向对象设计和编程遵循的几个原则：SOLID原则：SRP(Single Responsibility Principle) 单一职责原则；OCP(Open Closed Principle) 开/闭原则；LSP
2022-01-08 14:21:16
2994
原创 每日算法系列（二）之 罗马数字转整数
罗马数字转整数罗马数字包含以下七种字符: I， V， X， L，C，D 和 M。字符 数值I 1V 5X 10L 50C 100D 500M 1000例如， 罗马数字 2 写做 II ，即为两个并列的 1 。12 写做 XII ，即为 X + II 。 27 写做 XXVII, 即为 XX + V.
2021-12-20 08:55:42
459
2
原创 vue3 Ts script-setup 语法糖 父子组件通信 使用sync,defineEmit,defineProps,defineExpose
较比更加简洁化真香～父组件<template> <div class="point-dist"> <div class="point-dist-top"> <div class="point-msg-top"> <point-map ref="mapBox" // 绑定ref 通过ref取子组件方法 参数 @getMapData="getMapData"
2021-12-17 16:47:39
2137
原创 每日算法系列（一）之 回文数
回文数给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121 是回文，而 123 不是。示例 1：输入：x = 121输出：true示例 2：输入：x = -121输出：false解释：从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。示例 3：输入：x = 10输出：false解释：从右向左读, 为 01 。因此它不是一个回文数。示例
2021-12-16 13:52:08
689
原创 leaflet经纬度计算角度
地图坐标 转换 容器坐标 来进行角度计算先看效果图根据地图上的两个经纬度坐标来确定线条的角度首先，需要获取map容器对象const map = window.weatherAnalysisMap通过leaflet 经纬度坐标转容器坐标 map.latLngToContainerPoint(lat, lon)拿到该经纬度在容器内的坐标点得到起始坐标点和终止坐标点之后 通过atan2()最后将得到的角度值通过计算圆角度计算360 * Math.atan2(diffY, diffX)
2021-11-02 16:21:42
1212
原创 Vue3 + Vite 动态引入图片
Vue3 + Vite 动态引入图片开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错require is not defind查看vite官方网站官方说明import imgUrl from './img.png'document.getElementById('hero-img').src = imgUrl行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可
2021-11-01 11:54:28
8139
原创 echart柱状图 渐变色 不同颜色 线条
echart柱状图渐变色柱子通过series中 itemStyle color offset控制 可以有多个series: [ { name: '到站率', type: 'bar', barWidth: '60%', data: [100, 100, 70, 100, 100, 100], itemStyle: { normal: {
2021-06-21 14:46:47
1124
原创 leaflet地图手册使用指南
！！！官方文档太难阅读，建议配合另外一个博客中的线上地址食用，都是网上复制查找的，方便使用就行，见谅。另一篇地址：Vue2LeafLetL.MapAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。Constructor（构造器）通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其中文字对象是可选的。Options（选项）Map State Options（地图状态选项）centre（中心）：初始化地图的地理中心。zoom（缩放）：初始化地图的缩放。layers（图
2021-05-14 15:35:34
3569
原创 Vue2Leaflet 官方使用方法
Vue2Leaflet文档由于本司是做气象方面的，之前也就玩了一下百度地图api，但是公司用到的是leaflet，所以最近在学leaflet使用，首先附上官方文档的地址→leaflet于是很多人就想知道Vue怎么使用leaflet，上教程。在GitHub上面找到开源地址开源项目文件地址： Vue2Leafletgit clone把项目下载到你需要的文件夹里面npm i安装项目所需依赖npm run dev项目跑起来就是localhost：8080文档页面愉快的学习起来吧。!!!
2021-05-14 15:14:08
2518
原创 Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `
使用修饰器报错用create-react-app脚手架搭建react项目 在使用到mobx的时候 用到了修饰器 报了以上错误 百度了一下，发现是使用修饰器之后，eslint会报错解决方案如下：打开package.json 找到 eslintConfig添加以下代码"parserOptions": { "ecmaFeatures": { "legacyDecorators": true } },这样就OK...
2021-04-05 10:19:03
1122
原创 mobx修饰器警告 对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告
mobx的修饰器警告对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告。使用mobx的修饰器 vs code 的警告解决方案：打开vscode选择文件首选项 设置搜索 experimentalDecorators把该选项打上勾勾...
2021-04-04 15:28:19
342
原创 Vue脚手架 快速搭建
Vue-clivue-cli脚手架是什么听说脚手架这个词 大家脑海中应该是这样的其实还真是这样的vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。Vue项目的两种搭建方式命令行搭建1 进入到创建的目录下输入命令 vue create vueapp 其中 vueapp => 项目名称2 选择预设第一个（vue2） 和 第二个（vue3）
2021-03-09 16:06:27
280
原创 Vue搭配路由的五步曲
Vue搭配路由0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)单独开发的都是模块化编程 需要通过important require 导入1. 创建组件（路由）var Home = {template:"#home",mounted(){}}var Find = {template:"#find",watch:{}}var List = {template:"#list",data(){ return {
2021-03-09 14:30:57
176
原创 Vue组件（学习笔记）
组件基础Vue组件注册 入门Vue 组件 代码复用和抽象的主要形式是组件 封装代码组件当做小型的 单元实例对象 带有一个名称 (小巧 独立 可复用)必须包含 一段 HTML标签的 代码块 (css样式 javascript代码)显示页面 展示数据 修改数据组件当做小型的 vm 实例对象 (组件系统 vue 核心)全局注册Vue.component("test", { template: "<div>组件test</di
2021-03-08 19:42:50
368
原创 git
前言项目需要迭代我们开发的应用程序是需要不断的迭代的，比如 version 1.0 、version 2.5 、version 3.9.11，这些指的都是版本号。不同版本号的应用程序，里面的功能都是不一样的，比如我们做一个名字叫做 project1 的应用，v1.0时可能仅仅只是基础框架，v1.1时增加用户中心模块，然后用了一段时间出现了一个致命的bug，然后我们把 project1 升级到了 v1.1.1 解决了这个bug，所以说应用程序是需要不断的迭代的。版本号规范版本号有很多种规范，下面列
2021-03-08 08:28:54
157
原创 sass
Sass世界上最成熟、最稳定、最强大的专业级CSS扩展语言！Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开 (了解)sass和scssSASS 是 CSS3 的一个扩展，增加了规则嵌套、变量、混合、选
2021-01-29 11:49:28
145
原创 AJAX的封装和二次封装
传统的AJAX请求//get请求var xhr = new XMLHttpRequest();xhr.open("get","url"+"?"+data,true); //get方法将请求的数据以字符串拼接的方式放在地址后面xhr.send();xhr.onreadystatechange = function (){ if(xhr.readyState==4&&xhr.status==200){ var result = xhr.responseText;
2021-01-20 16:35:35
665
原创 ajax
AJAX什么是Ajax？是指一种创建交互式网页应用的网页开发技术。AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。特点:在不提交整个页面的情况下,实现页面的局部刷新;AJAX产生的背景：以前做数据交互的时候，大家通常选择使用
2021-01-19 08:52:12
132
原创 php链接mysql
PHP链接数据库如何通过php链接数据库,实现对数据的增删改查?链接mysql; $conn = mysqli_connect("localhost:3306","root","root"); localhost 数据库主机名 3306 数据库默认端口 root 用户名 root 密码 返回一个 连接对象(后续数据库的操作,需要用到此对象)选择数据库; mysqli_select_db($conn,
2021-01-18 10:46:57
111
原创 php
PHP初识为什么学php?为了熟悉前后端交互 业务流程 学习php安装PHPstudy? 通过live server 起的假的服务,不能做逻辑处理(没有php的运行环境) 所以学习php什么是php? PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。 PHP（全称：PHP：Hypertext Preprocessor，即"PHP：超文本预处理器"）是一种通用开源脚本语言。 PHP 脚本在服务器上执行PHP 文件是什么？PHP 文件可包含文本、HTML、CSS、Ja
2021-01-18 08:49:19
201
原创 mysql
MySql什么是数据库?数据库(Database)是按照数据结构来组织、存储和管理数据的仓库。MySql 是什么样的数据库?简介:MySQL 是最流行的关系型数据库管理系统(关系型数据库是由多张能互相联接的二维行列表格组成的数据库); 特点： 1.数据以表格的形式出现 2.每行为各种记录名称 3.每列为记录名称所对应的数据域 4.许多的行和列组成一张表单 5.若干的表单组成database相关术语: 数据库: 数据库是一些关联表的集合。
2021-01-15 16:43:54
1008
3
原创 原生js实现轮播图 详细解释
原生js实现轮播图每一步都解释很详细话不多说 上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script
2021-01-11 19:41:50
327
原创 flex弹性盒子做骰子详解
什么是flex网页布局是css的一个重点应用。我们传统的布局的解决方案是基于盒装模型，依赖display属性+position属性+float属性。而这种布局相对来说不是很方便，类似垂直居中就不容易实现。2009年，W3C提出了一种新的方案----flex布局，可以简便、完整、响应式地实现各种浏览器的支持，这就意味着，现在能很安全的使用这项功能。弹性盒子来制作骰子做出来的效果就是这样的那么我们该如何用弹性布局来实现呢首先我们要了解弹性盒子使用流程首先我们要定义一个弹性盒子displa
2020-12-05 09:51:05
4149
2
原创 CSS简单写三角形
最近写网页看到很多小型三角形 就比如：那么 怎样不用ps切图来做到类似的效果呢首先：给一个div盒子，盒子有四个边 我们设置四个边为透明色 border的宽度就是我们要的三角形的大小 我们给了一个透明色之后 我们会看看不到 接下来就是给上我们需要的角颜色 就是套上border-top border-left border-bottom boder-right 四个属性并给一个颜色的属性值 这样 一个三角形就出来了 .triangle{ border: 10px solid rgba(0
2020-12-04 20:31:06
358
转载 2020-12-03
A*算法 一级棒转载：https://www.gamedev.net/reference/articles/article2003.asp简介：搜索区域让我们假设有人想要从A点到达B点。让我们假设一堵墙将两个点分开。如下图所示，绿色为起点A，红色为终点B，蓝色填充的正方形为中间的墙。您应该注意的第一件事是，我们已经将搜索区域划分为一个正方形网格。正如我们在此处所做的那样，简化搜索区域是寻路的第一步。这种特殊的方法将我们的搜索区域缩小为一个简单的二维数组。数组中的每个项目代表网格上的一个正方形，其状
2020-12-03 10:24:55
230
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人