从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier
plugins: [‘vue’, ‘@typescript-eslint’],
// 新增
root: true,
// 对某些文件进行单独配置（这里针对 TypeScript 文件）
overrides: [
{
files: [‘.ts’, '.tsx’, ‘*.vue’],
rules: {
‘no-undef’: ‘off’, // 在 TypeScript 中没有必要使用 no-undef 规则
},
},
],
// 自定义规则
rules: {
// http://eslint.cn/docs/rules/
// https://eslint.vuejs.org/rules/
// https://typescript-eslint.io/rules/no-unused-vars/
// 函数的复杂度是指函数中控制流程的复杂程度，例如条件语句、循环语句、嵌套等。复杂度越高，函数的可读性和可维护性可能越差。
complexity: [‘error’, 12], //圈复杂度
// “off” 表示禁用了 ‘@typescript-eslint/ban-ts-ignore’ 规则。这意味着在 TypeScript 代码中，你可以继续使用 “@ts-ignore” 注释来忽略编译器的警告或错误。
‘@typescript-eslint/ban-ts-ignore’: ‘off’,
// 关闭强制函数显式返回类型的规则
‘@typescript-eslint/explicit-function-return-type’: ‘off’,
// 关闭禁止使用 any 类型的规则 warn error
‘@typescript-eslint/no-explicit-any’: ‘off’,
// 关闭禁止使用 require() 函数的规则
‘@typescript-eslint/no-var-requires’: ‘off’,
// 关闭禁止空函数的规则
‘@typescript-eslint/no-empty-function’: ‘off’,
// 关闭禁止定义前使用的规则
‘@typescript-eslint/no-use-before-define’: ‘off’,
// 关闭禁止使用 @ts-comment 的规则
‘@typescript-eslint/ban-ts-comment’: ‘off’,
// 关闭禁止使用特定类型的规则
‘@typescript-eslint/ban-types’: ‘off’,
// 关闭非空断言运算符的规则
‘@typescript-eslint/no-non-null-assertion’: ‘off’,
// 关闭在导出函数和类之外导出的规则
‘@typescript-eslint/explicit-module-boundary-types’: ‘off’,
// 禁止重复声明变量的规则
‘@typescript-eslint/no-redeclare’: ‘error’,
// 关闭短路表达式中可能导致不可选链访问的规则
‘@typescript-eslint/no-non-null-asserted-optional-chain’: ‘off’,
// 检测未使用变量的规则，error 代表检测出未使用变量时会抛出错误
‘@typescript-eslint/no-unused-vars’: [2],
// 关闭自定义事件名大小写的规则
'vue/custom-event-name-casing': 'off',
// 关闭属性排序的规则
'vue/attributes-order': 'off',
// 关闭每个文件只导出一个组件的规则
'vue/one-component-per-file': 'off',
// 关闭 HTML 遇到 > 换行的规则
'vue/html-closing-bracket-newline': 'off',
// 关闭 HTML 属性使用换行的规则
'vue/max-attributes-per-line': 'off',
// 关闭多行 HTML 元素内容换行的规则
'vue/multiline-html-element-content-newline': 'off',
// 关闭单行 HTML 元素内容换行的规则
'vue/singleline-html-element-content-newline': 'off',
// 关闭 HTML 属性名称中使用连字符的规则
'vue/attribute-hyphenation': 'off',
// 关闭 HTML 没有内容的标签必须以 /> 结尾的规则
'vue/html-self-closing': 'off',
// 关闭模板中只包含一个根元素的规则
'vue/no-multiple-template-root': 'off',
// 关闭要求给默认的 prop 赋初始值的规则
'vue/require-default-prop': 'off',
// 关闭 v-model 指令中的参数规则
'vue/no-v-model-argument': 'off',
// 关闭 watch 函数不能使用箭头函数的规则
'vue/no-arrow-functions-in-watch': 'off',
// 关闭禁止在 template 标签上使用 key 属性的规则
'vue/no-template-key': 'off',
// 关闭禁止使用 v-html 指令的规则
'vue/no-v-html': 'off',
// 关闭注释中的特定关键字规则
'vue/comment-directive': 'off',
// 关闭模板中的语法错误规则
'vue/no-parsing-error': 'off',
// 关闭已经被废弃的 v-on:NativeModifier 规则
'vue/no-deprecated-v-on-native-modifier': 'off',
// 关闭多单词组件名称的规则
'vue/multi-word-component-names': 'off',
// 关闭无用的转义字符的规则
'no-useless-escape': 'off',
// 关闭稀疏数组的规则
'no-sparse-arrays': 'off',
// 关闭禁止使用原型对象上的内置属性的规则
'no-prototype-builtins': 'off',
// 关闭禁止在 if 或者循环中出现常量条件的规则
'no-constant-condition': 'off',
// 关闭定义前使用的规则
'no-use-before-define': 'off',
// 关闭限制使用特定全局变量的规则
'no-restricted-globals': 'off',
// 关闭指定语法的规则
'no-restricted-syntax': 'off',
// 关闭生成器前后空格的规则
'generator-star-spacing': 'off',
// 关闭不可达代码的规则
'no-unreachable': 'off',
// 关闭模板中只包含一个根元素的规则
'no-multiple-template-root': 'off',
// 检测未使用变量的规则，error 代表检测出未使用变量时会抛出错误
'no-unused-vars': 'error',
// 关闭 v-model 指令中的参数规则
'no-v-model-argument': 'off',
// 关闭在 switch 语句中缺少 default 分支的规则
'no-case-declarations': 'off',
// 禁用 console 输出
// 'no-console': 'error',
// 重复声明变量视为错误
'no-redeclare': 'error',
},
}
—————————————— **冲突解决完** —————————————————
### 7 按需引入element-plus 和 自动引入Vue3APi 与 组件
pnpm install element-plus
Volar 支持
如果您使用 Volar，请在 **`tsconfig.json`** 中通过 **`compilerOptions.type`** 指定全局组件类型。
// tsconfig.json
{
“compilerOptions”: {
// …
“types”: [“element-plus/global”]
}
}
自动导入
pnpm install -D unplugin-vue-components unplugin-auto-import
vite.config.ts
// 导入 vite 插件
import { defineConfig } from “vite”;
// 导入 vue 插件
import vue from “@vitejs/plugin-vue”;
// 导入自动导入插件
import AutoImport from “unplugin-auto-import/vite”;
// 导入自动注册组件的插件
import Components from “unplugin-vue-components/vite”;
import { ElementPlusResolver } from “unplugin-vue-components/resolvers”;
import * as path from “path”;
export default defineConfig({
// 配置打包后的相对路径
base: “./”,
//配置别名
resolve: {
// 需要在tsconfig.json的compilerOptions中配置paths
alias: {
“@”: path.resolve(“./src”), // @代替src
“~”: path.resolve(“./src/components”), // @代替src/components
},
},
// 配置全局样式
css: {
preprocessorOptions: {
scss: {
// 这里可以添加全局的 Sass 变量、Mixin等。首先你的有这个文件
// additionalData: // @import "@/styles/variables.scss"; // @import "@/styles/mixins.scss"; //,
},
},
},
// plugins插件
plugins: [
vue(), //vue
AutoImport({
//plus按需引入
resolvers: [ElementPlusResolver()],
//引入vue 自动注册api插件
imports: [“vue”, “vue-router”, “pinia”], // 配置需要自动导入的库
dts: “types/auto-import.d.ts”, // 自动引入生成api的地址
eslintrc: {
enabled: false, // 是否开启eslint
filepath: “./.eslintrc-auto-import.json”, // eslint配置文件地址
globalsPropValue: true, // 是否开启全局变量
},
}),
Components({
//plus按需引入
resolvers: [ElementPlusResolver()],
// 配置需要将哪些后缀类型的文件进行自动按需引入
extensions: [“vue”, “md”],
dts: “types/components.d.ts”, //自动引入生成的组件的地址
}),
],
// 打包配置
build: {
minify: “terser”,
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
},
// 跨域
server: {
//使用IP能访问
host: “0.0.0.0”,
port: 8888,
// 热更新
hmr: true,
//自定义代理规则
proxy: {
// 选项写法
“/api”: {
// target: “https://admin.ccc.com”,
// changeOrigin: true,
// rewrite: (path) => path.replace(/^/api/, “”),
},
},
},
});
**Ts 报红**
配置完之后会出现
1：项目根目录新建 env.d.ts
///
// 三斜线引用告诉编译器在编译过程中用types形式引入的额外的文件vite/client.d.ts,
// 此文件里面是vite帮我们定义的各种常用类型定义，比如css,图片等。
declare module “*.vue” {
import type { DefineComponent } from “vue”;
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>;
export default component;
}
2：修改 tsconfig.json
tsconfig.json
{
“compilerOptions”: {
“target”: “ESNext”, // 指定ECMAScript目标版本
“useDefineForClassFi