- 博客(58)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 构建vue项目配置和环境配置
注意：变量名必须以 VUE_APP_ 开头，这样才能在项目中被识别为环境变量。新建文件.env.development。新建文件.env.development。新建文件.env.production。新建文件.env.production。vite中获取环境变量。vue中获取环境变量。
2023-08-01 10:27:37
546
原创 nuxt使用fullpage.js详细解决方案
nuxt框架ssr渲染使用fullpage.js实现滚屏的效果。直接上代码两种引入方式。一种网络资源，一种本地资源。网络资源会遇到控制台报错。解决办法在下方。所以最好使用本地资源。注意：1、引入本地资源的时候要注意顺序。先引入jquery。再引入fullpage.js。否则会报错。2、引用时，不需要添加/static目录，因为/static目录编译后会被映射到/目录。html页面内容直接放入template中。如果添加了/static目录，则会报错找不到该资源3、解决在本地资源fu
2022-11-09 17:42:05
964
1
原创 vue3+ts 找不到模块“./App.vue”或其相应的类型声明。
新建env.d.ts文件或者如果原有env.d.ts文件，则加入以下代码即可。vue3+ts项目中在编辑中出现这种提示解决办法。
2022-10-10 15:46:33
1095
原创 vue eslint语法检查报错忽略
在vue项目中经常遇到eslint语法检查报错，多了个空格或者少了个符号都会报错，页面也打不开，每次调试很麻烦。建立文件.eslintignore，与src同级别。保存后重新启动项目即可。就不会有语法报错了。使用命令自动格式化这些语法错误。2、使用eslint忽略语法错误。1、使用框架自带的命令。但这种方式非常不便捷。
2022-09-30 09:54:45
5315
原创 leaflet入门使用教程
它可以在所有主要的桌面和移动端平台上高效的运转，可以扩展插件，它有一个漂亮的、易用的和文档清晰的API，还有一个简单、易读的源代码。Leaflet是用于适用于移动端交互地图的主要的开源JavaScript库。JS库的大小为38k左右，但是拥有大部分开发者需要的全部地图功能。更多地图类型（http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png）可以查看。点击官网的DownLoad按钮，跳转到下载页面，点击对应包下载。点击喜欢的地图会展示弹窗，复制粘贴即可。...
2022-08-29 11:31:05
6578
1
原创 webGL API笔记
如果没有指定背景色(也就是说，你没有调用gl.clearColor()),那么使用的默认值如下所示；这个程序的功能就是，使用背景色清空了标签的绘图区。即清空了定义的矩形区域。3、在绘图上下文上调用相应的绘图函数，以绘制二维图形；2、向该元素请求二维图形的“绘图上下文”；........................
2022-08-26 10:22:09
63
原创 threejs效果记录
/ 使用SceneUtils创建多材质对象 let mesh = new THREE . SceneUtils . createMultiMaterialObject(geometry , materials);}
2022-08-18 11:44:44
3370
5
原创 threejs个人笔记
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)width — X轴上面的宽度，默认值为1。height — Y轴上面的高度，默认值为1。depth — Z轴上面的深度，默认值为1。widthSegments — （可选）宽度的分段数，默认值是1。heightSegments — （可
2022-08-17 10:34:02
1703
2
原创 手把手教会你微前端开发（vue-qiankun）
引用qiankun里的解释简而言之，微前端就是可以将多个模块或者多个项目合并到一个项目中。a项目里可以嵌入b项目的页面，并且可以交互通信。
2022-08-12 10:38:16
3681
原创 一篇文章教会你如何在npm上传自己的包
1、官网注册首先要在npm官网注册自己的npm账户，链接：https://www.npmjs.com/注：由于是国外的网站，特别特别慢。不要灰心2、查询是否存在包名要查看npm官网中是否已有自己准备上传的包名，打开cmd。执行命令指令：npm view 【你的npm包名】注：包名上传时会自动转小写，所以你还是用小写的名称吧如果出现如下图。则表示包名已存在，建议换个其他包名如果出现以下界面，则表示输入的包名可用。3、初始化项目指令： npm init -y注：文件夹名称一定不能有中文
2022-05-24 09:51:30
4631
原创 mysql数据库忘记密码了怎么办
本人用的mysql8版本看到网上很多教程，什么修改配置文件my.ini。在8版本根本没用。以下是8版本解决办法。亲测可用。1、用管理员身份打开命令行工具。（强调：管理员身份）2、停止mysql服务：3、输入以下命令无密码启动mysqlmysqld --console --skip-grant-tables --shared-memory4、 另开一个命令行窗口，输入mysql -u root无密码登录；mysql -u root这时你的Navicat已经可以无密码登录了。5、登录进
2022-04-29 10:02:41
27868
21
原创 常用的特效功能实现代码
鼠标点击弹出爱心鼠标点击弹出文字鼠标点击弹出烟花波纹小星星跟随鼠标鼠标粒子随心拖尾跟随气泡泡笑脸跟随鼠标烟花爆炸蜘蛛网特效星空下雨特效旋转光环旋转光环特效边框下雨效果动态菜单按钮炫光环绕雷达扫描拖拽矩形个人笔记，不喜勿喷，网络搜集，未完待续。
2022-04-24 15:11:07
3462
4
原创 一篇文章汇总git常用命令
一、 Git 概述Git 是一个免费的、开源的分布式版本控制系统，可以快速高效地处理从小型到大型的各种项目。Git 易于学习，占地面积小，性能极快。 它具有廉价的本地库，方便的暂存区域和多个工作流分支等特性。其性能优于 Subversion、CVS、Perforce 和 ClearCase 等版本控制工具。a、git历史b、工作机制➢ 局域网✓ GitLab➢ 互联网✓ GitHub（外网）✓ Gitee 码云（国内网站）二、git的安装官网地址： https://git-scm.
2022-03-29 11:17:14
91
原创 vue项目引入vue-i18n，实现中英文切换
1、安装vue-i18n官网：https://kazupon.github.io/vue-i18n/zh/html页面引入<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>npm包管理npm install vue-i18n2、使用方法a、建立一
2022-03-24 15:57:38
1873
原创 websocket的简单应用
客户端(浏览器)和服务器端进行通信，只能由客户端发起ajax请求，才能进行通信，服务器端无法主动向客户端推送信息。为了解决这一问题，websocket因此产生。1、新建一个node服务器var app = require('express')();var server = require('http').Server(app);var WebSocket = require('ws');var wss = new WebSocket.Server({ port: 8080 });wss.on
2022-03-22 16:38:48
211
原创 解决vue刷新vuex数据丢失问题
以前的做法是通过localstorage、sessionstorage方式解决，created(){ if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store")))) } window.addEventListener("beforeunload",()=>
2022-02-08 15:11:29
352
原创 一篇文章弄懂vue3常用API
1、使用vite创建项目npm init @vitejs/app vue3-vite-demo2、建立路由router打开文件，建立router路由文件，建立index.js文件import { createRouter, createWebHashHistory } from "vue-router";import globalRoutes from "./globalRoutes";import mainRoutes from "./mainRoutes";const router
2021-12-31 13:55:42
3692
原创 从零开始部署前端项目到阿里云windows服务器
1、进入阿里云官网购买服务器https://ecs.console.aliyun.com/#/home购买好服务器后在左边实例中可以看到我们购买的服务器。2、打开cmd连接实例上的公网ip进入购买的服务器的windows操作系统。3、安装nginxhttp://nginx.org/en/download.html安装windows稳定版4、下载下来后直接解压打开文件nginx-1.20.2在此路径下打开cmd。输入启动Nginx命令：start nginx如果窗口闪一
2021-12-28 11:48:46
2128
原创 vue代码规范的支持
打开vscode eslinteslintyarn add --dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-pluginprettieryarn add --dev prettier eslint-config-prettier eslint-plugin-prettier.prettierrc.jsmodule.exports = { printWidth: 18
2021-12-21 15:10:08
151
原创 vue自定义指令
局部自定义指令// input框自动获取焦点，自定义指令，与methods同级, input添加指令v-focusdirectives: { 'focus': { // 指令的定义 inserted(el) {//被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 if (el.tagName.toLocaleLowerCase() === 'input') { el.focus() }
2021-12-16 17:21:45
238
原创 彻底搞明白浅拷贝与深拷贝区别和方法总结
概要：首要要转换一个观点，拷贝不是单纯的以为是一个变量发生了改变而影响到另一个变量是否改变。其中还与变量的类型有关。而是基础类型互不影响，引用类型相互影响。（其中原理了解类型在堆栈中的位置）那么了解下有哪些类型：基本类型：字符串（string）、数值（number）、布尔值（boolean）、undefined、null ；引用类型：对象（Object）、数组（Array）、函数（Function）；一、浅拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，
2021-12-16 10:30:50
1258
原创 明白useCallback和react.memo对性能优化的影响
根据官网Hooks FAQ给出相关结论：可以看出，除去极少数特殊情况，都不应该使用 useCallback。在一般情况下对性能上的影响可以忽略不计那么，useCallback和react.memo具体有哪些用途？//父组件export default function () { let [a, setA] = useState(1) let [b, setB] = useState(1) const addA = () => {setA(++a)} const addB
2021-12-14 10:29:00
630
原创 项目中axios请求封装
import axios from 'axios';import { ElMessage, ElMessageBox } from 'element-plus';import { Session } from '/@/utils/storage';// 配置新建一个 axios 实例const request = axios.create({ baseURL: import.meta.env.VITE_API_URL as any, timeout: 50000, headers: { 'C
2021-12-10 10:13:48
296
原创 项目开发中的功能实现使用的高级代码总结
1、数组转树let input = [ { id: 1, val: "学校", parentId: null, }, { id: 2, val: "班级1", parentId: 1, }, { id: 3, val: "班级2", parentId: 1, }, { id: 4, val: "学生1", parentId: 2, }, { id: 5, va
2021-12-09 15:32:56
550
原创 前端性能首屏时间查看
//主要看timing里的数据console.log(window.performance)console.table(window.performance.timing) console.log('准备新页面时间耗时: ' + timing.fetchStart - timing.navigationStart); console.log('redirect 重定向耗时: ' + timing.redirectEnd - timing.redirectStart); console
2021-12-09 14:39:03
933
原创 数组对象循环遍历动态生成类似table表
const ExchangeMeta = () => { let obj = { //可自由添加任意名称属性 detail: [ { a: "1", b: "2", c: "3", d: "4", //e:"5", }, { a: "1", b: "2", c: "5", d: "4", /
2021-12-03 16:42:08
987
原创 css公共样式
html, body, ul, li, span, p, div,a, form, input, button, img, h1,h2, h3, h4, h5, h6, header, td,th, dd, dl, tr, table, footer, main,aside, article, section, select, option { padding: 0; margin: 0; box-sizing: border-box;}html { font-size: 10
2021-09-09 09:01:39
377
原创 window下easymock本地部署非常详细流程，及问题解决
了解easymock在window部署所需要的环境easymock官方部署地址：https://github.com/easy-mock/easy-mock/blob/dev/README.zh-CN.md根据官方描述，easymock本地部署需要三个环境Node.js（>= v8.9）& MongoDB（>= v3.4）& Redis（>= v3.0）1、安装Nodejs推荐使用nvm管理nodejs的版本号，非常好用nvm下载地址：https://githu
2021-09-08 17:41:43
792
原创 vue项目中必备的export函数
1、验证篇//校验手机号码或者固定电话export function validTel(str) { const phone = /^1[3465789]\d{9}$/ const tel = /^0\d{2,3}-?\d{7,8}$/ return phone.test(str) || tel.test(str)}
2021-08-06 09:51:32
4274
原创 $set和$delete的使用
1、为什么要使用原因：因为vue2中存在问题：1、新增属性、删除属性, 界面不会更新。2、直接通过下标修改数组, 界面不会自动更新。2、解决方法例如：data(){ return{ person:{ name:"张三" }, arr:["学习","吃饭"], }},methods:{ //添加性别为女的属性 set(){ this.$set(this.person,"sex","女") //如果修改数组 this.$set(this.arr,0,"逛街
2021-08-02 10:36:29
567
原创 vue统一管理api和proxy跨域
1、建立三个文件夹api.js：用来存放所有的接口地址axios.js：用来封装axios请求request.js：用于所有页面中的请求方法存放2、api.jsconst URL = 'http://10.100.100.60:9001'export const getCompanyDydjList= URL + "/mobileBackstage/appCommon"3、axios.jsimport axios from 'axios'import QS from 'qs'axi
2021-07-23 15:23:41
631
原创 一句话明白call,apply,bind的区别和使用
call、apply、bindcall是一个方法，是函数的方法 function fun() { console.log(this); // window console.log("hello world"); } // call可以调用函数,call可以改变函数中this的指向 fun() fun.call() //hello world function fun1() { console.log(this.name); } let cat = {
2021-07-15 10:11:22
85
原创 vue3的基础使用
1、创建vue3的两种方式第一种##安装或者升级npm install -g @vue/cli##保证vue cli版本在4.5.0以上vue --version##创建项目vue create my-project然后按照步骤：1、Please pick a preset - 选择 Manually select features2、Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是
2021-07-05 09:11:27
1850
2
原创 ts的使用
T：表示第一个参数K： 表示对象的键类型V：表示对象的值类型E：表示元素类型接口：接口的作用就是为这些类型命名和为你的代码或第三方代码定义数据模型。类型别名：type(类型别名)会给一个类型起个新名字。type 有时和 interface 很像，但是可以作用于原始值（基本类型），联合类型，元组以及其它任何你需要手写的类型。与接口不同，类型别名还可以用于其他类型，如基本类型（原始值）、联合类型、元组。};};与类型别名不同，接口可以定义多次，会被自动合并为单个接口。
2021-06-28 14:38:34
4038
原创 vuex的使用
vuex的五个属性1.state – 存放状态2.getters – state的计算属性3.mutations – 更改状态的逻辑，同步操作4.actions – 提交mutation，异步操作5.mudules – 将store模块化一、创建一个仓库const store = new Vuex.Store({ state: { info: {"name":"我是vuex","id":1,"Name":"张三"} }})1、在组件中可以使用来获取vuex中公共的sta.
2021-06-28 10:38:35
183
原创 sync的用法和$refs的用法
vue使用sync方法，子组件修改父组件的值一、在父组件中使用修饰符sync修饰变量popup <child :show.sync="show" ></myPopup>二、在子组件中<button @click="change1">点击我，改变show值</button> change1(){ this.$emit('update:show','加油'); }vue使用自定义事件方法，子组件修改父组件
2021-06-09 14:30:21
392
原创 原生js实现鼠标按下鼠标拉动元素移动效果
原生js实现鼠标按下鼠标拉动元素移动效果<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,
2021-06-08 14:10:38
1570
原创 input中checkbox伪类样式勾选框
//css input[type="checkbox"]::before{ border: 1px solid #686461; background-color: white; width: 12px; height: 12px; display: block; visibility: visible; padding-left: 0px; margin-right: 5px; text-align: center; co
2021-05-24 09:55:19
386
原创 CSS动画animation关键帧的使用
举例荧光字 <div class="word">abc</div>.word { animation: animate linear 2000ms infinite; } @keyframes animate { 0% { opacity: 0.3; } 100% { opacity: 1; text-shadow: 0 0 80p
2021-05-19 09:01:37
1269
css+js+jquery+html5+xHTML参考手册.zip
2022-08-30
easymock启动报错怎么解决
2021-09-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人