一、vue3项目的准备工作

1、安装nvm命令，管理npm版本

在使用前，需安装nvm命令

以后安装不需要指定安装nodejs，通过nvm安装想要的版本，目前使用 ：npm Node.js 21.6.0

nvm ls ：列出所有已安装的 node 版本
  
nvm list ：列出所有已安装的 node 版本
 
nvm list available ：显示所有可下载的版本
 
nvm install stable ：安装最新版 node
 
nvm install [node版本号] ：安装指定版本 node
 
nvm uninstall [node版本号] ：删除已安装的指定版本
 
nvm use [node版本号] ：切换到指定版本 node
 
nvm current ：当前 node 版本

2、相关vue3文件目录的介绍

node_modules：项目的相关依赖

public：静态文件

src：程序员写代码

main.ts ：入口文件

3、单个文件vue快速创建

快捷命令：v3tss

4、启动vue3项目，自动打开页面

在package.json  文件中：

修改

  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

5、eslint代码检测工具

1、安装插件

npm i eslint -D

2、生成配置文件

npx eslint --init

@eslint/create-config@0.4.6
Ok to proceed? (y) y
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest
[..................] - idealTree:vite-v3temp: sill idealTree buildDeps
 *  History restored 

PS E:\个人\vue3-template\vite-v3temp> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

 命令执行完成后，会生成文件.eslintrc.cjs文件，该文件主要用来效验

module.exports = {

    "env": {
        "browser": true,   //浏览器
        "es2021": true     //es2021
    },
     //规则继承
    "extends": [
          //扩展，全部默认规则是关闭的，开启推荐配置，会处理函数不能重名、对象不能出现重复key
        "eslint:recommended",   
          //ts语法规则
        "plugin:@typescript-eslint/recommended",
          //vue3语法规则
        "plugin:vue/vue3-essential"
    ],
     //为特定类型的文件指定处理器
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",  //效验ECMA最新版本
        "parser": "@typescript-eslint/parser",  
        "sourceType": "module"
    },
    //插件名称，后缀名可以省略
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

vue3环境代码效验插件

#让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier"
"eslint-plugin-import"
"eslint-plugin-node"

#运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier"


#vue.js的Eslint插件
"eslint-plugin-vue"

#解析器允许使用Eslint效验所有babel code
"@babel/eslint-parser"

安装指令:
npm instal -D eslint-config-prettier eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-vue @babel/eslint-parser

会生成.eslintrc.cjs文件，具体内容如下：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "jest": true,
    },
    // 指定如何解析语法
    parser: "vue-eslint-parser",
    // 优先级低于parser的语法解析配置
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module",
        "jsxPragma": "React",
        "ecmaFeatures": {
            jsx: true
        }
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],

    "plugins": [
        "@typescript-eslint",
        "vue"
    ],

    /**
     * off 或 0 ==》关闭原则
     * warn 或 1 ==》打开规则作为警告（不影响代码执行）
     * error 或 2 ==》规则作为一个错误（代码不能执行，界面报错）
     */
    "rules": {

        //eslint
        'no-var': 'error',  //禁止使用 var 声明变量，推荐使用 let 或 const。
        'no-multiple-empty-lines': ['error', { 'max': 1 }],  //不允许出现多个空行，设置最大允许的空行数为1。
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',  //在生产环境中禁止使用 console，但在开发环境下允许使用。这里使用了条件表达式，根据 process.env.NODE_ENV 的值决定是否启用该规则。
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', //在生产环境中禁止使用 debugger 语句，但在开发环境下允许使用。同样使用了条件表达式。
        'no-unexpected-multiline': 'error', //禁止空余的多行
        'no-useless-escape': 'off',  //禁止不必要的转义字符

        //typeScript
        '@typescript-eslint/no-explicit-any': 'off',  //禁止使用 any 类型
        '@typescript-eslint/no-non-null-assertion': 'off',  //禁止非空断言操作符

        //eslint-plugin-vue
        'vue/multi-word-component-names': 'off',  //禁止使用单单词组件名称
        'vue/script-setup-uses-vars': 'error',  //确保在 <script setup> 中引用的变量在 <script setup> 中被使用
        'vue/no-mutable-props': 'off',  //禁止在组件中使用 mutable 属性


    }
}

package.json新增两个运行脚本

  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src", //运行 ESLint 代码检查。当运行 npm run lint 时，将使用 ESLint 对 src 目录下的文件进行代码检查。
    "fix": "eslint --fix src"  //运行 ESLint 代码检查并尝试自动修复错误。当运行 npm run fix 时，将使用 ESLint 对 src 目录下的文件进行代码检查，并尝试自动修复可以修复的问题。
  },

6、prettierrc.json代码美观

安装格式化插件

npm install -D eslint-plugin-prettier prettier eslint-config-prettier

创建.prettierrc.json文件，添加规则

{
    "singleQuote": true,
    "semi": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2
}

忽略的文件.prettierignore

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*