Vite + Vue3 实现前端项目工程化

通过官方脚手架初始化项目

第一种方式，这是使用vite命令创建，这种方式除了可以创建vue项目，还可以创建其他类型的项目，比如react项目

npm init vite@latest

第二种方式，这种方式是vite专门为vue做的配置，这种方式创建的项目在创建时会提示是否需要安装各种插件配置

npm init vue@latest

第三种方式，直接快速通过参数生成

npm init vite@latest project-engineer --template vue-ts

定制化 plugins

@vitejs/plugin-vue-jsx

提供 Vue 3 JSX & TSX 支持（通过 专用的 Babel 转换插件）。

安装

npm i -D @vitejs/plugin-vue-jsx

配置 vite.config.ts

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({plugins: [vueJsx({// options 参数将传给 @vue/babel-plugin-jsx}),],
})

rollup-plugin-visualizer

可视化并分析构建包，查看哪些模块占用空间大小，以此来优化构建包的大小。这是一个 Rollup 的 plugin，推荐这个也是 vite 的一个特性，vite 默认已经支持大部分的 Rollup 的 plugin，从这点来看，vite 的 plugin 库更加丰富了。

安装

npm i -D rollup-plugin-visualizer

配置 vite.config.ts

import { defineConfig } from 'vite'
import visualizer from 'rollup-plugin-visualizer'export default defineConfig({plugins: [visualizer()],
})

vite-plugin-element-plus

为 ElementPlus 提供按需引入能力。全量导入 ElementPlus 导致构建包的体积过大，按需引入有效的减小包的体积。此包的原理是动态将每个按需引入的组件 css 写入。

安装

npm i -D vite-plugin-element-plus

配置 vite.config.ts

import { defineConfig } from 'vite'
import importElementPlus from 'vite-plugin-element-plus'export default defineConfig({plugins: [// @ts-ignore 此处暂时需要使用 ignore// 原因是包内部的 options 未做非必填兼容// 目前已有人提了 PR，未合并，使用可以观望下importElementPlus(),],
})

基于 husky + lint-staged 项目规范化

  • Husky 支持所有 Git 钩子，当您提交或推送时，您可以使用 husky 来检查您的提交消息、运行测试、检查代码等。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子，比如 pre-commit 钩子就会在你执行 git commit 的触发。那么我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。当然，pre-commit 阶段执行的命令当然要保证其速度不要太慢，每次 commit 都等很久也不是什么好的体验。

  • lint-staged，一个过滤出 Git 代码暂存区文件（被 git add 的文件）的工具。这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了呀，可能导致项目改动很大。所以 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。

Eslint

eslint 用于配置代码风格、质量的校验，prettier用于代码格式的校验，lint-staged 过滤文件。

本项目已经默认安装 eslint、prettier，如果需要单独安装，执行以下命令：

# 安装 eslint
npm i eslint -D
# 利用 eslint 命令行工具生成基本配置
npx eslint --init

生成的 .eslintrc.cjs 文件，如下：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest'}
}

做一下配置补充

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,env: {browser: true,node: true,es6: true},'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest',sourceType: 'module',ecmaFeatures: {jsx: true}},plugins: ['@typescript-eslint'],rules: {}
}

这里为什么生成的配置文件名称是.eslintrc.cjs而不是.eslintrc.js？

因为我们将项目定义为 ESM，eslint --init 会自动识别 type，并生成兼容的配置文件名称，如果我们改回 .js 结尾，再运行 eslint 将会报错。出现这个问题是 eslint 内部使用了 require() 语法读取配置。

同样，这个问题也适用于其他功能的配置，比如后面会讲到的 Prettier、Commitlin t等，配置文件都不能以 xx.js 结尾，而要改为当前库支持的其他配置文件格式，如：.xxrc、.xxrc.json、.xxrc.yml。

Prettier

Prettier 如果需要单独安装，执行以下命令：

# 安装 prettier
npm i prettier -D

.prettierrc.json 默认配置如下（没有这个文件的需要自行创建）

{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "none"
}

  • semi:false 句末是否使用分号（false | true）

  • singleQuote:true 是否使用单引号代替双引号（false | true）

  • trailingComma:'none' 最后一个对象元素是否加逗号, 'none' 为不加

  • tabWidth 设置工具每一个水平缩进的空格数

  • printWidth 换行字符串阈值

  • bracketSpacing:true 对象，数组是否加空格（false | true）

  • jsxBracketSameLine:true jsx > 是否另起一行（false | true）

  • arrowParens :’always‘ (x) => {} 是否要有小括号，值为 ’always‘ 则需要

  • requirePragma:false 是否需要写文件开头的 @prettier （false | true）

  • insertPragma:false 是否需要自动在文件开头插入 @prettier

Prettierrc & ESLint 规则冲突的解决

eslint 用于配置代码风格、质量的校验，prettier用于代码格式的校验，lint-staged 过滤文件。

但两者在使用过程中，会因为规则不同，有出现冲突的可能性，所以需要通过插件加强两者的配合：

  • eslint-plugin-prettier 一个 ESLint 插件， 由 prettier 生态提供，用于关闭可能与 prettier 冲突的规则

  • eslint-config-prettier 使用 prettier 代替 eslint 格式化，防止 Prettier 和 ESLint 的自动格式化冲突

安装

npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier -D

Husky

因为一个项目通常是团队合作，我们不能保证每个人在提交代码之前执行一遍 lint 校验， 所以需要 git hooks 来自动化校验的过程，否则禁止提交。

# 安装 husky
npm i husky -D# 生成 .husky 文件夹（注意：这一步操作之前，一定要执行 git init 初始化当前项目仓库，.husky 文件夹才能创建成功）
npx husky-init install

在 package.json 中添加 'prepare' 指令

"scripts": {// 省略其它指令"prepare": "husky install"
}

.husky/pre-commit 文件修改如下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm run lint

Commitlint

为什么需要 Commitlint，除了在后续生成的 changelog 文件和语义发版中需要提取 commit 中的信息外，也利于其他团队开发者分析你提交的代码，所以我们要约定commit的规范。

安装如下两个插件：

  • @commitlint/cli Commitlint 命令行工具

  • @commitlint/config-conventional 基于 Angular 的约定规范

npm i @commitlint/config-conventional @commitlint/cli -D

最后将 Commitlint 添加到钩子：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

创建 .commitlintrc，并写入配置

{"extends": ["@commitlint/config-conventional"]
}

Angular 规范说明：

  • feat：新功能

  • fix：修补 BUG

  • docs：修改文档，比如 README, CHANGELOG, CONTRIBUTE 等等

  • style：不改变代码逻辑 (仅仅修改了空格、格式缩进、逗号等等)

  • refactor：重构（既不修复错误也不添加功能）

  • perf：优化相关，比如提升性能、体验

  • test：增加测试，包括单元测试、集成测试等

  • build：构建系统或外部依赖项的更改

  • ci：自动化流程配置或脚本修改

  • chore：非 src 和 test 的修改，发布版本等

  • revert：恢复先前的提交

1

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

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

相关文章

【算法】滑动窗口破解长度最小子数组

【算法】滑动窗口破解长度最小子数组

Problem: 209. 长度最小的子数组 文章目录 题意分析算法原理讲解暴力枚举O(N^2)利用单调性，滑动窗口求解 复杂度Code 题意分析 首先来分析一下本题的题目意思 题目中会给到一个数组，我们的目的是找出在这个数组中 长度最小的【连续】子数组，而…
阅读更多...
小游戏-01

小游戏-01

小游戏
阅读更多...
c++加速方法大全

c++加速方法大全

我们平常写代码的时候，经常超时，非常难受，所以，我写了这篇文章，让你的代码提升速度（这些方法作者亲测有效，用了这些方法，足足提升了1秒！虽然最后题目还是没过&#xff09…
阅读更多...
JVM 篇

JVM 篇

目录 一、知识点汇总 二、知识点详解 2.1 JVM 的主要组成部分及其作用 2.2 JVM内存模型 2.3 堆与栈的区别 2.4 JVM 加载 class 文件的原理机制 2.5 类的生命周期 2.6 Java 对象结构 2.7 Java 对象创建过程 2.8 指针碰撞 2.9 空闲列表 2.10 TLABCAS 2.11 说…
阅读更多...
蓝牙电话之HFP—电话音频

蓝牙电话之HFP—电话音频

1 媒体音频： 播放蓝牙音乐的数据，这种音频对质量要求高，数据发送有重传机制，从而以l2cap的数据形式走ACL链路。编码方式有：SBC、AAC、APTX、APTX_HD、LDAC这五种编码方式，最基础的编码方式是SBC&#xff0…
阅读更多...
Mysql 三级等保安全加固

Mysql 三级等保安全加固

安全加固的前提是保障业务稳定运行，而不是为了安全加固而加固！ 1. 新增审计账号并赋予相关权限 进入数据库操作后台： mysql -h 192.168.101.17-u root -p查看数据库用户和口令信息： select host,user,plugin,authentication_string from mysql.user;查看用户权限： show …
阅读更多...
什么是多态，instanceof，类型转换

什么是多态，instanceof，类型转换

多态 即同一个方法可以根据发送对象的不同而采用多种不同的行为方式一个对象的实际类型是确定的，按可以指向对象的引用类型有很多多态存在的条件： 有继承关系子类重写父类的方法父类引用指向子类对象 注意：多态是方法的多态，属性…
阅读更多...
【Vue入门】语法 —— 事件处理器、自定义组件、组件通信

【Vue入门】语法 —— 事件处理器、自定义组件、组件通信

目录 一、事件处理器 1.1 样式绑定 1.2 事件修饰符 1.3 按键修饰符 1.4 常用控制符 1.4.1 常用字符综合案例 1.4.2 修饰符 二、自定义组件 2.1 组件介绍及定义 2.2 组件通信 2.2.1 组件传参（父 -> 子） 2.2.1 组件传参（子 ->…
阅读更多...
Goland设置头注释

Goland设置头注释

package ${GO_PACKAGE_NAME} * Author: 坐公交也用券 * HomePage: https://liumou.site * File: ${NAME}.go * Date: ${DATE} ${TIME} * Des: 文件作用
阅读更多...
什么是AES加密？详解AES加密算法原理流程

什么是AES加密？详解AES加密算法原理流程

在密码学中，加密算法分为双向加密和单向加密。单向加密包括MD5、SHA等摘要算法，它们是不可逆的。双向加密包括对称加密和非对称加密，对称加密包括AES加密、DES加密等。双向加密是可逆的，存在密文的密钥。AES算法是DES算法的替代者…
阅读更多...
Linux 操作技巧

Linux 操作技巧

目录 一、shell-命令解释器 二、Linux中的特殊符号 三、命令历史--history 一、shell-命令解释器 shell——壳，命令解释器，负责解析用户输入的命令 ——内置命令（shell内置） ——外置命令，在文件系统的某个目录下&…
阅读更多...
数据库中的DDL与DML

数据库中的DDL与DML

标签：数据库 记录下DDL和DML的相关概念。 数据定义语言 定义数据库模式 数据定义语言DDL(Data-Definition Language)可定义数据库模式。数据库模式在之前的文章中已经提到过了。简单来说，建表用的SQL语句就是DDL。如下代码 CREATE TABLE department(de…
阅读更多...
3、靶场——Pinkys-Place v3（3）

3、靶场——Pinkys-Place v3（3）

文章目录 一、获取flag41.1 关于SUID提权1.2 通过端口转发获取setuid文件1.3 运行pinksecd文件1.4 利用nm对文件进行分析1.5 构建payload1.6 Fire 二、获取flag52.1 生成ssh公钥2.2 免密登录ssh2.3 以pinksecmanagement的身份进行信息收集2.4 测试程序/usr/local/bin/PSMCCLI2.…
阅读更多...
安装MySQL

安装MySQL

要安装MySQL，您可以按照以下步骤进行操作。这里将介绍如何在Linux上安装MySQL。请注意，这只是一个基本的示例，具体步骤可能会因您的操作系统和版本而有所不同。 在Ubuntu上安装MySQL: 打开终端。 更新包列表以确保获取最新的软件包信息&…
阅读更多...
CoreData 在新建或更新托管对象中途发生错误时如何恢复如初？

CoreData 在新建或更新托管对象中途发生错误时如何恢复如初？

问题现象 在 CoreData 支持的 App 中，当我们新建或更新托管对象到一半突然出现错误时，应该禁止任何已发生的改变被写入内存或数据库中。不过，有时仍会出现始料未及的“意外”： 从上面的演示可以看到：即使在 Item 对象新建和更新途中出现错误后不执行后续的保存操作，但界…
阅读更多...
Windows安装Mysql--免安装版

Windows安装Mysql--免安装版

在Windows系统上安装免安装版MySql的步骤 官方下载地址：https://dev.mysql.com/downloads/mysql/ 将下载好的文件“mysql-5.7.18-winx64”解压缩到C盘的 目录下： 配置环境变量： （略） 正式安装，添加my.i…
阅读更多...
基于Spring Boot的网上租贸系统

基于Spring Boot的网上租贸系统

目录 前言 一、技术栈 二、系统功能介绍 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 本课题是根据用户的需要以及网络的优势建立的一个基于Spring Boot的网上租贸系统，来满足用户网络商品租赁的需求。 本网上租贸系统应用Java技术&#xff0…
阅读更多...
java基础3

java基础3

输入一个班学生的成绩，先显示所有及格的成绩，再显示所有不及格的成绩，最后显示及格人数和不及格人数 import java.util.Scanner; public class Hello{public static void main(String [] args) {int SIZE5;double grade[] new double[SIZE]…
阅读更多...
Linux-VI和VIM

Linux-VI和VIM

目录 VI的使用 VI的三种模式 进入VI 切换至插入模式（Insert mode）编辑文件 Insert 的切换 退出VI及保存文件 搜索 快捷删除 光标定位到最后一行 VIM查找字符串 全匹配 模糊匹配（正则表达式） 快速查找​​​​​​…
阅读更多...
spark 算子考点

spark 算子考点

阅读更多...
最新文章

Copyright @ 2022~2023