cles

你是一个码农，拿到了一个新的项目，项目使用了 Vite 作为开发工具。拿到项目的第一件事，当然是把项目先跑起来。跑起来？这个时候通常会先看项目的相关说明文档，如何安装依赖，如何启动项目等等。于是看完项目相关文档后，你使用了npm install安装了项目依赖，然后使用npm run dev启动项目。项目启动后，你看到了一堆日志，然后打开了浏览器，看到了项目的首页。 这个时候你可能会想，Vite 是如何启动的呢？为什么我只需要运行npm run dev就能启动项目呢？这篇文章就来探讨一下 Vite开发服务器的启动原理。 开发服务器开发服务器，这就涉及到了服务器端的东西，通常我们会使用 Node.js 来搭建一个服务器。Vite 也是如此，它使用了一个 Node.js服务器来启动项目。但是他是如何解析项目中的.vue文件的？浏览器又不认识.vue文件没办法渲染呀。等等等等还有很多问题需要解决。这里看一张图 这是一个示例工程，可以看到开发服务器给我们返回了一个 App.vue 文件 可以看到里面其实都是 js 的语法格式,这是因为 Vite在启动时会将 .vue 文件解析成一个 js 文 ...

vite环境变量的配置在实际开发中，往往会有很多套环境，比如开发环境、测试环境、生产环境等，而这些环境的配置往往是不一样的，比如接口地址、域名等。vite提供了一种简单的方式来配置环境变量。 配置好环境变量有哪些好处? 代码的可维护性更高，不同环境的配置分开管理，方便维护。设想一个场景，现在有开发环境、测试环境、预发布环境、生产环境4个环境，每个环境的接口地址都不一样，那么每次切换环境都需要手动修改接口地址，这样不仅容易出错，而且非常麻烦。假如项目是涉及一些敏感的信息，万一手动配置出错，会造成非常严重的后果。 vite环境变量的配置vite提供了一个import.meta.env对象，我们可以通过这个对象来获取环境变量。 这里给一下示例项目的目录结构 123456789101112---test-vite |---.env |---.env.development |---.env.production |---.env.test |---.index.html |---.main.js |---.package.json |--- ...

什么是构建工具构建工具，顾名思义，用于构建项目的工具，重点在于理解构建的意思。生产环境中，项目代码运行在各种环境中，web 应用的项目代码运行在浏览器上。而技术的革新，推出了各式各样的前端框架(vue、react、angular)各种更高级与方便的编程语言，比如 js 的超集 typescript,各种 css 预编译语言 less、sass。这些东西极大的提升了开发效率。但是需要思考的一个问题是，浏览器只认识 js、css、html 代码而不认识上面提到的这些高级编程语言。所以在这中间就存在一个转换的过程，简而言之，构建工具就是用于编译项目代码的，编译成浏览器能看懂的代码。 开发者只需要把产品开发出来交付就好了，而我们客户考虑的可就多了在很久以前，网页基本上都是静态的、简陋的，相当于一份赛博报纸。这个时候压根不需要什么构建工具，只需要把信息放到页面上就行了。随着技术的发展，js的出现，网页开始变得花里胡哨了起来。这个时候项目的复杂度变得更高了，出现了许多新的语言或者框架，便于开发者团队进行开发与管理。有一天团队开会，客户提了新的需求，要产品能够兼容各式各样的浏览器。因为不同的浏览器内 ...

面试焦虑、紧张、期待第一次面试，面了十多分钟，面试官正好就是进入公司实习后带我的领导，我以为这份实习已经石沉大海了，但是并没有，这家小公司给了我一个机会。五一假期之前收到了实习通知书。我既开心又忐忑，因为在这之前没有真真正正的接触社会，一直生活在校园的象牙塔中，这次要一个人面对工作、生活上的琐事。 生活尝试一个人租房子我这个人一直这样，当第二天有一些激动人心的事情，我会胡思乱想一整夜睡不着————比如即将一个人单枪匹马去一个陌生的地方独自生活。我不敢想象这有多么爽(因为比较喜欢安静，在宿舍被折磨坏了)，果不其然，当天到南京在去看出租屋的公交上睡了好久，都不知道坐过了多少站。 因为是一家小厂，我不确定入职之后会有一些什么非人的要求，当初计划是先不租房子，避免入职后自己无法接受这个岗位。 先是在酒店住了两个晚上，入职的前两天基本上没什么事情，都是在熟悉项目，改一些不起眼的 bug，节奏还算很舒服。自己也很快的融入到工作当中，融入这个办公室中。随后就是寻找一个比较好的地段暂时住下，我发现这个过程还是挺锻炼人的。后来的两天，我都在找房子，先是在手机软件上看，然后约线下看房，好在当时已经意识到通 ...

记录一下前端布局的知识点在实际需求当中，最常见的布局需求就是各种各样的居中，水平居中、垂直居中、水平垂直居中，我常常记不住，然后又去翻文档(说白了就是代码写少了>_<)。不 bb 了，直接上代码吧 margin 0 auto + 绝对定位123456789101112131415161718192021222324252627282930<style> * { padding: 0; margin: 0; box-sizing: border-box; } .container { position: relative; width: 80%; height: 400px; margin: 0 auto; background-color: red; } .box { position: absolute; width: 50%; background-color: yellow; height: 50%; left: 50% ...

何谓“链”链表？链条？在 JavaScript 中都不是JavaScript 中的每一个对象都有一个特殊的内置属性[[Prototype]]可以通过__proto__进行访问。他指向的是一个原型对象。当我们访问一个对象的某个属性的时候，如果对象本身没有这个属性，就会向其原型查找，如果找到了就停止，如果没找到则为undefined(未定义),比如当我们 new 一个对象,我们根本就没有定义 toString 方法呀,但是它就在那里,不在这个对象身上,在它的原型链上！ Function? Object? 你是谁？先看一段代码 1console.log(Function.__proto__ === Object.__proto__) 猜猜会输出什么，查看答案 true在 JavaScript 里面，万物皆对象，所以函数也是对象，它叫做函数对象,所以一个函数身上会有__proto__这个属性就不奇怪了。 然而，在学习的过程中，函数不仅仅有__proto__这个属性，还有另外一个属性prototype,这两个又有什么区别呢？ 不妨假设现在有一个函数 fn ,它的定义如下 123functi ...

生命周期理解生命周期是指一个组件从被创建至销毁会经历的一系列的过程，这个过程就叫生命周期 生命周期钩子函数是类组件独有的东西，自从react16.8推出hooks以来，整体就已经开始以函数组件为主了。 Hook从此告别类组件Hook实际上就是JavaScript的函数，但是这些函数相较于其他普通的函数，有些不一样。在React中使用的时候要遵循以下规则 只能在函数最外层调用Hook。不要在循环、条件判断、或者子函数中调用 只能在React的函数组件中调用Hook，不要在其他JavaScript函数中调用 useState使用useState可以创建组件的状态，使用解构进行接收，相当于之前在类组件里面的state 简单使用 1234567891011121314151617import React from "react";export default function UseState() { const [count, setCount] = React.useState(0); const handleClick = () => &# ...

在 React 项目中实现小球动画效果大概是这样的 实现思路总体思路 将小球封装成一个组件，这个组件有半径、移动速度、颜色等属性 然后再随机生成一堆小球 实际的代码单个小球 这是一个类组件 Ball.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475import React, { Component } from "react";import "./Ball.css";export default class Ball extends Component { constructor(props) { super(props); this.state = { radius: props.radius || 100, left: p ...

创建一个简单的受控表单组件实现两个input框 一个将输入的字符串的小写字母自动转换成大写 只允许输入数字 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485import React, { Component } from "react";export default class TableDemo extends Component { state = { value1: "", value2: "", }; onClickSubmit = (e) => { e.preventDefault(); console.log(this.state); } ...

React 组件通信1. 父子组件的通信方式props是最为常用的父子组件通信方式 直接上示例代码了 Father.js 父组件 12345678910111213141516171819202122232425262728293031323334353637383940// 父组件import React, { Component } from "react";import Son from "./Son";import { getRandomNumber } from "../utils/Random";// 类组件的写法export default class Father extends Component { state = { msg: "", sonTome: "", }; callback = (data) => { this.setState({ ...