Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践

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

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

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

1. 初化化项目

全局安装 vite-app

npm?i?-g?vite-app

创建项目

yarn?create?vite-app?<project-name>

#?或者
npm?init?vite-app?<project-name>

进入项目，安装依赖

cd?<project-name>

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:?DefineComponent<{},?{},?any>
??export?default?component
}

把 main.js 修改成 main.ts

在根目录，打开 Index.html