cles

组合式函数在vue3中，不同的组件有时候会存在一些相同的逻辑和，比如一些特定的字符串转换操作，数据的清洗。这个时候我们通常会将这一部分的逻辑封装成一个函数或者工具类，以便后续开发的对齐进行一个复用。以下是一个简单的日期格式化函数示例 12345// dateFormatter.jsexport function formatDate(date, format) { const options = {year: 'numeric', month: '2-digit', day: '2-digit'}; return new Date(date).toLocaleDateString(undefined, options);} 在vue组件中使用这个函数： 1234567891011121314151617181920212223//vue<template> <div>{{formattedDate}}</ ...

响应式api响应式api相关知识复习。 ref()这个api会返回一个代理对象，通过.value去获取值。该api的设计主要是为了弥补reactive()无法代理数字、字符串类型。当传入一个对象的时候，ref内部实际上调用的是reactive()这个api。 ref嵌套场景 123456789import {ref, shallowRef} from "vue"// 使用 refconst deepRef = ref({a: ref({b: 2}), c: "c"});console.log(deepRef.value.a.b); // 输出 2// 使用 shallowRefconst shallow = shallowRef({a: ref({b: 2}), c: "c"});console.log(shallow.value.a.value.b); // 输出 2 当存在嵌套的时候，使用vue会自动把内层的ref进行 ...

vue2和vue3的一些区别为什么vue3中去掉了vue构造函数？在过去，如果遇到一个页面中有多个vue应用的时候，往往会遇到一些问题,像这样 vue1234567891011121314<!--vue2--><div id="app1"></div><div id="app2"></div><script> Vue.use(...) // 会影响所有的vue实例 Vue.mixin(...) // 会影响所有的vue实例 Vue.component(...) // 会影响所有的vue实例 new Vue({ // 配置项}).$mount("#app1") new Vue({ // 配置项}).$mount("#app2")</script> 在vue3中，我们可以这样做 vue12345678910111213<!--vue3--& ...

commonJS规范导入导出模块的方式 导出方式 使用exports对象导出模块exports实质上是node全局的module上的一个属性,它是一个对象。既然是一个js对象，我们就可以在它身上挂载属性和方法。可以这样去挂载 1234exports.name = '张三'exprots.add = function (a, b) { return a + b} 使用module.exports导出模块这种方式导出模块其实本质上是和上面的方式一样的，只不过是一个写法的不同而已。 123456module.exports = { name: '张三', add: function (a, b) { return a + b }} 一般我们现在一个文件里面编写好了各种函数、代码、对象等等，最后使用module.exports导出模块。 12345678910111213141516function add(a, b) { retu ...

CDN 概述cdn全名content delivery network，内容分发网络，是一种通过网络来分发内容的技术，通过将内容分发到全球各地的服务器，使用户可以更快地访问到内容。 CDN 的优势想象一个场景，你在国内，访问一个国外的网站，如果这个网站的服务器在国外，那么你访问这个网站的速度就会很慢，因为数据要经过很多的网络节点，而且还有可能会被墙，导致无法访问。 而如果这个网站使用了cdn，那么这个网站的内容就会被分发到全球各地的服务器，当你访问这个网站的时候，会自动选择离你最近的服务器，这样就可以更快地访问到内容。 如此一来，我们访问网站的速度就会更快，用户体验也会更好。 再一个比较重要的是，比如一些第三方的库(lodash之类的工具库)，我们可以通过cdn的方式引入，对于项目的打包体积也会有一定的减小。 看一个实战中的例子。 新建一个目录vite-cdn 进入目录，执行yarn init -y 执行yarn add vite -D 新建目录src，src目录下新建一个文件index.js 新建文件index.html 安装lodash,执行yarn add lodash ...

在vite开发服务器中处理跨域问题跨域问题跨域问题仅仅会在浏览器中出现，因为浏览器有同源策略，不允许不同源的请求。 同源策略同源策略是浏览器的一个安全策略，它要求一个域名下的网页只能请求同域名下的资源，不同域名下的资源不能请求。比如：https://www.baidu.com:443下的网页不能请求https://www.google.com:443下的资源。 浏览器对于这方面的要求是： 协议相同 域名相同 端口相同 https://www.baidu.com:443https://www.google.com:443 这两个源协议、端口都相同，但是域名不同，所以不满足同源策略。浏览器在处理过程中会先把我们的请求进行放行，但是会对我们的响应进行拦截。 下面这里起一个示例的vite项目进行演示。 新建一个目录 进入目录，执行yarn init -y 执行yarn add vite -D 配置package.json文件，添加如下内容(一些项目启动和打包的命令) 123456{ "scripts": { "dev&quo ...

服务端静态资源文件映射问题问题概述:最近在学习node，前端起了一个demo，正好学习到了鉴权那部分。打算做一个登录的demo验证一下，验证没什么问题。 前端项目打包构建之后，我想直接把构建的文件扔到node的静态资源服务文件夹上 这里是一个vite的打包配置，主要是打包后将文件分割，js在一个目录css在一个目录。 123456789101112131415 build:{ outDir:path.resolve(__dirname, "../../public"), rollupOptions:{ output: { assetFileNames: assetInfo => { if (assetInfo.name && assetInfo.name.endsWith('.css')) { return 'css/[name]-[ha ...

git仓库嵌套问题 前段时间博客站从wordpress迁移到了hexo，然后在迁移的过程中，发现了一个问题，hexo的主题是clone三方开源主题仓库，这个主题项目会放到hexo博客项目的themes目录下，这样就导致了一个git仓库嵌套的问题。 也就是说hexo根目录下有一个.git目录，/hexo/themes/theme/ 下也有一个.git目录。当我们在提交hexo项目的时候，会发现themes目录下的主题项目并没有提交上去。这个时候就要看自己的具体需求了，对于个人博客的需求，我最初的本意是解决一个自己博客网站的一个配置文件备份的问题，我是希望主题文件能够被同步管理。也就是取消这个嵌套。 首先取消这个嵌套，肯定是先要删除内层git仓库的.git目录。 然后尝试记录git add <this_directory_path>跟踪这个目录,但是发现并没有生效。 这时候开始警觉了，我打算拉一个新的分支做这个事情(因为之前没注意这个嵌套问题，导致配置文件丢失。血的教训，手动恢复了大半天)。 git checkout -b fix-n ...

这几天一直都在学习vite,在vite的源码中，有一个很重要的插件就是postcss。在这之前，我只是听说过这么一个名词，并不知道它用来干啥的，它的定位又是什么。直到我一边学习，顺着好奇心看了一下postcss的文档，才发现，原来postcss是一个很强大的工具。 建议是阅读英文文档，中文文档可能不是最新的，而且有些内容可能不全面。 官网的第一行介绍就是 是一个用 JavaScript 工具和插件转换 CSS 代码的工具 看完官网的介绍之后，我的脑子里面出现了一句话：postcss之于css，就像babel之于js。 postcss的作用 从can i use中获取最新的css特性，然后使用postcss插件来转换css代码。让我们的css代码能够兼容各个浏览器。 将实验性的css特性转换成标准的css代码。 css代码压缩,会删除所有的空格、注释、重复的代码等。输出一个.min.css文件。 css模块化 stylelint,css代码检查,避免一些低级错误。类似于eslint。 在学习的过程中，也理清了它和sass、less、stylus的关系。 sass、less、s ...

Vite中css模块化的处理这些全都是在node端实现的。 vite在读取到main.js中引用到的css文件 使用fs模块去读取css文件的内容 然后创建一个style标签，文件的内容注入到这个标签里面 将这个style标签插入到index.html的head标签里面 原本的css内容会被替换成js脚本，方便后续的热更新 index.css的内容css文件被替换成了js脚本文件内容被插入到head标签里面12345html, body { width: 100%; height: 100%; background: #646cff;} 以上便是vite处理css文件的流程 为什么要进行模块化的处理，因为在实际开发中，对于一些样式类的命名，在团队中可能你开发了一个组件，写了一个样式类名叫.content，在协同开发中，另一个人也写了一个样式类名叫.content。这样就造成了样式冲突。 下面来介绍模块化的处理，在vue模板文件中,我们常常会这样写 123<template></template><script&g ...