- 博客(140)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 认识vue3以及语法运用简介
1、reactive与ref reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型 使用ref定义基本数据类型，ref也可以定义数组和对象。2、依赖注入provide函数和inject函数：provide函数和inject函数 provide函数提供数据和函数给后代组件使用 inject函数给当前组件注入provide提供的数据和函数。一、组合API------reactive、ref 与 toRefs。四、teleport(传送)
2022-11-29 17:15:10
923
原创 tabby使用指南
可以看到，Tabby 作为一款开源的终端模拟器，界面美观，并且配置很灵活。不过，该项目目前处于 Alpha 阶段，我自己使用时也发现一些问题：比如暂时还不支持设置中文，插件数量还不够丰富等等。但总的来说，Tabby 仍是一个值得关注的项目，有需要的同学可以先尝试下。
2022-09-29 17:00:13
7890
原创 vue3生命周期和钩子函数
什么是生命周期？ vue中每个组件都是独立的，每个组件都有一个属于它的生命周期， 从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和methodonBeforeMount() : 组件挂载到节点上之前执行的函数。onMounted() : 组件挂载完成后执行的函数。onBeforeUpdate(): 组件更新之前执行的函数。onUpdated(): 组
2022-09-16 13:30:15
1452
原创 vue3+ts的elementPlus静态引入方法
2.index.css要放在cover.scss，base.scss的前面，否则会被elementplus样式覆盖掉，全局的改写样式不生效。3.如果需要使用公共方法，例如message等，需要全部引入，绑定到app.config.globalProperties上；1.需要app.use(ElementPlus)；5.使用公共elemenplus方法。建立.eslintignore文件。4.获取当前实例vue全局定义。...
2022-07-28 10:50:06
880
原创 如何编写.d.ts这样的类型定义文件
类型定义文件是帮助TS文件，去理解引入的JS库里的内容的。因为这些JS库里，没有TS要求的类型的概念。我们写代码的时候，通常会遇到一个场景，引入一个类库，发现这个库是用js代码写的，然后ts里用这样的类库就会有问题，导致我们需要安装类库的类型定义文件。安装这样的类型定义文件是非常简单的，但是类型定义文件是怎么写的呢？ 原理是什么呢？ 然后我们可以在page.ts里调用jquery的方法,我们会发现，虽然可以运行，但是编辑器会飘红，告诉我们需要安装jquery 的类型文件。因为jquery 是JS写的
2022-07-08 15:41:46
1490
原创 Vue3+Vuex +TypeScript在setup语法糖中的使用方式，vuex类型提示功能
vuex 是 vue 中用来做状态管理的一个仓库，一般较大型的项目才有必要使用它，因为如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。它主要包括state、mutations、actions、getters、modules 五个核心概念，有关具体的使用，我们这篇文章不做重点讲解，这里主要告诉大家如何在vuex中集成 typescript，做到代码提示功能。一、vuex简单的引入方式，不会进行类型提示1. install vuexnpm install vuex@nevt --s
2022-05-26 19:13:39
2051
原创 toRef的作用
import { defineComponent, ref, reactive, toRefs } from 'vue'; export default defineComponent({ name: 'about', setup() { const msg = ref('This is an about page'); const obj = reactive({ a: 1, b: 2 }) const msgValue = ()=.
2022-05-25 15:19:10
332
1
原创 vue3组件通信方式总结（setup语法糖）
vue3组件之间的通信方式常用七种：props、$emit、expose/ref、$attrs、v-model、provide/inject、vuex1. props// Parent.vue 传送<child :msg2="msg2"></child><script setup> import child from "./child.vue" import { ref, reactive } from "vue" const msg2 =
2022-05-24 21:00:57
878
1
转载 基于Vue-cli3.0的qiankun（乾坤）前端微服务说明
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明官方文档地址：qiankun.umijs.org/zh主服务1.安装乾坤依赖(子服务不需要安装，只需要暴露生命周期方法)2.在入口文件js中添加如下代码import {registerMicroApps, start} from "qiankun";let microProject = [ { //项目名称，应当与子服务中的package.json项目名称一致 name: 'wdcsLogin app',...
2022-05-23 10:17:37
2219
原创 如何设置表格高度铺满整屏幕
我们在开发过程中，通常要设置页面表格高度铺满整个屏幕，效果如下下面介绍两种方法：一、写表格样式（要注意的是：所有父级元素都要设置高度）二、根据屏幕高度动态计算（要注意的是：要监听屏幕的变化并重新计算高度）...
2022-04-07 10:06:29
1903
1
原创 typescript编译选项compilerOptions
1.自动编译的两种方法•tsc ts文件 -w 能够对单个ts文件进行监视，若有修改则会自动重新编译。••新建一个tsconfig.json文件，然后在命令行执行tsc -w 可以对所有ts文件进行监视，若有修改则会自动重新编译。2.tsconfig.json文件tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译释义介绍：include用来表示需要被编译的ts文件目录路径: **表示任意目录, *表示任意文件exclude用.
2022-04-01 19:21:33
874
原创 typescript--使用构建工具webpack
初始化项目通过执行命令 npm init -y 初始化一个项目并创建package.json文件使用tsc --init 创建ts的配置文件tsconfig.json创建src/index.ts文件，用来编写ts代码安装依赖包npm i -D webpack webpack-cli webpack-dev-server webpack 构建工具webpack webpack-cli webpack的命令行工具 webpack-dev-serve
2022-04-01 19:08:26
444
原创 TypeScript--类型问题汇总
学过js你认识的类型：boolean、number、string、undefined、null、symbol、object你可能不认识的类型：void、any、unknown、never类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量（参数、形参）的类型。指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错 TS拥有自动的类型判断机制：当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型，所以如果你的变量的声明和赋值时同时..
2022-03-17 18:33:06
1777
原创 初识----TypeScript
推荐学习网址：中文网：www.tslang.cn/书籍：《深入理解TypeScript》一、TypeScript概述二、TS增加了什么TypeScript作为JavaScript的超集，TypeScript究竟比JavaScript多了哪些特性也就是说我们编写的TypeScript代码，最终要编译成任意版本的JavaScript，这样就可以在任何可以使用JavaScript的地方使用它了~TypeScript作为JavaScript的超集，也就是说JavaScript就是TypeSc
2022-03-15 16:22:45
1184
原创 socket前端使用方法，封装js
main.js// 引入 socket_serviceimport SocketService from './utils/socket_service'// 对服务端进行 webSocket的连接SocketService.Instance.connect()Vue.prototype.$socket = SocketService.Instancesocket_service.jsexport default class SocketService { static i
2022-02-07 17:21:44
5038
原创 可视化数据动态展示数据的echarts标准写法
步骤1：引入echarts步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象data(){ return { chartInstance: null, allData: null, totalPage:0, currentPage:1, timerId:null }},methods:{ //初始化ec
2022-02-07 14:37:57
2399
原创 es6链判断运算符
编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，要读取message.body.user.firstName，安全的写法是写成下面这样。// 错误的写法const firstName = message.body.user.firstName;// 正确的写法const firstName = (message && message.body && message.body.user && message.
2021-06-30 15:01:53
910
1
原创 el-table循环绑定数据后，监听表格数据格式化方法写法
绑定事件用data指明具体数据，作为方法的传参<el-table-column> <template slot-scope="scope"> <el-input v-model.trim="scope.row.lockDays" type="number" @change="data=>scope.row.lockDays=leaveInt(data)"></el-input> </template></el-table-c
2021-06-30 14:41:47
609
原创 element-UI上传文件，失败一次，后面触发不请求了
同名文件多次选择上传失败了，第一次触发请求，后面不触发请求了解决方案：引发问题：当选择多文件上传时，因为fileList被手动改变了，handleSuccess只会触发一次，this.listFile只有一个文件，重新给listFile赋值...
2021-06-30 14:35:51
1176
1
原创 echarts图的正确写法-改变窗口大小会自适应
一、简历配置文件，深度克隆对象进行初始化echarts图表二、监听窗口改变事件三、赋值数据时： 改变echarts的option配置数据项即可，不要重新init
2021-06-30 14:27:07
179
原创 elementui table固定列的时候，滚动条被遮挡无法拖动
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。代码如下：<style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px
2021-06-30 14:22:51
2964
1
原创 富文本插件quill-editor 发送后台内容出现html标签
复制粘贴到富文本框的内容，传入后台的时候空格会变成转义字符 ,生成报告后下载打开后会出现空格的转义字符，因此要在传入后台时处理一下，不能传转义字符，或者后台生产报告的时候处理一下前端quill-editor插件只要加一个class=“ql-editor”就可以解决...
2021-06-30 14:07:32
1738
1
转载 yarn的安装和使用
yarn的简介：Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点：速度超快Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。超级可靠使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。yarn的安装:下载node.js，使用npm安装npm install -g yarn查看版本：yar
2021-01-13 13:48:38
7127
原创 git 的Permission denied错误的解决方法--设置密钥
命令推送到远程库的时候出现了Permission denied的问题。一般是ssh密匙的问题。解决方法：本机生成密匙，github添加密匙。ssh-keygen -t rsa -b 2048 -C "你的邮箱"生成密匙，在本地C:\Users\你的用户名.ssh生成文件夹，里面有id_rsa和id_rsa.pub两个文件。将id_rsa.pub里的复制到github里建立密匙即可。登录到自己的github，打开Settings。左侧点击SSH and GPG keys，然后右侧点击New SS
2020-12-23 18:48:17
1631
原创 小程序样式--响应式布局方式
ps: 分享三款小程序UI WeUI、iview Weapp、 Vant Weapprpx布局微信的rpx，就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。通过rpx，大家只需要根据750的设计稿写代码即可，不必担心它在各个平台的适配情况，实际上在各个平台都会长得一样。以下简单介绍其他布局scale伸缩布局scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。有两种方法，一是通过js更改vie
2020-10-29 15:08:23
1648
原创 微信小程序的条件渲染wx:if与hidden的区别
使用wx:if=“{{showIf}}”来判断是否需要渲染该代码块，也可以用wx:elseif和wx:else来添加一个else块wx:if 与 hidden如果需要频繁切换的情景下，用hidden更好，如果在运行条件不大可能改变则wx:if较好；<view wx:if-"{{isLogin}}">赵三三</view><view wx:else>请登录</view><!-- 下面会占据dom 只是被隐藏了><view hidde
2020-10-29 13:59:07
1114
原创 如何删除node_modules文件夹
在开发过程中我们在删除node_modules的时候会发现鼠标右击删除会删不干净，因为路径比较深。方法一：使用rimraf可以完全删除node_modules第一步：安装rimrafnpm install rimraf -g第二步：使用rimrafrimraf node_modules方法二：创建删除脚本bat，然后拖拽要删除的文件到这个删除脚本上，即可删除（响应有些慢）创建txt文件，随便命名，并修改后缀txt为bat，我的命名是 “强制删除需要管理员权限的文件.bat”添加文件内容：原文
2020-10-28 10:29:41
4671
原创 vue3版本的安装
首先安装nodejs安装npm,也可使用淘宝镜像，具体操作查看：cnpm安装手册安装或者升级vuecnpm install -g @vue/cli// 保证 vue cli 版本在 4.5.0 以上vue --version// 创建项目vue create my-project然后的步骤步骤解释可查看文章：vue-cli3.0安装及配置（完整版）Please pick a preset - 选择 Manually select featuresCheck the features.
2020-10-27 17:33:39
2385
1
原创 flex布局详解以及案例展示
flex用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局更加符合响应式设计的特点。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}<!-- 行内元素也可以使用 Flex 布局。-->.box{ display: inline-flex;}<!-- Webkit 内核的浏览器，必须加上-webkit前缀。-->.box{ display: -webkit-flex; /* Safari */ d
2020-10-23 17:30:17
532
原创 css中的媒体查询的三种用法
MediaQuery 媒体查询概念：为不同尺寸的屏幕设定不同的css样式，移动端使用频率高@#media常用参数属性名称作用width、height浏览器可视宽度、高度device-width设备屏幕的宽度device-height设备屏幕的高度<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>写.
2020-10-23 16:23:11
922
原创 elementUI下拉选择select反应慢
最近遇到一个很诡异的问题，elementUI的select切换下拉选项，联动另一个下拉选项的选项数据时，变得很慢，改变选项后半天这个下拉框还不收起改变值，后面研究了一下，发现是change事件要执行完，下拉框才会收起改变值。但是我这个change事件要改变的是另一个下拉框选项数据，这个数据有特别大上千条，这个在渲染的dom的时候很慢，因此影响了第一个下拉框的改变响应。如图： 改变类型后，下拉框不收起，是因为标签的下拉选项数据过大，要等他渲染后，才会反应过来后来想了一个办法，让数据渲染好，只是..
2020-10-23 10:27:44
2867
原创 如何在vue中使用Sass-Compass
一.背景知识1.Sass是什么？ Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。 Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码，易于组织和维护。 SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效
2020-10-20 17:18:05
725
原创 TCP （传输控制协议）
传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 [1] 定义。TCP旨在适应支持多网络应用的分层协议层次结构。 连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。TCP假设它可以从较低级别的协议获得简单的，可能不可靠的数据报服务。 原则上，TCP应该能够在从硬线连接到分组交换或电路交换网络的各种通信系统之上操作。当应用层向TCP层发送用于网间传输的、
2020-08-25 13:25:40
273
转载 从输入URL到浏览器显示页面发生了什么
当在浏览器地址栏输入网址，如：www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢？这个过程可以大致分为两个部分：网络通信和页面渲染。一、网络通信互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走。如图所示：1. 在浏览器中输入url用户输入url，例如http://www.baidu.com。其中http为协议，ww
2020-08-24 19:20:39
205
原创 封装axios请求api.js
当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。var param = "http://www.cnblogs.com/season-huang/"; //param为参数param = encodeURIComponent(param);var url = "http://www.cnblogs.com?next=" + param;console....
2020-04-27 20:07:15
817
原创 git如何新建分支并拉取代码，git如何提交合并代码
git 新建分支拉取代码git initgit remote add origin git@github.com:XXXX/nothing2.gitgit fetch origin yuanailan_2020（yuanailan_2020为远程仓库的新建分支名）git checkout -b yuanailan_2020 origin/yuanailan_2020git pull o...
2020-04-27 13:22:21
3254
原创 vue命名路由
命名路由有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', ...
2019-12-25 14:17:16
223
原创 前端优化之利用键值对快速查询数据
通常情况下，我们获取本地数据的时候，需要取对应的值，是采用循环。如果改变数据模型，封装专门的方法来取值，会提高效率。分步骤处理数据，先存数据[id:{},id:{},…];取数据传入id,取对应id的对象的值。案例：let data=[{id:1,name:"北京",gdp:34},{id:2,name:"上海",gdp:44},{id:3,name:"广州",gdp:34},{id:4,na...
2019-12-25 09:54:39
854
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人