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

本文主要是介绍Vue3组件库开发项目实战——02项目搭建(配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

摘要:在现代前端开发中,构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发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.jsonscripts 中添加 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:  truesingleQuote: 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' 模块中导入了 expecttest 两个函数。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. 基本类型比较:

    • toBenot.toBe: 检查值是否相等或不等。
    • toBeDefinedtoBeUndefined: 检查值是否定义或未定义。
    • toBeNulltoBeTruthy/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 是否为假值(空字符串、零、falsenullundefined)。
  • 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 是否是一个抛出错误,并与快照进行比较。

这篇关于Vue3组件库开发项目实战——02项目搭建(配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/980347

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

hadoop开启回收站配置

开启回收站功能,可以将删除的文件在不超时的情况下,恢复原数据,起到防止误删除、备份等作用。 开启回收站功能参数说明 (1)默认值fs.trash.interval = 0,0表示禁用回收站;其他值表示设置文件的存活时间。 (2)默认值fs.trash.checkpoint.interval = 0,检查回收站的间隔时间。如果该值为0,则该值设置和fs.trash.interval的参数值相等。

NameNode内存生产配置

Hadoop2.x 系列,配置 NameNode 内存 NameNode 内存默认 2000m ,如果服务器内存 4G , NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列,配置 Nam