vite+vue3+ts项目基础配置

学习视频：https://www.bilibili.com/video/BV1Xh411V7b5/?spm_id_from=333.999.0.0&vd_source=5c584bd3b474d579d0bbbffdf0437c70

1.配置项目启动自动打开浏览器

在package.json文件中：

"scripts": {"dev": "vite", // 项目初始化之后默认是这样的-->"dev": "vite --open", // 改成这样，加上--open,这样是默认打开浏览器页面},

2. 项目中eslint校验工具的配置

• 首先安装eslint

pnpm i eslint -D

• 生成配置文件: eslint.cjs

npx eslint --init

3.安装vue3环境代码校验插件并配置eslint规则

• 安装vue3环境代码校验插件

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

• 配置eslint规则:安装完后需要更改eslint.cjs文件

module.exports= {env: { // 安装环境browser: true, // 浏览器端es2021: true,node: true,jest: true,},/* 指定如何解析语法 */parser: 'vue-eslint-parser',/* 优先级低于 parse 的语法解析配置 */parserOptions: {ecmaVersion: 'latest',sourceType: 'module',parser: '@typescript-eslint/parser',jsxPragma: 'React',ecmaFeatures: {jsx: true,}},/* 继承已有的规则 */extends: ['eslint:recommended','plugin:vue/vue3-essential','plugin:@typescript-eslint/recommended','plugin:prettier/recommended',],plugins: ['vue', '@typescript-eslint'],/***"off"或0  ==》 关闭规则*"warn"或1 ==》 打开的规则作为警告（不影响代码执行）*"error"或2 ==》 规则作为一个错误（代码不能执行，界面报错）*/rules: {// eslint (https://eslint.bootcss.com/docs/rules/)'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', // 防止