Echo、江-CSDN博客

原创 @vue/cli 插件开发之自动根据目录列表生成别名配置

1.相关文档@vue/cli官方文档 @vue/cli@vue/cli插件开发指南 @vue/cli2.插件命名规范为了让一个 CLI 插件在 Vue CLI 项目中被正常使用，它必须遵循 vue-cli-plugin- 或者 @scope/vue-cli-plugin- 这样的命名惯例。这样你的插件才能够：被 @vue/cli-service 发现；被其他开发者通过搜索发现；...

2023-02-01 10:00:00 80

原创 css预处理器scss/sass语法以及使用

scssscss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，使用scss可以很方便的提高开发效率scss语法以.scss文件后缀结尾，其中语法格式有两种sass,scss,两种语法在书写风格有差异，如下代码所示scss.container { width: ...

2023-01-05 16:17:00 135

1.问题Proxy error: Could not proxy request /chart/update from xxx.xx.xx.xx:xxxx to http://xxx.xx.xx.xx:xxxx.See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EC...

2022-11-17 17:08:00 153

原创 win10和win11 wsl2配置，以及开发环境配置

前置条件确认系统版本win10 19041版本以及更高查看方式：win + r 输入winverwin11 *启用或关闭Windows功能win + r, 输入 optionalfeatures,勾选适用于Linux的Windows子系统，和虚拟机平台选项。然后重启电脑。官方文档提示可以直接运行wsl --install命令进行wsl安装，但是此命令同时会安装 Lin...

2022-09-06 09:40:00 76

原创 CSS 盒模型

1. 标准盒模型在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content， padding 和 border 再加上设置的宽高一起决定整个盒子的大小<style> .box { width: 350px; height: 150px; margin: 25px; padding...

2022-05-30 14:48:00 16

原创 CSS 选择器以及优先级

1. id选择器<style> #container { width: 100px; }</style><body> <div id="container"></div></body>2. class选择器 | 类选择器<style> .containe...

2022-05-30 10:38:00 36

原创 Vue 内置指令以及自定义指令

1. 内置指令v-show :说明：根据条件展示元素,true展示元素，false隐藏元素<template> <div> <button v-show="isShow"></button> </div></template><script>export d...

2022-05-25 09:47:00 34

原创 JavaScript 原型以及原型链。

1. 原型隐式原型 __proto__每个对象都有一个隐式原型__proto__,对象独有，null,undefined没有，并且在js中，Object.prototype的__proto__是null，因为是最顶端，如下代码：var arr = [];var obj = {};var set = new Set();var map = new Map();var sym ...

2022-05-23 10:18:00 20

原创 vue/cli 配置动态代理，无需重启服务

devServe = http://localhost:3000;prodServe = http://localhost:4000;1. 在vue.config.js文件中，配置代理服务使用vue/cli@5创建的项目，默认会创建vue.config.js文件，如果项目中没有此文件，那么就手动在项目根路径创建vue.config.js文件。const { defineConfig ...

2022-05-20 15:00:00 116

原创 Web-Components 定义,使用以及示例

1. 定义web-componets 类似于vue以及react中组件定制，将一组ui以及公共逻辑抽取，并且封装成为一个公共组件。在页面可以随处调用2. 实现web component的基本方法a. 创建一个类或函数来指定web组件的功能class Dialog extends HTMLElement { constructor() { super(); const sha...

2022-05-16 14:05:00 63

原创 http-cache -> node.js 示例代码

1.index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <me...

2022-03-24 17:27:00 21

原创 babel 使用以及配置

1. babel是什么Babel 是一个 JavaScript 编译器Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：语法转换通过 Polyfill 方式在目标环境中添加缺失的特性 (通过引入第三方 polyf...

2022-03-24 17:02:00 37

原创 vite.config.ts个人配置

import { defineConfig, loadEnv } from 'vite';import vue from '@vitejs/plugin-vue';import { resolve } from 'path';import vueJsx from '@vitejs/plugin-vue-jsx';export default ({ mode }) => ...

2021-11-13 11:06:00 32

原创 prettier插件个人配置以及配置说明

// prettier.config.jsmodule.exports = { /** * @description 尾随逗号 */ trailingComma: 'none', /** * @description 箭头函数 * @example avoid x => x * @example always (...

2021-11-13 11:04:00 38

原创 npm或pnpm安装electron失败解决办法

1.　　　　pnpm：　　　　pnpm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"　　npm：　　　　npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"2.　　pnpm install el...

2021-11-07 10:27:00 291

原创 React-typescript中ref定义

示例： 1 const Home: React.FC = () => { 2 const textRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null); 3 4 useEffect(() => { 5 console.log(textRef.current...

2021-09-25 10:48:00 77

原创使用crypto-js库进行加密解密

1.安装crypto-js　　npm installcrypto-js -S 或 yarn addcrypto-js2.新建解密文件AES.jsimport CryptoJS from 'crypto-js';// 密钥const key = CryptoJS.enc.Utf8.parse('123456789');// 密钥偏移量const iv = CryptoJS.e...

2021-05-18 08:18:00 36

原创 React-组件性能优化一

案例：　　父组件引入子组件，在父组件更新内容时，子组件也会重新renderimport React, { Component } from 'react';class ChildComponent extends Component { render() { console.log('child render') return <...

2021-05-14 18:42:00 16

原创 Vue2.x-使用render函数动态渲染el-menu

代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="...

2021-04-23 09:38:00 49

原创 React-useReducer使用

1.useReducer　　类似redux的reducer　　使用：　　useReducer(fn,initState)　　接受两个参数，第一个执行函数，有两个参数，state和action　　initState为初始数据　　useReducer返回一个数组，包含state,dispath　　action为判断事件类型，通过dispatch传递import React, { u...

2021-03-02 09:00:00 19

原创 React-useEffect使用

1.useEffect　　react hooks　　使用：　　useEffect(fn,dep)　　　　第一个参数是函数，第二个参数是依赖项，可不传　　　　1.当没有给依赖项时，则useEffect每次都会执行里面的函数　　　　2.当给依赖项时，依赖项发生改变时，useEffect才会执行里面的函数　　　　3.当依赖项为一个空数组时，则页面加载后只执行一次，后面不在执行impo...

2021-03-02 08:41:00 26

原创使用Scriptable制作IOS小组件之选择相册图片展示

1.首先添加快捷指令，目的是保存图片至文件中　　下载地址：https://www.icloud.com/shortcuts/b82164d0ef224944ae8a74fe501f5f03　　safari打开链接添加快捷指令。快捷指令需要打开“允许不受信任的快捷指令”2.运行快捷指令　　选择一张或多张图片，选择存储位置iCloud文件夹中的scriptable。3.打开Scriptab...

2021-03-01 14:04:00 70

原创 Vuex理解与使用

1.Vuex是什么　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,用于管理页面的数据状态、提供统一数据操作的生态系统。在组件中可以任意获取仓库中的数据。和Vuex类似的还有redux，redux一般在react中使用比较多。　　----来自官方示例图　　1.在组件中，通过dispatch一个Actions->Mutations->State，最后渲染组件...

2021-03-01 10:35:00 12

原创 Vue2.x-$on,$once,$off以及$emit的使用

$on　　使用：vm.$on('事件名称',callback)　　说明：监听当前实例(vm)中的自定义事件，事件可以由$emit定义$once　　使用：vm.$once('事件名称',callback)　　说明：监听当前实例(vm)中的自定义事件，事件可以由$emit定义,但是只会触发一次，触发后即解除$off　　使用：vm.$off('事件名称')　　说明：关闭当前实例中的自定...

2021-02-27 14:19:00 43

原创 Vue2.x-使用transition-group实现筛选时内容展示隐藏时动画效果

代码：<template> <div> <input type="text" v-model="keyword" /> <transition-group name="list" tag="div" class="box"> <p v-for="(item, index) i...

2021-02-27 11:00:00 15

原创 Vue2.x-使用防抖以及节流示例

utils:// 防抖export const debounce = (func, wait = 3000, immediate = true) => { let timeout = null; return function() { let context = this; let args = arguments; i...

2021-02-27 10:44:00 17

原创 Vue2.x-使用计算属性computed筛选列表

案例代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name...

2021-02-27 10:06:00 18

原创 Vue2.x-插槽slot用法

指令：　　v-shot说明：　　插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签使用示例子组件：<template> <div> &l...

2021-02-27 09:48:00 18

原创 node-sass各版本

1.下载url　　https://files-cdn.cnblogs.com/files/jwyblogs/node-sass.zip2.将下载的压缩包放到node_cache中，示例：　　E:\Install\NodeRepository\node_cache\node-sass　　　　npm config list　　　　提示：如果是默认安装的位置。请使用npm confi...

2021-01-19 10:58:00 35

原创 windows文件夹暴力删除

1.针对删除文件时出现权限问题，无法删除等问题　　桌面新建文本txt,输入以下内容　　　　DEL /F /A /Q \\?\%1　　　　RD /S /Q \\?\%1　　保存，修改文件后缀名为暴力删除.bat2.使用时，将需要删除的文件夹拖放到此bat文档上即可。...

2021-01-19 10:52:00 15

原创 VMware Workstation 15 Pro安装Mac OS 10.15.0

1.安装环境信息　　VMware Workstation版本　　　　VMware® Workstation 15 Pro　　　　15.5.6 build-16341506　　操作系统版本　　　　Windows 10 企业版 LTSC　　　　处理器：Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz　　　　内存：8.00 GB　　　　系统类型：64位2...

2020-12-07 14:42:00 54

原创 Centos7 安装NodeJS以及Nvm多版本管理

安装node　　1.curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -　　2.yum install -y nodejs　　3.node -v多版本管理　　1.进入https://github.com/nvm-sh/nvm#install-script中复制链接并粘贴到命令行，cent...

2020-11-25 14:32:00 27

原创 Vue-内容展开收起过渡效果(借鉴某位大佬，不知道出处了)

1.定义collapseTransition.js 1 const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'; 2 const Transition = { 3 'before-enter'(el) { 4 ...

2020-10-14 17:15:00 20

原创 Vue-表单校验

1.新建xxx.js　　定义策略对象和策略类 1 /*策略对象*/ 2 const strategies = { 3 // 是否为空 4 isNonEmpty(value, errorMsg) { 5 return value === '' ? errorMsg : void 0; 6 }, 7 // 最小长度 8 mi...

2020-10-14 17:04:00 8

原创使用Scriptable添加IOS小组件

1.在apple store中搜索下载Scriptable2.打开Scriptable　　　　　　　　3.点击右上角 "+"，进入添加界面　　　　　　　　4.在空白区域粘贴代码，点击右下角运行按钮可以试运行5.长按脚本，选择rename可以进行重命名。6.在桌面添加小组件　　a.选择scriptable组件　　b.长按添加的组件，选择编辑小组件　　c.点击script选择刚刚...

2020-10-09 09:39:00 77

原创使用Scriptable制作IOS小组件之图片展示

1 let widget = await createWidget(); 2 if (!config.runsInWidget) { 3 await widget.presentLarge(); 4 } 5 Script.setWidget(widget); 6 Script.complete(); 7 async function createWidget() { 8...

2020-10-09 09:05:00 37

原创 Android Monkey测试

查看包名adb shell dumpsys window w | findstr \/ | findstr name=基本用法adb shell monkey -p com.shanghai.test -v 10000输出日志adb shell monkey -pcom.shanghai.test -v 100 >e:\日志2.txt停止测试ps | grep monkey ...

2020-09-23 15:15:00 12

原创 JS常用工具类

1.获取当前dom相对于document的偏移量 1 const getOffset = el => { 2 console.log(el); 3 const {top, left} = el.getBoundingClientRect(); 4 const {scrollTop, scrollLeft} = document.body; 5 r...

2020-08-31 16:07:00 13

原创 VScode-插件使用以及配置项

1.vscode 版本：　　版本: 1.56.2 (user setup)　　在最新版本中，vscode增加了账户登录选项，实现了配置文件保存在账户中，在更换电脑或者端时，可以直接登录自己账号获取云端vscode配置。2.配置保存路径　　github3.setting.json{ // 对应文件类型使用prettier格式化插件 "[scss]": { ...

2020-06-02 17:38:00 83

原创 Bootstrap插件——bootstrap-datetimepicker基本使用

1 1.首先需要引入css,js文件 2 3 　　　样式文件 4 5 　　 <link rel="stylesheet" href="../bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> 6 7 　　　js文件 8 9 ...

2020-05-20 09:54:00 35

空空如也

空空如也