Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）

news2024/11/19 8:42:51

摘要：在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。

为什么引入ESLint和Prettier

  • ESLint：它是一个代码检查工具，可以帮助我们在编译前就能发现代码中的潜在问题，如未使用的变量、可能的逻辑错误等。通过配置ESLint，我们可以强制执行团队的代码风格和最佳实践，从而提高代码质量。
  • Prettier：作为一个代码格式化工具，Prettier可以自动调整代码的格式，确保所有代码遵循统一的格式标准。这不仅有助于提升代码的可读性，还能减少因格式问题引起的代码审查冲突。

为什么引入Sass和Tailwind CSS

  • Sass：作为一种CSS预处理器，Sass提供了变量、嵌套规则、混合（mixins）等特性，使得CSS的编写更加高效和模块化。它有助于我们更好地组织和管理样式代码。
  • Tailwind CSS：这是一个实用程序优先的CSS框架，它提供了一系列的类，可以直接在HTML中使用，快速构建界面。Tailwind CSS的灵活性和响应式设计使其成为快速原型开发和迭代的理想选择。

使用VitePress编写组件文档

  • VitePress：Vue.js的官方静态站点生成器，专为文档和博客设计。它基于Vue3和Vite，提供了简洁的Markdown语法和Vue组件的集成，使得编写和维护组件文档变得简单直观。良好的文档对于组件库的用户来说至关重要，它可以帮助用户快速理解和使用组件。

配置单元测试工具Vitest

  • Vitest：这是一个基于Vite的测试框架，它提供了快速的测试运行速度和良好的开发体验。通过编写单元测试，我们可以确保组件的每个部分都能按预期工作，减少bug的产生，提高代码的健壮性。

通过引入这些工具和库，我们不仅能够提升开发效率，还能确保代码的质量和一致性。ESLint和Prettier保证了代码风格的一致性，Sass和Tailwind CSS加速了样式开发，VitePress简化了文档编写，而Vitest则确保了组件的可靠性。这些工具的结合使用，为Vue3组件库的开发提供了一个全面、高效的解决方案。

 假设在本博客前你已经看过必备知识导学了

Vue3组件库开发项目实战——01组件开发必备知识导学-CSDN博客

创建vite项目

用vite首先创建一个支持ts的项目：使用命令 npm create vite或yarn create vite

设置一个项目名称，并选择Vue+TypeScript

安装JSX

在Vite项目中引入JSX，我们可以通过@vitejs/plugin-vue-jsx插件实现，首先安装它：

使用命令：npm i @vitejs/plugin-vue-jsx -D 或 yarn add @vitejs/plugin-vue-jsx -D

配置JSX

配置一下该插件，在vite.config.ts配置文件中

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

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

安装ESLint

ESLint：用于代码风格检查和规范。使用下面命名：确保不会因为版本号冲突

npm install @typescript-eslint/eslint-plugin@^5.7.0 @typescript-eslint/parser@^5.7.0 eslint@^8.5.0 eslint-plugin-vue@^8.2.0 --save-dev

配置.eslintrc.js

在项目根目录创建一个 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    "vue/setup-compiler-macros": true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
  ],
  parserOptions: {
    ecmaVersion: 13,
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/no-multiple-template-root": "off",
    "vue/max-attributes-per-line": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/html-self-closing": "off",
  },
};

运行ESlint

然后在 package.json 的 scripts 中添加 ESLint 的运行命令 "lint": "eslint . --ext .ts,.vue"

运行npm run lint

将第五行删除，解决报错

安装Prettier

使用命令：npm i -d prettier eslint-plugin-prettier eslint-config-prettier

或者

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

配置.prettierrc.js

创建一个 prettier.config.js 文件

module.exports = {
  // printWidth: 80,
  // tabWidth: 2,
  // useTabs: false,
  semi: false, // 未尾逗号, default:  true
  singleQuote: true, // 单引号 default: false
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  trailingComma: "none", // 未尾分号 default: es5    all | none | es5
  // bracketSpacing: true,
  // bracketSameLine: false,
  // jsxBracketSameLine: false,
  arrowParens: "avoid", // default: always
  // insertPragma: false,
  // requirePragma: false,
  proseWrap: "never",
  // htmlWhitespaceSensitivity: 'css',
  // vueIndentScriptAndStyle: false,  // .vue 缩进
  endOfLine: "auto", // default lf
};

修改.eslintrc.js文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-multiple-template-root': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/html-self-closing': 'off',
    'prettier/prettier': 'off'
  }
}

解决可能的 Delete `␍`eslint(prettier/prettier)问题

git config --global core.autocrlf false

 安装VitePress

使用命令：npm add -D vitepress 或 yarn add -D vitepress
Getting Started | VitePress vitepress api文档 Getting Started | VitePress

vitepress目录初始化

使用npx vitepress init命令初始化vitepress项目目录结构

项目目录如下

启动vitepress

初始化后scripts会自动添加如下vitepress启动脚本

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs",
    "docs:preview": "vitepress preview docs"
  }
}

 

输入命令：npm run docs:dev 

 

 浏览器打开地址，可以看到通过npx vitepress init初始化后的的内容已经渲染到vitepress页面了

 安装Sass + Tailwind CSS

使用命令

npm install -D sass tailwindcss postcss autoprefixer

 tailwindcss配置初始化

npx tailwindcss init -p 

配置Tailwind CSS

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

新增src/index.scss文件

/* index.scss */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

在main.ts中引入tailwindcss样式文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import './index.scss'

createApp(App).mount('#app')

可以通过vite的示例components中测试一下tailwind css是否可以用

打开浏览器可以看到样式已经生效了

Tailwind css常用样式

Tailwind CSS 是一个高度可定制的 CSS 框架，提供了丰富的实用类，可以帮助快速构建现代化的网页界面。以下是一些 Tailwind CSS 中常用的样式类：

  1. 布局类：

    • container: 设置页面内容的最大宽度并居中显示。
    • mx-auto: 水平居中。
    • my-auto: 垂直居中。
    • flex: 创建弹性布局。
    • grid: 创建网格布局。

  2. 间距类：rem是根元素的fontsize

    • m-4: 设置外边距为 1rem。
    • p-4: 设置内边距为 1rem。
    • mx-8: 设置水平外边距为 2rem。
    • my-8: 设置垂直外边距为 2rem。

  3. 字体类：

    • text-sm: 设置字体大小为小号。
    • font-bold: 设置字体为粗体。
    • text-center: 文本水平居中显示。
    • text-gray-500: 设置文本颜色为灰色。

  4. 背景类：

    • bg-gray-200: 设置背景颜色为灰色。
    • bg-cover: 背景图像覆盖整个元素。
    • bg-center: 背景图像居中显示。

  5. 边框类：

    • border: 添加边框。
    • border-gray-300: 设置边框颜色为灰色。
    • rounded-md: 添加圆角边框。

  6. 响应式类：

    • sm:text-lg: 在小屏幕上设置文本大小为大号。
    • md:hidden: 在中等屏幕上隐藏元素。

这些只是 Tailwind CSS 中一部分常用样式类，Tailwind CSS 还提供了许多其他实用类，可以根据具体需求灵活使用。Tailwind CSS 的特点是通过组合这些类来构建界面，避免了手动编写大量的 CSS 样式，提高了开发效率。

安装vitest

npm install -D vitest happy-dom @testing-library/vue

  • vitest: 测试框架，用于执行整个测试过程并提供断言库、mock、覆盖率
  • happy-dom: 是用于提供在 Node 环境中的 Dom 仿真模型

配置vite.config.ts

在配置时，我们发现 ts文件会报错。这是由于 test 属性属于 Vitest 的扩展属性，vite 原生配置中并没有定义这个属性。在vite.config.ts顶部加上///注释

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  test: {
    globals: true,
    environment: 'happy-dom',
    // 支持tsx组件，很关键
    transformMode: {
      web: [/\.[jt]sx$/]
    }
  }
})

配置vitest启动命令

在script脚本中添加

    "test": "vitest",
    "coverage": "vitest run --coverage"

测试vitest

来测试一下vitest的效果吧，随意创建sum.js文件和sum.test.js文件

 

// sum.js
export function sum(a, b) {
  return a + b
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

简单解析这段代码：

  1. import { expect, test } from 'vitest': 这行代码从 'vitest' 模块中导入了 expect 和 test 两个函数。expect 用于编写断言，test 用于定义测试用例。

  2. import { sum } from './sum': 这行代码从当前目录下的 sum.js 文件中导入了 sum 函数，以便在测试中使用。

  3. test('adds 1 + 2 to equal 3', () => { ... }): 这是一个测试用例，使用 test 函数定义。第一个参数是测试用例的描述，第二个参数是一个函数，包含了测试用例的具体实现。

  4. expect(sum(1, 2)).toBe(3): 在测试用例的实现中，调用了 sum 函数，并使用 expect 函数对其返回值进行断言。这里断言的意思是调用 sum(1, 2) 的结果应该等于 3。

运行vitest查看测试用例是否通过

vitest常用指令

Vitest 的断言方法大致可以分为以下几类：

  1. 基本类型比较：

    • toBe 和 not.toBe: 检查值是否相等或不等。
    • toBeDefined 和 toBeUndefined: 检查值是否定义或未定义。
    • toBeNull 和 toBeTruthy/toBeFalsy: 检查值是否为 null、零、空字符串等。

  2. 值的精确匹配：

    • toEqual: 检查值的精确结构和内容（包括数组和对象）。
    • toBeCloseTo: 检查数值的近似相等。

  3. 类型和实例检查：

    • toBeInstanceOf: 检查值是否是某个构造函数的实例。

  4. 正则表达式匹配：

    • toMatch: 检查值是否匹配给定的正则表达式。

  5. 异常处理：

    • toThrow: 检查函数是否抛出预期的错误。
    • toThrowErrorMatchingSnapshot: 检查错误是否与预期的错误信息一致。

  6. 自定义断言：

    • expect.extend: 用户可以扩展自定义的断言方法。
    • expect.addType: 添加类型检查功能，如检查值是否为特定类型。

这些断言方法是 Vitest 测试框架中的核心工具，用于验证代码的行为是否符合预期。

详细的

  • expect(value).toBe(expected): 检查 value 是否等于 expected。
  • expect(value).not.toBe(expected): 检查 value 是否不等于 expected。
  • expect(value).toBeDefined(): 检查 value 是否已定义。
  • expect(value).toBeUndefined(): 检查 value 是否未定义。
  • expect(value).toBeNull(): 检查 value 是否为 null。
  • expect(value).toBeTruthy(): 检查 value 是否为真值（非空字符串、非零数字、非 false、非 null、非 undefined）。
  • expect(value).toBeFalsy(): 检查 value 是否为假值（空字符串、零、false、null、undefined）。
  • expect(value).toEqual(expected): 检查 value 是否与 expected 相等，包括对象、数组等结构。
  • expect(value).toBeCloseTo(expected, delta): 检查 value 是否与 expected 数值类型相差不超过 delta 的绝对值。
  • expect(value).toBeInstanceOf(constructor): 检查 value 是否为 constructor 的实例。
  • expect(value).toMatch(pattern): 检查 value 是否与 pattern 正则表达式匹配。
  • expect(value).toThrow(error): 检查 value 是否是一个抛出 error 的函数。
  • expect(value).toThrowErrorMatchingSnapshot(): 检查 value 是否是一个抛出错误，并与快照进行比较。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1663930.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JVS物联网平台点位管理：让数据更高效

JVS物联网平台点位管理：让数据更高效

采集点位数据管理 采集点位数据管理采用列表页的方式进行展示&#xff0c;系统支持新增、批量导入、批量导出、批量删除、点位发现等功能&#xff0c;点位的详情、删除、历史记录等&#xff1a; 点位新增 点击新增点位按钮&#xff0c;在弹出表单中&#xff0c;可以填写相关的…
阅读更多...
深入理解JavaScript事件循环Event Loop：宏任务与微任务的奇幻之旅

深入理解JavaScript事件循环Event Loop：宏任务与微任务的奇幻之旅

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f389; 引言&#x1f31f; 什么是事件循环&#xff1f;&#x1f4da; 「宏任务」 vs 「微任务」「宏任务」(Macrotask)「微任务」(Microtask)实际应用中的注意事项 &#x1f500; 执行流程概览&#x1f4dd; 代码示例…
阅读更多...
【挑战30天首通《谷粒商城》】-【第一天】03、简介-分布式基础概念

【挑战30天首通《谷粒商城》】-【第一天】03、简介-分布式基础概念

文章目录 课程介绍 ( 本章了解即可&#xff0c;可以略过)1、微服务简而言之: 2、集群&分布式&节点2.1、定义2.2、示例 3、远程调用4、负载均衡常见的负裁均衡算法: 5、服务注册/发现&注册中心6、配置中心7、服务熔断&服务降级7.1、服务熔断7.2、服务降级 8、AP…
阅读更多...
QT作业5

QT作业5

1、聊天室 服务器端 //头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QTcpSocket> #include <QList> #include <QListWidget> #include <QMessageBox> #include <QDebug> #includ…
阅读更多...
C语言（指针）4

C语言（指针）4

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…
阅读更多...
我必须要吹一波MATLAB 2024a，太牛逼了！|福利：附安装教程及下载地址

我必须要吹一波MATLAB 2024a，太牛逼了！|福利：附安装教程及下载地址

最近逛MATLAB官网&#xff0c;发现MATLAB 2024a版本已经Pre-release了&#xff0c;翻了下release note&#xff0c;不得不感叹&#xff0c;实在是太强了&#xff01; 这次重点更新了四个工具箱&#xff1a; Computer Vision Toolbox Deep Learning Toolbox Instrument Contro…
阅读更多...
1.基于python的单细胞数据预处理-降维可视化

1.基于python的单细胞数据预处理-降维可视化

目录 降维的背景PCAt-sneUMAP检查质量控制中的指标 参考&#xff1a; [1] https://github.com/Starlitnightly/single_cell_tutorial [2] https://github.com/theislab/single-cell-best-practices 降维的背景 虽然特征选择已经减少了维数&#xff0c;但为了可视化&#xff0…
阅读更多...
InputStream，OutputStream的用法以及相应的案例

InputStream，OutputStream的用法以及相应的案例

1. 文件系统的操作&#xff1a;File类。 2. 文件内容的操作&#xff1a;Stream流。 字符流&#xff1a;IntputStream &#xff0c; OutputStream。 字节流&#xff1a;read &#xff0c; write。 InputStream&#xff0c;OutputStream InputStream和OutputStream都不能被实例…
阅读更多...
Web数字孪生引擎

Web数字孪生引擎

Web数字孪生引擎是指用于在Web上创建和运行数字孪生的软件平台。它们通常提供一组API和工具&#xff0c;用于连接到实时数据源、可视化数据并创建交互式体验。Web数字孪生引擎被广泛应用于各种应用&#xff0c;例如工业物联网、智能建筑、城市管理和公共安全等。北京木奇移动技…
阅读更多...
Linux 安裝 rpm包

Linux 安裝 rpm包

下载 地址&#xff1a;https://developer.aliyun.com/packageSearch 安装 rpm -ivh lsof-4.87-6.el7.x86_64.rpmlsof -Ki|awk {print $2}|sort|uniq -c|sort -nr|head lsof | wc -l
阅读更多...
上位机图像处理和嵌入式模块部署（树莓派4b和电源供给）

上位机图像处理和嵌入式模块部署（树莓派4b和电源供给）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面&#xff0c;我们说过pc电脑和嵌入式设备&#xff0c;两者都可以实现相同的软件功能。但是和pc相比较&#xff0c;嵌入式设备不仅价格更便宜&a…
阅读更多...
RabbitMQ (windows) 安装

RabbitMQ (windows) 安装

大家好我是苏麟 , 今天安装一下 RabbitMQ . 官网 : RabbitMQ: One broker to queue them all | RabbitMQ 1.点击 Getting Started 2. 点击 Docs 3.点击 Install And Upgrade 4.点击 installation via Chocolatory 5. 直接下载安装包 RabbitMQ 下好了先放在一遍 RabbitMQ 需要 E…
阅读更多...
前端框架-echarts

前端框架-echarts

Echarts 项目中要使用到echarts框架&#xff0c;从零开始在csdn上记笔记。 这是一个基础的代码&#xff0c;小白入门看一下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" co…
阅读更多...
新手做抖音小店必须了解的回款周期问题！这样做，一步快速结算

新手做抖音小店必须了解的回款周期问题！这样做，一步快速结算

哈喽~我是电商月月 我们做抖音小店&#xff0c;在商品上架出单后&#xff0c;商家需要到商品的上家拍单&#xff0c;由上家发货给顾客&#xff0c;顾客收到货后&#xff0c;周期一到才能赚取到商品的差价&#xff0c;这个时间大概在7~15天之内&#xff0c;想准时发货不超时违规…
阅读更多...
八款免费好用的3D建模AI工具，让你的设计更简单！

八款免费好用的3D建模AI工具，让你的设计更简单！

随着人工智能和大语言模型的不断发展&#xff0c;AI工具正逐渐渗透到3D建模领域中。传统上&#xff0c;3D建模师需使用如3ds Max、Maya等这类复杂的3D建模软件&#xff0c;投入大量的时间与精力来创作精细的模型。然而&#xff0c;有了AI工具的辅助&#xff0c;设计过程不仅对专…
阅读更多...
激光测径仪在胶管生产中扮演着什么角色？

激光测径仪在胶管生产中扮演着什么角色？

关键词&#xff1a;激光测径仪,胶管,胶管测径仪,在线测径仪 胶管生产的基本工序为混炼胶加工、帘布及帆布加工、胶管成型、硫化等。不同结构及不同骨架的胶管&#xff0c;其骨架层的加工方法及胶管成型设备各异。 全胶胶管因不含骨架层&#xff0c;只需使用压出机压出胶管即可&…
阅读更多...
AWS云优化：实现性能和成本的最佳平衡

AWS云优化：实现性能和成本的最佳平衡

随着企业数字化转型的加速&#xff0c;对云计算平台的需求也不断增长。AWS作为云计算行业的领导者之一&#xff0c;提供了广泛的云服务和解决方案&#xff0c;帮助企业实现业务的创新和发展。在AWS云上部署应用程序和服务后&#xff0c;对其进行优化是至关重要的&#xff0c;以…
阅读更多...
【官方下载】Android 开发环境之 java 11 下载地址和下载操作步骤

【官方下载】Android 开发环境之 java 11 下载地址和下载操作步骤

作者介绍&#xff1a; 百度资深Android工程师T6&#xff0c;在百度任职7年半。 目前&#xff1a;成立赵小灰代码工作室&#xff0c;欢迎大家找我交流Android、微信小程序、鸿蒙项目。文章底部&#xff0c;csdn有为我插入微信的联络方式&#xff0c;欢迎大家联络我。 一&#x…
阅读更多...
TikTok机房ip好还是住宅ip好？

TikTok机房ip好还是住宅ip好？

住宅ip比较好&#xff0c;机房数据中心IP高效、低价&#xff0c;所以使用的人多且用处复杂&#xff0c;这类ip极大可能存在滥用的黑历史&#xff0c;通过此类ip访问tiktok&#xff0c;被禁止的可能性更高&#xff0c;更容易被拉入黑名单。所以我们推荐tiktok独享原生ip搭建节点…
阅读更多...
计算机组成结构—指令和指令格式

计算机组成结构—指令和指令格式

目录 一、指令的基本格式 二、指令字长 1. 定长指令字结构 2.变长指令字结构 三、地址码 1.四地址指令 2.三地址指令 3.二地址指令 4.一地址指令 5. 零地址指令 四、操作码 1. 定长操作码指令格式 2. 扩展操作码指令格式 五、指令的操作数类型和操作类型 1. 操作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023