使用vite创建vue3项目及项目的配置
1.环境准备
使用vite搭建项目,vite需要nodejs版本14.18+、16+
- node v18.16.1
- pnpm 8.7.4
pnpm:performant npm(高性能的npm)由npm/yarn衍生而来,解决了npm/yarn内部潜在的bug,极大的优化了性能,扩展了使用场景。
pnpm安装指令
npm i -g pnpm
创建项目
pnpm create vite
cd # 进入项目
pnpm install # 安装依赖 + @vitejs/plugin-vue 4.3.4 + typescript 5.2.2 + vite 4.4.9 + vue-tsc 1.8.10
pnpm run dev # 运行项目
打开项目,需要手动在浏览器输入地址。
修改package.json
文件的字段 "dev": "vite --open"
,这样使用pnpm run dev
命令会自动打开浏览器。
项目配置
VSCode 有对应插件Prettier - Code formatter
、ESlint
、Stylelint
可以实现相同的功能
以下配置适用于协同开发的大项目配置。
ESLint校验代码工具配置 - js代码检测工具
eslint:提供一个插件化的javaScript代码检测工具
1.安装ESLint到开发环境 devDependencies
//完整写法
pnpm install --save-dev eslint
//简写
pnpm i eslint -D
2.生成配置文件:.eslint.cjs
**
npx eslint --init
.eslint.cjs
文件
// 对外暴露的配置对象
module.exports = {"env": { // eslint的工作环境"browser": true,"es2021": true // 校验js语法},"extends": [ //规则的继承//全部规则默认是关闭的,这个配置项会开启推荐规则(推荐需要遵守的规则)"eslint:recommended",//vue3语法规则"plugin:@typescript-eslint/recommended",//ts语法规则"plugin:vue/vue3-essential"],"overrides": [ //为特定类型的文件指定处理器{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],//指定解析器选项"parserOptions": {"ecmaVersion": "latest", //校验ECMA最新版本"parser": "@typescript-eslint/parser",//指定解析器,当前表示ts解析器,还可以选择Babel=ESLint babel解析器、默认Esprima解析器"sourceType": "module"// 设置为},// ESLint支持使用第三方插件,在使用插件之前,必须使用npm安装"plugins": ["@typescript-eslint","vue"],//ESLint校验规则"rules": {}
}
3.安装vue3环境代码校验插件**
# 让所有与prettier规则存在冲突的Eslint rules失效,并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint,使prettier规则优先级更高,Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件(查找vue语法错误,发现错误指令,查找违规风格指南)
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",# 指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
4. 修改.eslintrc.cjs配置文件
module.exports = {//..../* 规则的状态* "off" 或 0 ==> 关闭规则* "warn" 或 1 ==> 打开的规则作为警告(不影响代码执行)* "error" 或 2 ==> 规则作为一个错误(代码不能执行,界面报错)*/"rules": {// eslint(https://eslint.bootcss.com/docs/rules/)// key为规则,右侧为规则的状态'no-var': 'error', // 要求使用 let 或 const 而不是 var'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-unexpected-multiline': 'error', // 禁止空余的多行'no-useless-escape': 'off', // 禁止不必要的转义字符// typeScript (https://typescript-eslint.io/rules)'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型'@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。'@typescript-eslint/semi': 'off',// eslint-plugin-vue (https://eslint.vuejs.org/rules/)'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用'vue/no-mutating-props': 'off', // 不允许组件 prop的改变'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式},
}
5.生成ESLint忽略文件
文件名:.eslintignore
作用:设置不需要进行校验的文件夹
dist // 打包文件
node_modules // 依赖文件
6.在package.json新增运行脚本
// 新增运行脚本
"scripts": {// ...."lint": "eslint src", // 运行lint指令时,eslint校验src文件夹里面的文件"fix": "eslint src --fix", // 对于不符合规则的语法进行纠正
}
prettier配置 - 格式化检测工具
1.安装prettier依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
2.prettierrc.json添加规则
创建prettierrc.json
配置文件
{"singleQuote": true, // 使用单引号"semi": true, //语句最后方的分号"bracketSpacing": true,"htmlWhitespaceSensitivity": "ignore","endOfLine": "auto","trailingComma": "all","tabWidth": 2 //缩进占2个位置
}
3. 新建.prettierignore忽略文件
设置不需要格式化的文件夹
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
4. 在package.json新增运行脚本
"scripts": {// ...."lint": "eslint src", // 运行lint指令时,eslint校验src文件夹里面的文件"fix": "eslint src --fix", // 对于不符合规则的语法进行纠正"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
}
husky配置 提交代码前进行的操作
利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format
来自动的格式化我们的代码。
安装husky
pnpm install -D husky
执行npx husky-init
会在根目录下生成个一个.husky
目录,在这个目录下面会有一个pre-commit
文件,这个文件里面的命令在我们执行commit时执行。
前提是文件夹先git init 创建git追踪
在.husky/pre-commit
文件添加如下命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format
配置commitlint 统一提交规范
利用commitlint
统一commit信息的规范
pnpm add @commitlint/config-conventional @commitlint/cli -D
添加配置文件,新建commitlint.config.cjs
(注意是cjs),然后添加下面的代码:
module.exports = {extends: ['@commitlint/config-conventional'],// 校验规则rules: {'type-enum': [2,'always',['feat',//新特性、新功能'fix',//修改bug'docs',//文档修改'style',//代码格式修改, 注意不是 css 修改'refactor',//代码重构'perf',//优化相关,比如提升性能、体验'test',//测试用例修改'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等'revert',//回滚到上一个版本'build',//编译相关的修改,例如发布版本、对项目构建或者依赖的改动],],'type-case': [0],'type-empty': [0],'scope-empty': [0],'scope-case': [0],'subject-full-stop': [0, 'never'],'subject-case': [0, 'never'],'header-max-length': [0, 'always', 72],},
}
在package.json
中配置scripts命令
# 在scrips中添加下面的代码
{
"scripts": {"commitlint": "commitlint --config commitlint.config.cjs -e -V"},
}
配置husky
npx husky add .husky/commit-msg
在生成的commit-msg
文件中添加下面的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
当 commit 提交信息时,必须是git commit -m 'type: xxx'
符合类型的才可以,需要注意的是类型的后面需要用英文的 :,并且冒号后面是需要空一格的,这个是不能省略的