使用脚手架创建vue2项目（关闭eslint语法检查 、运行项目时自动打开网址、src文件夹简写方法）

使用脚手架创建vue2项目会默认安装的插件（eslint) 这个插件是检查语法的。

假设我们在main.js中定义了一个变量，没有使用 eslint 就会检测出错误   （事实是我们并没有写错而是eslint 给我们判断是错的，所以这样会很麻烦，那要怎么关闭他呢）

，

3.如何关闭eslint语法检查 

在vue.confing.js文件中配置：

module.exports = defineConfig({
  lintOnSave: false
})

4.如何在运行项目时自动打开网址

只需要在package.json文件中找到scripts字段，在运行时 后面添加  --open

 "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

5、src文件夹简写方法，配置别名
jsconfig.json配置别名@提示 【@代表的是src文件夹，这样将来文件过多，找的时候方便很多】

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

 

详细解释

• target:

  • 指定 ECMAScript 目标版本，es5 表示将 TypeScript 编译成 ES5 代码，以便在大多数浏览器中运行。

• module:

  • 指定模块代码生成方式，esnext 表示使用最新的 ECMAScript 模块系统。

• baseUrl:

  • 设置模块导入的基准目录。./ 表示当前目录，即项目根目录。

• moduleResolution:

  • 指定模块解析策略。node 表示使用 Node.js 风格的模块解析机制，这意味着 TypeScript 会按照 Node.js 的规则寻找模块。

• paths:

  • 设置路径映射，用于简化模块导入路径。例如，@/components/Button 实际上会被解析为 src/components/Button。
  • @/* 表示所有以 @/ 开头的路径，都会映射到 src/ 目录。

• lib:

  • 指定要包含在编译中的库文件。这些库文件通常包括特定环境的 API 声明文件。
  • "esnext": 包含最新的 ECMAScript 标准库声明文件。
  • "dom": 包含浏览器 DOM API 声明文件。
  • "dom.iterable": 包含可迭代 DOM API 声明文件，例如支持 NodeList、HTMLCollection 等。
  • "scripthost": 包含宿主脚本环境（如 Windows Script Host）的标准库声明文件。