vue3+vite+ts关闭ESlint

要关闭ESlint，你可以按照以下步骤进行操作:
1. 首先，卸载ESlint，可以使用命令`npm uninstall eslint --save`来进行卸载。
2. 然后，打开你的`package.json`文件，删除其中与ESlint相关的配置项。
3. 接下来，配置`package.json`中的`lint-staged`字段，将`*.{vue,js,ts,tsx,jsx}`文件的eslint检查和prettier格式化加入其中。

   {
     "scripts": {},
     "lint-staged": {
       "*.{vue,js,ts,tsx,jsx}": [
         "eslint --fix",
         "prettier --write --ignore-unknown"
       ]
     }
   }

通过以上步骤，你可以成功关闭ESlint。

相关问题

vue3+vite+ts使用图片

在 Vue 3、Vite 和 TypeScript 的项目中，使用图片通常涉及以下几个步骤：

1. **安装依赖**:
首先，你需要在项目中安装 `vue-loader` 和 `vite-plugin-vue3`，它们能很好地支持 Vue 的模板和类型检查。可以使用 npm 或 yarn 安装：

   npm install vue-loader vite-plugin-vue3 @types/vue

2. **配置 Vite**:
在 `vite.config.ts` 中添加对 Vue 3 的支持，并启用 TypeScript：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';

   export default defineConfig({
     plugins: [vue(), ...],
     build: {
       target: 'esnext', // 使用 ESNext 规范构建
       transpileDependencies: ['@vue/types'], // 转译需要的库
     },
   });

3. **引用图片**:
在 `.vue` 文件中，使用 `<img>` 标签引用图片资源，同时指定 `src` 属性，并且因为 TypeScript 支持静态类型，你可以给 `src` 字符串加上类型注解：

   <template>
     <img :src="require('./assets/myImage.png')" alt="My Image" :type="imageType" />
   </template>

   <script lang="ts">
   import { Component, Prop } from 'vue';
   
   interface ImageProps {
     imageType: string; // 图片类型，如 "image/jpeg"
   }

   export default class MyComponent extends Component<ImageProps> {
     //...
   }
   </script>

使用 `require` 函数是为了在运行时动态加载图片，避免打包所有图片到静态文件中。

4. **处理图片路径**:
如果图片位于静态资产目录（例如 `public/assets`），可以使用相对路径或者绝对 URL。如果你想让 Vite 自动处理，需要在 `vite.config.ts` 中设置 `alias` 或者使用 Vite 插件 `vite-plugin-vuetify` 或 `vite-plugin-eslint` 等。

vue3+vite+ts项目搭建

以下是基于Vue3、Vite、TypeScript的项目搭建步骤：

1. 安装 Node.js 和 npm

在官网下载并安装 Node.js，npm会随之安装。

2. 创建项目

打开命令行工具，使用以下命令创建一个新的 Vue3 项目：

npm init vite-app <project-name>
cd <project-name>
npm install

3. 添加 TypeScript 支持

通过以下命令安装 TypeScript：

npm install --save-dev typescript

然后在项目根目录下创建一个 `tsconfig.json` 文件：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"]
}

4. 添加 Vue Router 和 Vuex

通过以下命令安装 Vue Router 和 Vuex：

npm install vue-router vuex --save

5. 添加 SCSS 支持

通过以下命令安装 SCSS：

npm install sass sass-loader fibers --save-dev

在 `src` 目录下创建一个名为 `style.scss` 的文件，并在 `main.ts` 中导入：

@import './style.scss';

6. 添加 ESLint 和 Prettier

通过以下命令安装 ESLint 和 Prettier：

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev

在项目根目录下创建一个 `.eslintrc.js` 文件：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/typescript/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/vue",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
  },
};

在项目根目录下创建一个 `.prettierrc.js` 文件：

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

7. 添加 Axios 支持

通过以下命令安装 Axios：

npm install axios --save

在 `src` 目录下创建一个名为 `api.ts` 的文件，并在其中定义一个 Axios 实例：

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 30000,
});

export default api;

8. 添加测试支持

通过以下命令安装 Jest 和 Vue Test Utils：

npm install jest @vue/test-utils ts-jest vue-jest babel-jest --save-dev

在项目根目录下创建一个 `jest.config.js` 文件：

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  setupFilesAfterEnv: ["<rootDir>/tests/setup.ts"],
  collectCoverage: true,
  collectCoverageFrom: ["src/**/*.{ts,vue}", "!**/node_modules/**"],
  coverageReporters: ["text-summary", "lcov", "html"],
};

在项目根目录下创建一个 `tests/setup.ts` 文件：

import { config } from "@vue/test-utils";

config.global.mocks.$t = (key: string) => key;

9. 运行项目

使用以下命令启动项目：

npm run dev

此时，你已经成功搭建了一个基于 Vue3、Vite、TypeScript 的项目！