Vue进阶之Vue项目实战(一)

Vue项目实战

  • 项目搭建
    • 初始化
    • eslint+版本约束
      • 版本约束
      • eslint配置
    • stylelint
    • cspell
    • cz-git
    • husky
      • 给拦截举个例子
    • zx

项目搭建

node版本:20.11.1
pnpm版本:9.0.4

初始化

vue3最新的脚手架

pnpm create vite byelide-demo --template vue-ts

请添加图片描述

pnpm i

请添加图片描述

pnpm dev

请添加图片描述
改端口号:
vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{port: 8888}
})

eslint+版本约束

版本约束

package.json

{"name": "byelide-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","lint":"eslint --fix .","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"vue": "3.4.26"},"devDependencies": {"@vitejs/plugin-vue": "5.0.4","typescript": "5.4.5","vite": "5.2.10","vue-tsc": "2.0.15","eslint": "9.1.1"}
}

pnpm lint

eslint配置

package.json加:

 "eslint-plugin-vue":"9.25.0","vue-eslint-parser":"9.4.2"

请添加图片描述
eslint.config.js:

import pluginVue from 'eslint-plugin-vue';
import vueEslintParser from 'vue-eslint-parser'export default [{files:["**/*,.{ts,tsx,vue}"],rules: {semi: "error","prefer-const": "error","no-console":'error'}}
];

再执行:

pnpm i

最终版本:
eslint.config.js:

import js from "@eslint/js";
import pluginVue from 'eslint-plugin-vue';
// importSort插件功能是:项目中引入插件的顺序必须先是官方,后是自己的插件
import importSort from 'eslint-plugin-simple-import-sort';
import vueEslintParser from 'vue-eslint-parser'
import globals from 'globals';export default [{languageOptions:{globals:{...globals.browser,computed:"readonly",defineEmits:"readonly",defineExpose:"readonly",defineProps:"readonly",onMounted:"readonly",onUnmounted:"readonly",reactive:"readonly",ref:"readonly",shallowReactive:"readonly",shallowRef:"readonly",toRef:"readonly",toRefs:"readonly",watch:"readonly",watchEffect:"readonly"}}},{files:["**/*,.{ts,tsx,vue}"],ignores:[],rules: {...js.configs.recommended.rules,...pluginVue.configs['flat/recommended'].rules,"no-console":'error','no-debugger':"error","vue/valid-define-emits":"error","simple-import-sort/imports":"error","simple-import-sort/exports":"error"},languageOptions:{parser: vueEslintParser,parserOptions: {ecmaFeatures:{jsx:true},extraFileExtensions:[".vue"]}},// eslint 9.x 版本的插件注册方式plugins:{vue:pluginVue,"simple-import-sort":importSort}}
];

package.json

{"name": "byelide-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","lint":"eslint --fix .","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"vue": "3.4.26"},"devDependencies": {"@vitejs/plugin-vue": "5.0.4","typescript": "5.4.5","vite": "5.2.10","vue-tsc": "2.0.16","eslint": "9.1.1","@eslint/js":"9.1.1","eslint-plugin-vue":"9.25.0","vue-eslint-parser":"9.4.2","globals":"15.1.0","eslint-plugin-simple-import-sort": "12.1.0"}
}

安装插件

pnpm i

校验正确:

pnpm lint

stylelint

package.json:
scripts加入:

"lint:style":"stylelint **/*.vue",

加依赖,devDependencies加

"stylelint": "16.4.0",
"stylelint-config-recommended-vue":"1.5.0"

package.json:

{"name": "byelide-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","lint":"eslint --fix .","lint:style":"stylelint **/*.vue","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"vue": "3.4.26"},"devDependencies": {"@vitejs/plugin-vue": "5.0.4","typescript": "5.4.5","vite": "5.2.10","vue-tsc": "2.0.16","eslint": "9.1.1","@eslint/js":"9.1.1","eslint-plugin-vue":"9.25.0","vue-eslint-parser":"9.4.2","globals":"15.1.0","eslint-plugin-simple-import-sort": "12.1.0","stylelint": "16.4.0","stylelint-config-recommended-vue":"1.5.0"}
}

插件化机制
就是这里用的plugin的思路 本来eslint只是基础的架子,但是能实现那么强的校验的规则和逻辑,就是因为它能够支持你通过插件注册的形式把你外部的和把所有权交给开发者,让开发者编写对应的规则来增强功能,这就是插件化(微内核)的思路

stylelint.config.js:

/** @type {import('stylelint').Config} */
export default {extends:['stylelint-config-recommended-vue'],rules: {"declaration-property-unit-allowed-list":{"font-size":["px"] //font-size只能用px单位 },"selector-disallowed-list":["/\\data-.+]/"]  //不能使用data-xx形式}
};

pnpm i

pnpm lint:style

cspell

package.json的scripts:

"spellcheck":"cspell lint --dot --gitignore --color --cache --show-suggestions \"src/**/*.@(html|js|cjs|mjs|ts|tsx|css|scss|md|vue)\"",

devDependencies加入:

"cspell":"8.7.0"

package.json:

{"name": "byelide-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","lint":"eslint --fix .","lint:style":"stylelint **/*.vue","spellcheck":"cspell lint --dot --gitignore --color --cache --show-suggestions \"src/**/*.@(html|js|cjs|mjs|ts|tsx|css|scss|md|vue)\"","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"vue": "3.4.26"},"devDependencies": {"@vitejs/plugin-vue": "5.0.4","typescript": "5.4.5","vite": "5.2.10","vue-tsc": "2.0.16","eslint": "9.1.1","@eslint/js":"9.1.1","eslint-plugin-vue":"9.25.0","vue-eslint-parser":"9.4.2","globals":"15.1.0","eslint-plugin-simple-import-sort": "12.1.0","stylelint": "16.4.0","stylelint-config-recommended-vue":"1.5.0","cspell":"8.7.0"}
}

cspell.json:

{"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json","version": "0.2","dictionaryDefinitions": [{"name": "customs-words","path": ".cspell/project-words.txt","addWords": true}],"dictionaries": ["project-words"],"ignorePaths": ["node_modules", "/project-words.txt"]
}

创建文件:
在这里插入图片描述
安装:

pnpm i

测试:

pnpm spellcheck

cz-git

package.json:
devDependencies中加:

"cz-git":"1.9.1",
"commitizen":"4.3.0"

package.json中加:

"config": {"commitizen": {"path": "node_modules/cz-git"}},

scripts中加:

"commit":"git-cz"

package.json:

{"name": "byelide-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","lint":"eslint --fix .","lint:style":"stylelint **/*.vue","spellcheck":"cspell lint --dot --gitignore --color --cache --show-suggestions \"src/**/*.@(html|js|cjs|mjs|ts|tsx|css|scss|md|vue)\"","build": "vue-tsc && vite build","preview": "vite preview","commit":"git-cz"},"config": {"commitizen": {"path": "node_modules/cz-git"}},"dependencies": {"vue": "3.4.26"},"devDependencies": {"@vitejs/plugin-vue": "5.0.4","typescript": "5.4.5","vite": "5.2.10","vue-tsc": "2.0.16","eslint": "9.1.1","@eslint/js":"9.1.1","eslint-plugin-vue":"9.25.0","vue-eslint-parser":"9.4.2","globals":"15.1.0","eslint-plugin-simple-import-sort": "12.1.0","stylelint": "16.4.0","stylelint-config-recommended-vue":"1.5.0","cspell":"8.7.0","cz-git":"1.9.1","commitizen":"4.3.0"}
}

pnpm i
git init
git add .
pnpm commit

请添加图片描述

创建commitlint.config.cjs文件:
中英对照配置

// .commitlintrc.js
/** @type {import('cz-git').UserConfig} */
module.exports = {rules: {// @see: https://commitlint.js.org/#/reference-rules},prompt: {alias: { fd: 'docs: fix typos' },messages: {type: '选择你要提交的类型 :',scope: '选择一个提交范围(可选):',customScope: '请输入自定义的提交范围 :',subject: '填写简短精炼的变更描述 :\n',body: '填写更加详细的变更描述(可选)。使用 "|" 换行 :\n',breaking: '列举非兼容性重大的变更(可选)。使用 "|" 换行 :\n',footerPrefixesSelect: '选择关联issue前缀(可选):',customFooterPrefix: '输入自定义issue前缀 :',footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',confirmCommit: '是否提交或修改commit ?'},types: [{ value: 'feat', name: 'feat:     新增功能 | A new feature' },{ value: 'fix', name: 'fix:      修复缺陷 | A bug fix' },{ value: 'docs', name: 'docs:     文档更新 | Documentation only changes' },{ value: 'style', name: 'style:    代码格式 | Changes that do not affect the meaning of the code' },{ value: 'refactor', name: 'refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature' },{ value: 'perf', name: 'perf:     性能提升 | A code change that improves performance' },{ value: 'test', name: 'test:     测试相关 | Adding missing tests or correcting existing tests' },{ value: 'build', name: 'build:    构建相关 | Changes that affect the build system or external dependencies' },{ value: 'ci', name: 'ci:       持续集成 | Changes to our CI configuration files and scripts' },{ value: 'revert', name: 'revert:   回退代码 | Revert to a commit' },{ value: 'chore', name: 'chore:    其他修改 | Other changes that do not modify src or test files' },],useEmoji: false,emojiAlign: 'center',useAI: false,aiNumber: 1,themeColorCode: '',scopes: [],allowCustomScopes: true,allowEmptyScopes: true,customScopesAlign: 'bottom',customScopesAlias: 'custom',emptyScopesAlias: 'empty',upperCaseSubject: false,markBreakingChangeMode: false,allowBreakingChanges: ['feat', 'fix'],breaklineNumber: 100,breaklineChar: '|',skipQuestions: [],issuePrefixes: [// 如果使用 gitee 作为开发管理{ value: 'link', name: 'link:     链接 ISSUES 进行中' },{ value: 'closed', name: 'closed:   标记 ISSUES 已完成' }],customIssuePrefixAlign: 'top',emptyIssuePrefixAlias: 'skip',customIssuePrefixAlias: 'custom',allowCustomIssuePrefix: true,allowEmptyIssuePrefix: true,confirmColorize: true,scopeOverrides: undefined,defaultBody: '',defaultIssues: '',defaultScope: '',defaultSubject: ''}
}

pnpm commit

请添加图片描述

husky

husky是一个钩子工具,但是钩子本身不是husky的,钩子是属于git的
帮助轻松拦截hooks
git hooks提供的pre-commit等,可以在开发的时候,在提交对应的时机,发生一些作用。

package.json:
1.devDependencies:

"husky":"9.0.11"

2.scripts:

"prepare": "husky||true"

package.json:

{"name": "byelide-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","lint": "eslint --fix .","lint:style": "stylelint **/*.vue","spellcheck": "cspell lint --dot --gitignore --color --cache --show-suggestions \"src/**/*.@(html|js|cjs|mjs|ts|tsx|css|scss|md|vue)\"","build": "vue-tsc && vite build","preview": "vite preview","commit": "git-cz","prepare": "husky"},"config": {"commitizen": {"path": "node_modules/cz-git"}},"dependencies": {"vue": "3.4.26"},"devDependencies": {"@vitejs/plugin-vue": "5.0.4","typescript": "5.4.5","vite": "5.2.10","vue-tsc": "2.0.16","eslint": "9.1.1","@eslint/js": "9.1.1","eslint-plugin-vue": "9.25.0","vue-eslint-parser": "9.4.2","globals": "15.1.0","eslint-plugin-simple-import-sort": "12.1.0","stylelint": "16.4.0","stylelint-config-recommended-vue": "1.5.0","cspell": "8.7.0","cz-git": "1.9.1","commitizen": "4.3.0","husky": "9.0.11"}
}

pnpm i
npx husky init

请添加图片描述
pre-commit:预提交 执行提交后会先预提交一下,失败的话全部打回,不会提交
pre-commit:


pnpm lint && pnpm lint:style && pnpm spellcheck &&
npm test

给拦截举个例子

package.json:
scripts:

"commitlint":"commitlint --edit $1"

devDependencies:

"commitlint":"19.3.0"

在.husky/_/commit-msg文件写入:

pnpm commitlint ${1}

pnpm i
git add .
git commit -m “xxxx”

xxxx不允许通过
请添加图片描述

zx

用JavaScript方式写脚本
以后写脚本的时候可以尝试用zx写
package.json:
1.devDependencies:

"zx":"8.0.2"

2.创建文件pre-commit.mjs 在husky/pre-commit.mjs
里面写zx的配置。可以参考zx官网

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

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

相关文章

MIPS32 指令架构

指令格式 R 类型 说明: 用于寄存器和寄存器操作 参数说明: Op: 指令操作码Rs: 第一个源操作数寄存器号,参与运算使用Rd: 目的操作数寄存器号,保存结果使用Shamt: 位偏移量,仅在位移指令使用,在此直接置0Func: 指令函…

区块链 | IPFS:IPNS(入门版)

🦊原文:IPFS 与 IPNS 啥关系? 🦊写在前面:本文属于搬运博客,自己留存学习。这篇文章讲得太入门了,不涉及任何底层原理。 正文 随着 2019 年 12 月 12 日 Filecoin 测试网的上线,IPF…

深入 Django 模型层:数据库设计与 ORM 实践指南

title: 深入 Django 模型层:数据库设计与 ORM 实践指南 date: 2024/5/3 18:25:33 updated: 2024/5/3 18:25:33 categories: 后端开发 tags: Django ORM模型设计数据库关系性能优化数据安全查询操作模型继承 第一章:引言 Django是一个基于Python的开源…

安卓手机APP开发__媒体开发部分__分享声音的输入

安卓手机APP开发__媒体开发部分__分享声音的输入 目录 概述 安卓10之前的版本的行为 安卓10的行为 共享场景 小助手普通的APP 有可读取权的服务 普通的APP 两个普通的APP 语音电话 普通的APP 概述 声音的输入通常来自于内嵌的麦克风,还有外置的麦克网,或者是一个…

【C++】深入剖析C++11中右值引用和左值引用

目录 一、左值引用 && 右值引用 二、左值引用于右值引用的比较 三、 右值引用使用场景和意义 1、函数返回值 ①移动赋值 ②移动构造 2、STL容器插入接口 ​3、完美转发 一、左值引用 && 右值引用 传统的C语法中就有引用的语法,而C11中新增了…

【简单介绍下Lisp的学习历程】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

计算机网络 3.1网络的拓扑结构

第三章 网络技术基础 第一节 网络的拓扑结构 一、认识拓扑结构 1.定义: ①网络节点和链路的几何图形; ②网络中网络单元的地理分布和互联关系的几何构型; ③通信子网的拓扑结构。 2.三要素:可靠性、扩充性、费用高低。 3.影…

react 子组件调用父组件方法,获取的数据不是最新值

目录 原因解决方法方法一、去掉 useCallback, 这样每次父组件触发刷新,就会刷新子组件方法二、或者通过监听 val,val 值改变来刷新函数方法三、在父组件中,把 val 作为 key 值,每次 val 变化强制触发更新 出现问题的代…

Mybatis之Sqlsession、Connection和Transaction三者间的关系

前言 最近在看Mybatis的源码,搜到这篇文章Sqlsession、Connection和Transaction原理与三者间的关系,debug之后发现有不少疑惑,于是按照原文整理了一下,记录下debug中的一些困惑点。 对于我们开发来讲,不管跟任何关系…

django搭建一个AI博客进行YouTube视频自动生成文字博客

文章目录 一、生成Django框架二、项目代码(前端)1、编写前端代码(正文界面)1.1、生产html框架1.2、添加live preview扩展1.3、更改title元素中文本1.4、添加CDN(CSS)样式链接1.5、nav标签1.6、在body标签中…

Python | Leetcode Python题解之第66题加一

题目: 题解: class Solution:def plusOne(self, digits: List[int]) -> List[int]:n len(digits)for i in range(n - 1, -1, -1):if digits[i] ! 9:digits[i] 1for j in range(i 1, n):digits[j] 0return digits# digits 中所有的元素均为 9retu…

手撸Mybatis(三)——收敛SQL操作到SqlSession

本专栏的源码:https://gitee.com/dhi-chen-xiaoyang/yang-mybatis。 引言 在上一章中,我们实现了读取mapper配置并构造相关的mapper代理对象,读取mapper.xml文件中的sql信息等操作,现在,在上一章的基础上&#xff0c…

深度学习:基于TensorFlow、Keras,使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析

前言 系列专栏:机器学习:高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目,每个项目都处理一组不同的问题,包括监督和无监督学习、分类、回归和聚类,而且涉及创建深度学…

等保测评考试培训题

等保2.0培训考试题目 一、网络安全法第几条,规定国家实行网络安全等级保护制度。 A、第五条 B、第十条 C、第十三条 D、第二十一条 二、等级保护有几个安全保护级别? A、3个 B、4个 C、5个 D、6个 三、什么样的系统可以作为定级对象&#…

UNIAPP小程序从入门到精通

第一章> 1、如何创建项目 2、项目的基本结构 3、页面组成(wxss可以不用) 4、组件的使用 5、协同开发与发布 第二章> 6、WXML页面结构渲染 7、style样式美化 8、a…

分享我的github仓库

这是一个由现代C编写的小型、学习性质的服务器框架,包含压缩,序列化,IO调度,Socket封装,文件配置,日志库等多个完整自研模块,欢迎到我的仓库阅读代码和安装体验,期待任何的建议和反馈…

Docker 加持的安卓手机:随身携带的知识库(一)

这篇文章聊聊,如何借助 Docker ,尝试将一台五年前的手机,构建成一个随身携带的、本地化的知识库。 写在前面 本篇文章,我使用了一台去年从二手平台购入的五年前的手机,K20 Pro。 为了让它能够稳定持续的运行&#xf…

C++, 简单 http 下的 POST 和 Get

#pragma once #include <Windows.h> #include <winsock.h> #include <sstream> #include <iostream> #pragma comment(lib,"ws2_32.lib")class WinHttp { public:WinHttp(){//此处一定要初始化一下&#xff0c;否则gethostbyname返回一直为空…

如何从Mac电脑恢复任何删除的视频

Microsoft Office是包括Mac用户在内的人们在世界各地创建文档时使用的最佳软件之一。该软件允许您创建任何类型的文件&#xff0c;如演示文稿、帐户文件和书面文件。您可以使用 MS Office 来完成。所有Microsoft文档都可以在Mac上使用。大多数情况下&#xff0c;您处理文档&…

手搓堆(C语言)

Heap.h #pragma once#include <stdio.h> #include <stdlib.h> #include <assert.h> #include <stdbool.h> #include <string.h> typedef int HPDataType; typedef struct Heap {HPDataType* a;int size;int capacity; }Heap;//初始化 void Heap…