关闭eslint检查2020_Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践...

尤大的 Vue3.0 已经发布有一阵子了，已经很成熟了。

而且 Element Plus + Vite 也出了一段时间了，是时候该上手体验分享一波了。

主要是要熟练一下 Vue3，好准备用 Vue3 重构一下自己的网站项目: blog-vue-typescript ，计划是过年期间会着手重构这个项目，年后会上线。

1. 初化化项目

全局安装 vite-appnpm i -g vite-app

创建项目yarn create vite-app 

# 或者

npm init vite-app 

进入项目，安装依赖cd 

yarn # 或 npm i

运行项目yarn dev

打开浏览器 http://localhost:3000 查看

2. 引入TypeScript

加入 ts 依赖yarn add --dev typescript

在 项目根目录下创建 TypeScript 的配置文件 tsconfig.json{

"compilerOptions": {

// 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。

"allowSyntheticDefaultImports": true,

// 解析非相对模块名的基准目录

"baseUrl": ".",

"esModuleInterop": true,

// 从 tslib 导入辅助工具函数(比如 __extends， __rest等)

"importHelpers": true,

// 指定生成哪个模块系统代码

"module": "esnext",

// 决定如何处理模块。

"moduleResolution": "node",

// 启用所有严格类型检查选项。

// 启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict，

// --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。

"strict": true,

// 生成相应的 .map文件。

"sourceMap": true,

// 忽略所有的声明文件( *.d.ts)的类型检查。

"skipLibCheck": true,

// 指定ECMAScript目标版本

"target": "esnext",

// 要包含的类型声明文件名列表

"types": [

],

"isolatedModules": true,

// 模块名到基于 baseUrl的路径映射的列表。

"paths": {

"@/*": [

"src/*"

]

},

// 编译过程中需要引入的库文件的列表。

"lib": [

"ESNext",

"DOM",

"DOM.Iterable",

"ScriptHost"

]

},

"include": [

"src/**/*.ts",

"src/**/*.tsx",

"src/**/*.vue",

"tests/**/*.ts",

"tests/**/*.tsx"

],

"exclude": [

"node_modules"

]

}

在 src 目录下新加 shim.d.ts 文件/* eslint-disable */

import type { DefineComponent } from 'vue'

declare module '*.vue' {

const component