moxieBlog

介绍12345// 创建项目（官方 create-react-app 已废弃，但不影响学习）npx create-react-app xxx// JSX 是JS的语法扩展，浏览器不能识别，需要通过解析工具解析之后在浏览器中运行// https://babeljs.io 编译参考 基础语法123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 ...

前言webpack 基础学习的相关内容 介绍是一个静态资源打包工具，将 Webpack 输出的文件叫做 bundle。 参考 webpack 功能介绍Webpack 本身功能是有限的:（其他功能，需要配置才能完成） Webpack 本身功能比较少，只能处理 js、json 资源，一旦遇到 css 等其他资源就会报错。 开发模式：仅能编译 JS 中的 ES Module 生产模式：能编译 JS 中的 ES Module，还能压缩 JS 代码 基本使用12345需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则安装包会报错// 开发模式npx webpack ./src/main.js --mode=development// 生产模式npx webpack ./src/main.js --mode=production 基本配置5 大核心概念 entry（入口） 指示 Webpack 从哪个文件开始打包 output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等 loader（加载器） webpa ...

前言记录学习 TS 后台项目的知识 项目构建vite 构建搭建项目123456789# 创建项目pnpm create vite@latest# 选择如下√ Project name: ... vite-template√ Select a framework: » Vue√ Select a variant: » TypeScript# 安装依赖cd vite-templatepnpm i EditorConfig在项目根目录下增加.editorconfig文件 12345678910111213141516# 编辑器配置文件 参考 http://editorconfig.orgroot = true # 表⽰是最顶层的配置⽂件，发现设为true时，才会停⽌查找.editorconfig⽂件[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型(lf | cr | cr ...

前言参考：Node.js 初识 Node.js 使用 Node.js 运行 js 文件 输入：node 要执行的js文件的路径 cmd 中快捷键：Tab 快速补全、Esc 快速情况当前输入的命令 Node.js 中的 fs 模块fs.readFile12const fs = require('fs') // 注意不能使用 import fs from 'fs';fs.readFile(path[, options], callback) path：文件路径（必选） options：配置选项，若是字符串则指定编码格式 （可选） encoding：编码格式 flag：打开方式 callback：回调函数 （必选） err：错误信息 data：读取的数据，如果未指定编码格式则返回一个 Buffer 12345678910111213141516// 1. 导入 fs 模块，来操作文件const fs = require('fs')// 2. 调用 fs.readFile() 方法读取文件// 参 ...

前言本文是 Pink 老师HTML CSS 教程学习后的补充记录。 参考：黑马程序员pink老师前端入门教程 HTML 补充浏览器内核 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。 chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 Opera blink 现在跟随chrome用blink内核。 标签基本补充 123456789101112131415161718192021222324<!DOCTYPE html ...

前言本文主要记录博主遇到的JavaScrprt的补充知识。 Ajax参考：3小时Ajax入门到精通 CSDN AJAX 简介​ 异步的 JS 和 XML(AsynchronousJavaScript And XML)，浏览通过 Ajax 向服务器发送异步请求，可以无刷新获取数据。 优点：无需刷新页面与服务器端进行通信、允许你根据用户事件来更新部分页面内容 缺点：没有浏览历史不能回退、存在跨域问题、SEO 不友好 XML 简介​ 可扩展标记语言，和 HTML 类似，但 XML 中没有预定义标签，用来表示一些数据 12345678<!-- 使用 XML 来表示 一个学生的信息 --><student> <name>张三</name> <age>18</age> <gender>男</gender></student><!-- XML 已被 JSON 取代 -->{"name":&qu ...

前言TypeScript 基础 安装 TypeScript1234npm install -g typescript // 安装tsc -V // 检查版本号// 注：如果 ts 文件中只有 js 语法，html 引入该 ts 文件不会报错且可以执行 TypeScript中的基本类型类型声明123456// 语法let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...} 自动类型判断 TS拥有自动的类型判断机制 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明 123// 如：let a = 1; 则 a 的类型为 numberlet a = 1;// a = 'hello world' 报错 类型 类型 例子 描述 number 1、-1、1.1 任意数字 string ‘hi’、”hi”、hi 任意字符串 boolean true、false 布尔值true或 ...

前言vite 的笔记 Vite介绍构建工具 市面上主流的构建工具有哪些: webpack vite parcel esbuild rollup grunt gulp 什么是构建工具 浏览器他只认识html、css、js文件，当项目出现其他文件需要手动编译，而构建工具会自动编译。 vite相较于webpack的优势 构建速度快 webpack支持多种模块化, 开始必须要统一模块化代码, 意味着需要将所有的依赖全部读一遍 vite的上手难度更低, webpack的配置是非常多的, loader, plugin。 vite是基于es modules的，webpack更多的关注兼容性, 而vite关注浏览器端的开发体验。 webpack 不能改的原因 12345678910111213141516// webpack支持多种模块，这一段代码最终会到浏览器里去运行const lodash = require("lodash"); // commonjs 规范import Vue from "vue"; // es6 module// w ...

前言本文记录 JavaScript 中的文件流，持续更新中…… 使用Blob下载文件1234567891011121314151617181920212223242526272829303132333435363738// 模拟下载请求function download() { axios({ url: `http://localhost:2000/download`, method: 'GET', responseType: 'blob', }).then(result => { // 如果接口请求填写了 responseType: 'blob'，可以不需要new blob const blob = new Blob([result.data], { type: "image/jpeg" }) const u ...

前言vue3的学习记录 vue3新的特性 Composition API（组合API） setup配置 ref与reactive watch与watchEffect provide与inject …… 新的内置组件 Fragment Teleport Suspense 其他改变 新的生命周期钩子 data 选项应始终被声明为一个函数 移除keyCode支持作为 v-on 的修饰符 …… vite1234567## 不需要全局安装## 创建工程yarn create vite## 安装依赖yarn## 运行yarn dev 参考：vue3保姆级教程 vue3-cli项目分析12345678910// main.js 分析// 没有了 Vue 的构造函数，只是createApp的工厂函数，可以直接调用// 创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)import { createApp } from 'vue'import App from './App.vue' ...