0.提前准备好环境Windows10vscodeNode.js:v18.0.0注意！本文使用Vitev3.0搭建、安装、安装Node.js（必须）安装yarn（非必须，可以使用npm或pnpm，本文使用yarn作为包管理）安装Git（非必须）1.初始化Vue.js这一步没什么好说的，直接参考官网在你要新建项目的文件夹下输入如下命令yarncreatevite输入项目名，这里叫vite，也是最主要的这次目录选择框架，这里选择vue选择js或者ts，这里选择ts创建完成后，进入vite文件，安装cdviteyarn启动项目。yarndev启动后，启动成功如图2所示，添加git（非必须）初始化gitgitinit并新建一个.gitignore，根据你的喜好设置git忽略文件内容node_modules.DS_Storedist*。本地*.code-workspace.vscode3。添加editorconfig（非必需）新建一个.editorconfig，设置编辑器和ide规范内容。如果根据自己的喜好或者团队规范使用vscode，建议配合插件使用root=true[*.{js,ts,json}]indent_size=2charset=utf-8indent_style=spacetrim_trailing_whitespace=trueinsert_final_newline=真4。在package.json文件中更改端口（非必填）//修改前"dev":"vite",//修改后填写自己喜欢的端口。"dev":"vite--port8000",5.添加ESLint在vite目录下输入如下命令安装核心依赖eslint，配合vue插件，配合ts插件使用vscode的话，pac中推荐使用yarnadd-Deslinteslint-plugin-vue@vue/eslint-config-typescript@typescript-eslint/eslint-plugin@typescript-eslint/parserkage.json文件，添加lint脚本，可以不加"lint"根据自己喜好："eslint--fixsrc/*.{ts,vue}&&eslint--fixsrc/**/*.{ts,vue}"在vite目录下，添加.eslintrc.cjs文件，根据个人喜好编写规则，es2021:true,node:true,},extends:["plugin:vue/vue3-recommended","eslint:recommended","@vue/typescript/recommended",],parserOptions:{ecmaVersion:12,},plugins:["vue","@typescript-eslint"],rules:{//你的美丽规则},};6.添加更漂亮。如果在vite目录下输入以下命令使用vscode，建议配合插件使用yarnadd-Dprettier@vue/eslint-config-prettier在vite目录下，添加.prettierrc.cjs文件,并根据您的个人喜好编写规则。如果你使用node18和vite3，那么.eslintrc最好是一个cjs文件，而不是jsmodule.exports={semi:false,singleQuote:true,tabWidth:2,useTabs:false,printWidth:120,proseWrap:'preserve',trailingComma:'all',//yourprettyrules}7.设置vscode打开首选项，这里直接编辑setting.json，在save中添加//保存时自动整形"editor.formatOnSave":true,//Prettier适用于哪些文件"[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},8.验证Prettier是否清理了App.vue中的初始代码,并且故意写个难看的div
