作为一个程序员如果你想要找到你心仪的工作，不可避免的就会问到很多八股文，虽然有的和工作没有半毛钱关系，但是你如果想要通过面试还必须得会。所以我最近开始总结一些面试题，一是为了加强自己的理解能够找到一份好的工作，二是为了尽可能的帮助更多的小伙伴能够快速掌握相关知识或者顺利通过面试🎉。 本篇文章介绍了一些vue的常见问题。我尽量将这些问题根据难易程度，相关联度进行排列使其更好的过度与理解。当然本篇文章不仅仅是八股文那么简单，工作中经常也会经常用到这些知识点。 vue生命周期 这个问题一般问的不多,但是如果问到了你就必须得答出来 回答 Vue2(选项式API) Vue3(setup) 描述 ...

相信大家在前端开发中都使用过很多前端脚手架，如vue-cli，create-vite，create-vue等；本篇文章将会为大家详细介绍这些前端脚手架是如何实现的，并且从零实现一个create-kitty脚手架发布到npm上。 pnpm搭建Monorepo环境 使用pnpm管理对项目进行管理是非常方便的，极大的解决了多个包在本地调试繁琐的问题。 什么是Monorepo？ 就是指在一个大的项目仓库中，管理多个模块/包（package），这种类型的项目大都在项目根目录下有一个packages文件夹，分多个项目管理。大概结构如下： -packages -pkg1 --package.json -pk...

今天看到一篇文章中提到了一个好用的工具release-it。刚好可以用在我正在开发的vue3组件库。纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组件库可以自动化发布、管理版本号、生成changelog、tag等 项目调整 在使用这个工具之前先对组件库进行进行一些调整,这里仅是对项目本身的优化和release-it无关。 首先修改vite.config.ts将打包后的目录dist更改为kitty-ui 自动打包中的删除打包文件改成nodejs方式实现(script/utils/delpath.ts)。打包之前先将kitty-ui文件下的目录...

本篇文章将为我们的组件库添加一个新成员:Input组件。其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 复合型输入框 每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行一一的实现。 基础用法 首先先新建一个input.vue文件,然后写入一个最基本的input输入框 <template> <divclass="k-input"> <inputclass="k-input__inner"/> </div> </...

本篇文章将介绍如何在组件库中开发一个组件,其中包括 如何本地实时调试组件 如何让组件库支持全局引入 如何在setup语法糖下给组件命名 如何开发一个组件 目录结构 在packages目录下新建components和utils两个包,其中components就是我们组件存放的位置,而utils包则是存放一些公共的方法之类的。分别在两个文件下执行pnpminit,并将它们的包名改为@easyest/components和@easyest/utils { "name":"@easyest/components", "version":"1.0.0", "description":"", "mai...

本篇文章将介绍如何使用vite打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(.d.ts) 打包配置 vite专门提供了库模式的打包方式,配置其实非常简单,首先全局安装vite以及@vitejs/plugin-vue pnpmaddvite@vitejs/plugin-vue-D-w 在components文件下新建vite.config.ts配置文件 import{defineConfig}from"vite"; importvuefrom"@vitejs/plugin-vue"; exportdefaultdefineConfig({ build:{ //打包后...

使用glup打包组件库并实现按需加载 当我们使用Vite库模式打包的时候,vite会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。所以打包的时候我们可以不让vite打包样式文件,样式文件将使用gulp进行打包。那么本篇文章将介绍如何使用gulp打包样式文件,以及如何按需加载样式文件。 自动按需引入插件 现在很多组件库的按需引入都是借助插件来解决的,比如ElementPlus是使用unplugin-vue-components和unplugin-auto-import,这两个插件可以实现 import{Button}from"easyest"; ...

我们都知道,通常情况下我们使用vue大多都是用的SFC(SignleFileComponent)单文件组件模式,即一个组件就是一个文件,但其实Vue也是支持使用JSX来编写组件的。这里不讨论SFC和JSX的好坏,这个仁者见仁智者见智。本篇文章旨在带领大家快速了解和使用Vue中的JSX语法,好让大家在Vue中遇到或使用JSX的时候能很快入手 JSX如何用 这里以vite项目为例,要想在项目中使用JSX,我们需要安装一个插件@vitejs/plugin-vue-jsx,这个插件可以让我们在项目中使用JSX/TSX npmi@vitejs/plugin-vue-jsx-D 安装完成之后在vite....

为什么要引入husky? 虽然我们项目中引入了prettier和eslint对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们可以引入husky来从源头上解决此类问题。简单来说,husky可以在我们提交代码之前校验我们的代码是否符合我们配置的规范。接下来就让我们看一下husky的具体使用吧! husky的使用 首先安装 pnpmihusky-D-w 在package.json中scripts中设置prepare钩子:huskyinsta...

在Vue3中，有许多与响应式相关的函数，例如toRef、toRefs、isRef、unref等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些API并能够熟练地回答面试官的相关问题。 ref() 大家对于ref这个API肯定都不陌生。在Vue3中经常会用到它。它的作用是接收一个值并返回一个响应式的对象。我们可以通过.value属性来访问和修改这个值。在模板中，我们可以省略.value，例如在下面的代码中，当点击按钮时，页面中的count会响应式地更改。 <template> <div> {{count}...

在vue中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是vue提供了keep-alive组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本使用方法(这些官网文档已经写的很清楚了),而是它如何结合VueRouter来更自由的控制页面状态的缓存 全部缓存 我们先搭建一个Vue项目,里面有三个页面a,b,c,并给它们一些相互跳转的逻辑和状态 a页面 <template> <div> <div>A页面</di...

Flex布局目前已经非常流行了,现在几乎已经兼容所有浏览器了。在文章开始之前我们需要思考一个问题:我们为什么要使用Flex布局? 其实答案很简单,那就是Flex布局好用。一个新事物的出现往往是因为旧事物不那么好用了,比如,如果想让你用传统的css布局来实现一个块元素垂直水平居中你会怎么做?实现水平居中很简单,margin:0auto就行,而实现垂直水平居中则可以使用定位实现: <divclass="container"> <divclass="item"></div> </div> .container{ position:relative; ...