手把手从零搭建一个 vue3 组件库 (一)

已于 2023-05-14 18:05:43 修改
阅读量3.1k 收藏 15
点赞数 2
分类专栏： 组件库 文章标签： typescript javascript 前端
于 2022-08-17 17:55:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43960320/article/details/126391327
版权

这篇文章会带着你从零搭建一个基于 vue3 的组件库。

github 地址

gitee 地址

话不多说，开搞

项目搭建

  • 新建 vangle 项目
  • cd vangle 进入项目
  • pnpm init -y 初始化 package.json 文件，没安装 pnpm 的需要提前安装一下
npm i pnpm -g
  • 新建 packages 目录，里面存放我们要开发的项目，例如 components、cli 等
  • 创建 pnpm-workspace.yaml 文件，并指定 packages
# pnpm-workspace.yaml
packages:
  - 'packages/*'
  • 安装 typescript 并初始化 tsconfig.json 文件
# -w 表示在要把包下载到根目录
pnpm add typescript -D -w
npx tsc --init
  • 想配啥配啥
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2016",
    "sourceMap": false,
    "module": "esnext",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "types": ["node"],
    "rootDir": "."
  }
}

添加代码规范

prettier

  • 安装依赖
pnpm add prettier -D -w
  • 根目录创建 .prettierrc.js
module.exports = {
  semi: false,
  singleQuote: true,
  printWidth: 80,
  trailingComma: 'none',
  arrowParens: 'avoid'
}

eslint

  • 安装依赖
pnpm add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D -w
配合 prettier

当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题，本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

  • 安装依赖
pnpm add eslint-config-prettier eslint-plugin-prettier -D -w
  • 根目录创建 .eslint.js
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'prettier/prettier': 'error',
    'no-extra-semi': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-extra-semi': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-interface': 'off'
  }
}
  • package.json 中添加执行命令
"scripts": {
  "prettier": "prettier --write .",
  "lint": "eslint --ext .ts packages/*/**.ts",
  "lint:fix": "eslint --ext .ts packages/*/**.ts --fix"
},

这时我们可以在 packages 下创建 components/index.ts，写一些不符合规则的代码然后运行命令试试效果

husky + lint-staged

husky 哈士奇，代码提交前可以执行自定义 git hooks

在代码提交之前，进行代码规则检查能够确保进入 git 库的代码都是符合代码规则的。但是整个项目上运行 lint 速度会很慢，lint-staged 能够让 lint 只检测暂存区的文件，所以速度很快。

  • 安装依赖
pnpm add husky lint-staged -D -w
  • 执行 npx husky install 创建.husky 目录，该目录下有一个 pre-commit 文件在每次提交代码的时候会执行，可以修改里面的运行脚本，自定义提交需要做的工作，如果没有 pre-commit 文件可以手动创建
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
  • 在 package.json 中添加 lint-staged 配置
{
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --ext .ts packages/*/**.ts", // 这里也可以写我们上面定义好的命令，如：pnpm lint
      "eslint --ext .ts packages/*/**.ts --fix" // 这里也可以写我们上面定义好的命令，如：pnpm lint:dix
    ]
  }
}

现在我们可以试着提交一下代码，如果不符合 eslint 校验规则的会自动修复，修复完成后需要再次提交

commitlint

commitlint 统一提交时的 message，官方文档

  • 安装依赖
pnpm add @commitlint/config-conventional @commitlint/cli -D -w
  • 根目录新建 commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
}
  • 添加钩子 .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

现在我们试着提交一下代码

git add .
git commit -m "test"

由于 “test” 不符合提交格式，所以不会通过

在这里插入图片描述

我们再试着使用正确的规则提交，不出意外能成功。。。

git commit -m "style: commitlint"

到此我们项目搭建和代码规范以完毕，目录结构如下

|-- vangle
    |-- .eslintrc.js
    |-- .gitignore
    |-- .prettierrc.js
    |-- commitlint.config.js
    |-- package.json
    |-- pnpm-lock.yaml
    |-- pnpm-workspace.yaml
    |-- README.md
    |-- tsconfig.json
    |-- .husky
    |   |-- commit-msg
    |   |-- pre-commit
    |   |-- _
    |       |-- .gitignore
    |       |-- husky.sh
    |-- packages
        |-- components
            |-- index.ts

编写一个组件

组件环境

  • 在 packages 下新建 components 并初始化 package.json
// packages/components/package.json
{
  "name": "@vangle/components",
  "version": "1.0.0",
  "description": "all components are settled here",
  "main": "index.ts",
  "module": "index.ts",
  "unpkg": "index.js",
  "jsdelivr": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "vue": "^3.2.0"
  },
  "types": "index.d.ts"
}
  • 项目根目录安装 vue 和 vite 依赖，安装 vite 依赖会有 define/* 提示。
pnpm add vue vite unplugin-vue-define-options -D -w
  • unplugin-vue-define-options 可以在编写组件的时候 通过 defineOptions 方法为组件设置 name
defineOptions({
  name: 'PlayButton'
})
  • 修改 tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2016",
    "sourceMap": false,
    "module": "esnext",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "types": ["node", "unplugin-vue-define-options"],
    "rootDir": ".",
    "moduleResolution": "node",
    "paths": {
      "@valgle/*": ["packages/*"]
    }
  }
}
  • eslint 添加支持 vue 插件 eslint-plugin-vue
pnpm add eslint-plugin-vue -D -w
  • 修改 .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended', // add
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  plugins: ['@typescript-eslint', 'prettier', 'vue'] // add
}

Button 组件

  • 在 packages/components 目录下创建 button 目录，结构如下

注意：我们这里只编写一个简单的 button 组件，主要是打通整体流程

|-- button
    |-- index.ts
    |-- src
    |   |-- button.ts
    |   |-- button.vue
    |   |-- button.less
    |-- __test__

components/button/src/button.vue

<template>
  <button><slot></slot></button>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'VangleButton'
})
</script>

components/button/index.ts

export * from './src/button'
import type { App } from 'vue'
import Button from './src/button.vue'

Button.install = (app: App) => {
  app.component(Button.name, Button)
}

export { Button }
export default Button

components/index.ts 导出

export * from './button'

使用组件

  • 在根目录 package.json 中添加 组件的依赖
{
  "devDependencies": {
    "@vangle/components": "workspace:*"
  }
}

这里的包名 @vangle/components，就是我们在 pzckages/components/package.json 中设置的 name 属性

  • 执行 pnpm install

play 一下

  • 我们可以在根目录创建使用 vite 创建一个项目，请参考 vite 官网，项目名称就叫 play

  • 创建完后修改 pnpm-workspace.yaml

packages:
  - 'packages/*'
  - 'play' # add
  • 添加启动命令 package.json
{
  "scripts": {
    "play": "pnpm dev --filter ./play", // add
    "prettier": "prettier --write .",
    "lint": "eslint --ext .ts packages/*/**.ts",
    "lint:fix": "eslint --ext .ts packages/*/**.ts --fix"
  }
}
  • 最后在 play 项目中使用我们编写的组件即可

注意事项：

由于我们处于开发环境，需要给 vite.config.ts 添加 unplugin-vue-define-options/vite 插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), DefineOptions()]
})

================================= 分割线 =================================

到这里就是本篇文章的全部内容了，如果对大家有用，希望多多支持一下，你们的支持就是我的动力呀 (●’◡’●)

下期准备写一个完整的组件，并详细介绍如何为组件编写文档。组件文档使用 vitepress

幽月之格
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
从0搭建Vue3组件库(一): 开篇
JackChan
02-17 311
从0搭建Vue3组件库(一): 开篇
盘点12个Vue 3的高颜值UI组件库
最新发布
夏天的博客
05-02 1883
今天给大家盘点12个Vue 3的高颜值UI组件库，凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库，用广东话讲：个个都靓。
从0搭建Vue3组件库(三): 组件库的环境配置
xdididi的博客
08-25 276
本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理使用pnpm如果要安装在项目根目录下,则需要加-w。
从0搭建Vue3组件库:使用 glup 打包组件库并实现按需加载
wsnbb_2023的博客
07-10 606
当我们使用 Vite 库模式打包的时候,vite 会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。在此之前,我们先在 components 新建一个 script 文件夹用于存放我们的脚本相关内容,script 下的 build 文件夹里的内容则是本篇文章要介绍的打包相关内容。删除打包目录函数可以放在 bulid/utils 中的 delpath.ts,注意这里因为打包后的 easyest 包是我们最终要发布的包,所以我们需要将。
一个基于 DevUI Design 设计体系的 Vue3 组件库
05-03
一个基于 DevUI Design 设计体系的 Vue3 组件库，使用最新的 Vite + Vue3 + TypeScript + JSX 搭建，包含60多个简洁、易用、灵活的组件。 支持 TypeScript；支持 Nuxt3； 支持按需引入；支持国际化；支持主题定制，...
Farris UI Vue 是一套基于Farris Design 的 Vue3 组件库
07-17
Farris UI Vue 是一套基于Farris Design 的 Vue3 组件库。具有Fast Reliable Responsive Intuitive Smart 五大特性。Fast : Farris Vue 是一套具有急速用户体验的 UI 套件，Farris Data Grid 在渲染大量数据时具有...
从零撸一个pc端vue的ui组件库( 计数器组件 )
10-16
主要介绍了pc端vue的ui组件库的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
搭建一个组件库（vue3）
小白一枚~~
04-20 2384
pnpm init。
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
随便写写
10-28 910
开发组件库CLI工具
从零开始搭建Vue3.0项目入门篇
yang651158的博客
09-26 4476
vue3.0入门心得
vue3组件库项目学习笔记（一）：基础搭建
weixin_46463785的博客
01-14 688
写了如何使用pnpm+vue3+vite3进行组件库开发的架构搭建
vue3 构建属于自己的组件库dxui
秋来九月八
03-14 1986
为了我自己的组件库，我从去年下半年开始，到现在一直在运用vue3框架，写各种前端web常用的组件，从Button开始到Select，将来还会继续完善。
从零开始搭建一个VUE3.0项目之基础搭建（一）
光滑的秃头
11-10 2356
最近在整理之前的笔记，现在回头来看，发现之前写的一些VUE相关笔记还是比较粗糙的，特此梳理一遍，所以就有了这一篇文章。 1 安装nodejs 什么是node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台 直接在官网下载对应版本安装即可 官网下载地址：http://nodejs.cn/download/ PS: 推荐下载LTS版本的 安装完毕后可以在控制台通过命令：npm -v 查看版本.
从零开始自学vue3笔记（一）：搭建步骤
BHSZZY的博客
08-29 821
本人下载了v12.16.3版本的msi（省的自己配置环境变量了）安装后，可以用node -v、npm -v查看是否安装成功。
videojs vue 动态source_手把手从零开始封装一个vue视频播放器组件
05-23
好的，下面是从零开始封装一个基于videojs和vue的视频播放器组件的步骤。 1. 安装依赖 首先需要安装video.js和vue-video-player这两个依赖： ``` npm install video.js vue-video-player --save ``` 2. 创建组件 创建一个名为VideoPlayer.vue的组件文件，并在文件中引入video.js和vue-video-player： ```html <template> <div> <video ref="videoPlayer" class="video-js"></video> </div> </template> <script> import videojs from 'video.js' import 'video.js/dist/video-js.css' import VueVideoPlayer from 'vue-video-player' export default { name: 'VideoPlayer', props: { options: { type: Object, default: () => ({}) } }, data() { return { player: null } }, mounted() { this.initPlayer() }, methods: { initPlayer() { this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() { console.log('player is ready') }) } }, beforeDestroy() { if (this.player) { this.player.dispose() } } } </script> <style> /* video.js样式 */ .video-js { width: 100%; height: 100%; } </style> ``` 在组件中，我们使用了video.js创建了一个video标签，并将其挂载到组件中。同时，我们通过props传递了一些配置项，如autoplay、controls等。 3. 使用组件 使用该组件时，可以通过options属性传递一些配置项，如下所示： ```html <template> <div> <VideoPlayer :options="{ autoplay: false, controls: true, sources: [{ src: 'http://example.com/path/to/video.mp4', type: 'video/mp4' }] }" /> </div> </template> <script> import VideoPlayer from './VideoPlayer.vue' export default { name: 'App', components: { VideoPlayer } } </script> <style> /* 样式 */ </style> ``` 在使用组件时，我们只需要传递一个options属性，其中包含了视频链接、视频类型、是否自动播放等配置即可。这里我们只提供了一个视频链接，实际使用时可以根据需求添加更多的源。 至此，一个基于video.js和vue的视频播放器组件就完成了。需要注意的是，该组件在使用时需要提供video.js的样式文件，并且需要在mounted生命周期函数中初始化播放器，以及在beforeDestroy生命周期函数中销毁播放器实例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值