SZX的开发笔记

创建Vite2项目Vite官方文档 安装123$ npm init @vitejs/appor$ yarn create @vitejs/app 然后按照提示进行操作即可创建出来一个Vite项目。 使用12npm installnpm run dev 启动后可以看到如下图 Vite2的主要变化起别名在 vite.config.js 文件中设置 alias 对象，前面key为别名，后面为对应的地址 123456789101112131415import { defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'import path from "path"// https://vitejs.dev/config/export default defineConfig({ alias: { "@": path.resolve(__dirname, 'src'), ...

node爬虫入门本项目源代码地址 批量爬取网站图片实现步骤 发送http请求获取整个网页内容 通过cheerio库对网页内容进行分析 提取img标签的src属性 使用download库对图片进行批量下载 发送http请求 爬取目标网址 http://www.itheima.com/teacher.html#ajavaee 使用 http 模块请求网站地址 发送请求并获取详情获取网站源代码1234567891011121314151617// 批量爬取 http://www.itheima.com/teacher.html#ajavaee 网站中的老师图片let http = require('http')// 创建一个请求，此时不会真正的去发送请求let request = http.request('http://www.itheima.com/teacher.html#ajavaee', res => { // 异步响应数据 let chunsk = [] // 监听 data 事件，获取传递过来的数据片 ...

作为一名前端开发人员，在日常开发中，不可避免的会和后端联调接口，但是有时候前端页面做完了，后端接口没写完，这样就导致前端的工作无法进一步进行。因此，我们往往会自己造一些数据，来模拟后台请求，将前端的逻辑提前一步写完，等待后端接口写好之后，替换一下地址就行了。下面我们一起从0搭建mock数据服务器 本文演示源码 mock.js官方文档 安装首先新建文件夹，取名 koa2-demo，在该文件夹下执行，安装的依赖有 koa koa-router koa-cors koa-bodyparser mockjs1cnpm install koa koa-router koa-cors koa-bodyparser mockjs --save 配置123456789101112131415161718192021const Koa = require('koa')const app = new Koa()const Router = require('koa-router')const router = new Router()const bodyPar ...

初始化项目 1.创建空白目录，执行 cnpm init ,填写一些基本问题后生成初始化包管理文件 packge.json 2.新建 src 源码目录 3.新建 src -> index.html 文件 4.初始化首页基本结构 5.运行 npm install jquery -S 安装 jquery 安装和配置webpack 1.运行 npm install webpack webpack-cli -S 安装 webpack 相关包 2.在根节点新建 webpack.config.js 文件 3.在 webpack.config.js 文件中基本配置 12345678module.exports = { /** * mode：编译模式 * development：开发模式，打包的出来的文件没有经过压缩，体积较大，但是打包速度快 * production：生产模式，打包出来的文件经过压缩，体积小，但是打包速度慢 */ mode:"development"} 4.在 package.json 文件的 ...

多个光标1ctrl + alt + 上下箭头 相同单词批量选中1双击选中某个单词后 ctrl + d 行内不同长度代码同时选中12345第一步：先批量生成多个起始光标ctrl + alt + 上下箭头第二步：选中光标位置到遇到空格结束之内的代码ctrl + shift + 左右箭头

有图标的提示框default 提示块标签 123{% note default %}default 提示块标签{% endnote %} primary 提示块标签 123{% note primary %}primary 提示块标签{% endnote %} success 提示块标签 123{% note success %}success 提示块标签{% endnote %} info 提示块标签 123{% note info %}info 提示块标签{% endnote %} warning 提示块标签 123{% note warning %}warning 提示块标签{% endnote %} danger 提示块标签 123{% note danger %}danger 提示块标签{% endnote %} 不 ...

第一章node是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！ Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使 Node.js 表现得非常出色。 Node.js 应用程序运行于单个进程中，无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原生功能（用以防止 JavaScript 代码被阻塞），并且 Node.js 中的库通常是使用非阻塞的范式编写的（从而使阻塞行为成为例外而不是规范）。 当 Node.js 执行 I/O 操作时（例如从网络读取、访问数据库或文件系统），Node.js 会在响应返回时恢复操作，而不是阻塞线程并浪费 CPU 循环等待。 这使 Node.js 可以在一台服务器上处理数千个并发连接，而无需引入管理线程并发的负担（这可能是重大 bug 的来源）。 Node.js 具有独特的优势，因为为浏览器编写 JavaScript 的数百万前端开发者现在除了客户端代码之外还可以编写服务器端代 ...

鼠标在元素上移进移出事件12345678910111213// 获取到所有图片let imags = document.querySelectorAll(".viewImg");// 循环添加鼠标事件imags.forEach((item) => { // 鼠标移动进来 item.addEventListener("mouseover", function() { console.log("进来"); }); // 鼠标移动出去 item.addEventListener("mouseout", function() { console.log("出来"); });}); 如何确认父元素是否包含子元素123456789function elementContains(parent, child) { return parent !== child && parent.c ...

输入一个值，返回其数据类型123function type(para) { return Object.prototype.toString.call(para)} 数组去重1234567891011121314151617181920212223242526// 方法一function unique1(arr) { return [...new Set(arr)]}// 方法二function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele]) { obj[ele] = true; return true; } })}// 方法三function unique3(arr) { var result = []; arr.forEach(ele =&g ...

vue 脚手架Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖：*可升级；*基于 webpack 构建，并带有合理的默认配置；*可以通过项目内的配置文件进行配置；*可以通过插件进行扩展。 一个丰富的官方插件集合，集成了前端生态中最好的工具。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。 安装123npm install -g @vue/cli# ORyarn global add @vue/cli 创建一个项目123vue create my-project# ORvue ui 升级如需升级全 ...