vue3的基础安装工具

# Vue3-event-admin
### pnpm 包管理器- 创建项目
- 些优势：比同类工具快2倍左右、节省磁盘空间…. https:l/ www.pnpm.cnl
安装方式：npm install -g pnpm
创建项目：pnpm create vue
多一句没有，少一句不行，田西后叶问
好公西字用的技术！
npm install -g pnpm
创建项目：pnpm create vue
ppm install
npm
npm install
npm install axios
pm install axios -D
npm uninstall axios
npm run dev
yarn
yarn
yarn add axios
yarn add axios -D
yarn remove axios
yarn dev
pnpm
pnpm install
pnpm add axios
pnpm add axios -D
pnpm remove axios
pnpm dev

### eslint配合prettier完成代码风格配置
ESLint 配置代码风格
环境同步：
1. 安装了插件 ESlint，开启保存自动修复
2.禁用了插件 Prettier，井关闭保存自动格式化
ESlint 插件十 vscode配置 实现自动格式化修复
"editor.codeActionsOnsave": {
"source. fixAll": true
I,
"editor.formatOnSave": false,
配置.eslintre.cjs
1. prettier 风格配置 https://prettier.io
1. 单引号
2.不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制 (win mac不一致）
2. vue组件名称多单词组成（忽略index.vue）
3. props解构（关闭）
rules: {
// prettier专注于代码的美观度 (格式化工具)
// 前置：
// 1. 禁用格式化插件 prettier format on save 关闭
// 2. 安装Eslint插件, 并配置保存时自动修复
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
}
],
// ESLint关注于规范, 如果不符合规范，报错
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验 (props解构丢失响应式)
// 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
'no-undef': 'error'
}

### 基于husky的代码检查工作流
1、在电脑中 安装git
1.初始化git仓库 执行 git init
2.初始化husky工具配置，执行pnpm dlx husky-init && pnpm install 即可
https://typicode.gitub.io/husky/
3.修改.husky/pre-commit文件

/2.配置vscode里面有git bash 输入 首先在顶部搜索框内输入：shell.windows
在设置中
"terminal.integrated.profiles.windows": {
"JavaScript Debug Terminal": null,
"Windows PowerShell": null,
"PowerShell": null,
"Command Prompt": null,

"git": {
"path":"D:\\360Downloads\\Software\\Git\\usr\\bin\\bash.exe",
},
"bash": {
"path": "D:\\360Downloads\\Software\\Git\\usr\\bin\\bash.exe",
},

},
github
github 192121Ywn
在vscode中切换gitbash
1.输入git init （创建新仓库）
Initialized empty Git repository in D:/360Downloads/web/vue3Code/Vue3-event-admin/.git/

2.pnpm dlx husky-init && pnpm install

Admin@HP MINGW64 /d/360Downloads/web/vue3Code/Vue3-event-admin (master)
$ git config --global user.name "travel_na"

Admin@HP MINGW64 /d/360Downloads/web/vue3Code/Vue3-event-admin (master)
$ git config --global user.email "2716981734@qq.com"

如果出错 就会报错
git add.
git commit -m""xxx"

问题：pnpm lint 是全量检查，耗时问题，历史问题

暂存区eslint校验
在git bash 中
1.安装 lint-staged 包pnpm i lint-staged -D

2. package.json配置lint-staged 命令
"scripts": {

"dev": "vite",
"build": "run-p type-check build-only"
"preview": "vite preview --port 4173",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit",
"lint": "eslint .--ext .vue,.js,.jsx,.
"prepare": "husky install",
"lint-staged": "lint-staged" ----第二处
},

"lint-staged":{ -----第一处
"*.{js,ts,vue}":[
"eslint --fix"
]
}

 

 

3..husky/pre-commit文件修改
第三处： husky中的pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint-staged -----第三处

只修改当前一处，不修改历史遗留错误问题
### vue3大事件项目-调整目录