街头诗人's Blog

前言小王，你的页面白屏 了，赶快修复一下。小王排查后发现是服务端传回来的数据格式不对导致，无数据时传回来不是 [] 而是 null, 从而导致 forEach 方法报错导致白屏，于是告诉测试，这是服务端的错误导致，要让服务端来修改，结果测试来了一句：“服务端返回数据格式错误也不能白屏！！” “好吧，千错万错都是前端的错。” 小王抱怨着把白屏修复了。 刚过不久，老李喊道：“小王，你的组件又渲染不出来了。” 小王不耐烦地过来去看了一下，“你这个属性 data 格式不对，要数组，你传个对象干嘛呢。”老李反驳： “ 就算 data 格式传错，也不应该整个组件渲染不出来，至少展示暂无数据吧！” “行，你说什么就是什么吧。” 小王又抱怨着把问题修复了。 类似场景，小王时不时都要经历一次，久而久之，大家都觉得小王的技术太菜了。小王听到后，倍感委屈：“这都是别人的错误，反倒成为我的错了！” 我去看了一下他的代码，的确够烂的，不堪一击！太烂了！下面来吐槽一下。 一、 变量解构一解就报错优化前：1234const App = (props) => { const { dat ...

一、 使用 vite 创建 vue3 项目npm init vue@latest 或者npm create vite@latest进行初始化项目并创建项目名称 code，进入 code 目录进行基本部署。 cd code、npm install 、npm run dev 完成 vue3 项目搭建。 二、 配置 vue-routernpm install vue-router@next --save 分离式：**在 src 目录下创建 router 文件夹，并在文件夹下创建 index.js 和 routes.js index.js ：(只用来存放 router 的配置信息) 1234567import { createRouter, createWebHashHistory } from "vue-router"import routes from './routes' const router=createRouter({ history:createWebHashHistory(), rou ...

本篇文章是从 0 搭建 Vue3 组件库系列文章第二篇,本篇文章将带领大家使用 pnpm 搭建一个简单的 Monorepo 项目,并完成包的关联与测试 什么是 Monorepo其实很简单,就是一个代码库里包含很多的项目,而这些项目虽然是相关联的,但是在逻辑上是独立的,可以由不同人或者团队来维护 为什么要用 pnpm pnpm 对于包的管理是很方便的,尤其是对于一个 Monorepo 的项目。因为对于我们即将开发的组件库来说可能会存在多个 package(包),而这些包在我们本地是需要相互关联测试的,刚好 pnpm 就对其天然的支持。其实像其它包管理工具,比如 yarn、lerna 等也能做到,但是相对来说比较繁琐。而 pnpm 现在已经很成熟了,像 Vant，ElementUI 这些明星组件库都在使用 pnpm,因此本项目也采用 pnpm 作为包管理工具。 pnpm 的使用安装1npm install pnpm -g 初始化项目在项目根目录执行 pnpm init,会自动生成package.json文件 1234567891011121314151617181920212223&# ...

前言从 0 搭建 Vue3 组件库 为什么要写组件库目前业界已经有很多非常成熟的组件库了,比如 Element,Vant,Vuetify 等等等等,那么我们为什么还有去自己从头搭建一个呢? 对于我来说,搭建一个自己的组件库并不是为了给多少人去用(也没有多少人会去用),主要的还是从搭建过程中会学到很多工作中接触不到的知识。比如 Vite 的一些原理,pnpm 包管理,脚手架搭建 Cli,Vitest 测试等等有很多的知识点。以及以这个为主题输出一些文章来帮助一些小伙伴答疑解惑,并且锻炼一下自己的写作能力。 我想对于大部分人来说搭建一个属于自己的组件库都是为了提高自己专业技能,或者说公司需要一个自己的组件库,亦或者说是你想把你的组件库做大做强然后开源出去获得更多人的使用与认可。当然,每个人有每个人不同的想法。幸运的是你们都看到了这篇文章,如果你想要搭建一个自己的组件库,那么请你一定要关注本系列文章。 vue3 组件库从 0 搭建 Vue3 组件库系列文章将使用 Vite3+TS 搭建一个 Vue3 组件库工程,最终产物是一个可直接用于搭建 Vue3 组件库的脚手架,即只需要你在命令行输 ...

Butterfly 安装文档-进阶教程 📖 本教程更新于 2023 年 06 月 06 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意） 🦋 Butterfly 已经更新到 4.9.0 建议 不要把个人需要的文档/图片放在主题source文档夹里，因为在升级主题的过程中，可能会把文档覆盖删除了。 在 Hexo 根目录的source文档夹里，创建一个文档夹来放置个人文档/图片。 引用文档直接为/文档夹名称/文件名 音乐音乐界面使用了插件 hexo-tag-aplayer使用方法请参考插件文档 音乐页面只是普通的 page 页，按普通页面操作生成就行。 以下内容可供选择配置 注意： 仍需要安装插件hexo-tag-aplayer 插件会在每一个文档都插入 js 和 css，为了避免这一情况，3.0 版本内置了 aplayer 需要的 css 和 js。 首先在 Hexo 根目录_config里配置asset_inject为false 12 aplayer: asset_inject: false 然后在你需要使用 aplayer 的页面 Front ...

Butterfly 安装文档-主题问答 📖 本教程更新于 2023 年 06 月 06 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意） 🦋 Butterfly 已经更新到 4.9.0 以下是一些网友在安装的过程中出现的问题。在提问题之前，先看有没有解决方法。 运行后网页显示代码页面只显示 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug #aside_content.aside_content include includes/aside.pug 请下载安装：npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus 配置友情链接报错配置友情链接页面时出现报错 123456 ...

Butterfly 安装文档-主题配置-2 📖 本教程更新于 2023 年 06 月 06 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意） 🦋 Butterfly 已经更新到 4.9.0 Math 数学 MathJax KaTeX 不要在标题里使用 mathjax 语法，toc 目录不一定能正确显示 mathjax，可能显示 mathjax 代码 建议使用 KaTex 获得更好的效果，下文有介绍！ 修改 主题配置文档: mathjax: enable: true true 表示每一页都加载 mathjax.jsfalse 需要时加载，须在使用的 Markdown Front-matter 加上 mathjax: trueper_page: false 如果 per_page 设为 true,则每一页都会加载 Mathjax 服务。设为 false，则需要在文章 Front-matter 添加 mathjax: true,对应的文章才会加载 Mathjax 服务。 然后你需要修改一下默认的 markdown 渲染引擎来实现 MathJax ...

Butterfly安装文档-主题配置 📖 本教程更新于 2023 年 06 月 06 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意） 🦋 Butterfly 已经更新到 4.9.0 语言修改站点配置文档 _config.yml 默认语言是 en 主题支持三种语言 default(en) zh-CN (简体中文) zh-TW (繁体中文) 网站数据修改网站各种数据，例如标题、副标题和邮箱等个人数据，请修改博客根目录的_config.yml 导航栏设置 (Navigation bar settings)参数设置主题配置文档中 1234nav: logo: #image display_title: true fixed: false # fixed navigation bar 表头 表头 参数 解释 logo 网站的 logo，支持图片，直接填入图片链接 display_title 是否显示网站标题，填写 true 或者 false fixed 是否固定状态栏，填写 true 或者 false 菜单/目录修改 ...

Butterfly 安装文档-主题页面 📖 本教程更新于 2023 年 06 月 06 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意） 🦋 Butterfly 已经更新到 4.9.0 Front-matterFront-matter 是 markdown 文档最上方以 --- 分隔的区域，用于指定个别文件的变量。 Page Front-matter 用于页面配置 Post Front-matter 用于文章页配置 如果标注可选的参数，可根据自己需要添加，不用全部都写在 markdown 里 Page Front-matter12345678910111213141516---title:date:updated:type:comments:description:keywords:top_img:mathjax:katex:aside:aplayer:highlight_shrink:random:--- 写法 解释 title 【必需】页面标题 date 【必需】页面创建日期 type 【必需】标签、分类和友情链接三个页面需要配置 upda ...

Butterfly 安装文档-快速开始 📖 本教程更新于 2023 年 06 月 06 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意） 🦋 Butterfly 已经更新到 4.9.0 hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的。 安装 Git 安装 (Github) Git 安装 (Gitee) npm 安装 稳定版【建议】 在你的 Hexo 根目录里 1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 测试版 测试版可能存在 bug，追求稳定的请安装稳定版 如果想要安装比较新的 dev 分支，可以 1git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 升级方法：在主题目录下，运行 git pull 稳定版【建议】 在你的 H ...