vue3.0 + element plus + vite + TS + eslint 一次尝试

最新推荐文章于 2024-08-01 13:32:22 发布

陌-凉

最新推荐文章于 2024-08-01 13:32:22 发布

阅读量3.2k

点赞数 1

分类专栏： vue vite 文章标签： vue

本文链接：https://blog.csdn.net/h_mo_liang/article/details/113850297

版权

本文介绍了如何使用vue3.0、element plus、vite、TypeScript和eslint初始化并配置一个项目。通过创建配置文件、引入TS、设置VSCode插件和安装vuex，成功搭建了一个开发环境。

摘要由CSDN通过智能技术生成

技术栈：vue3.0 + element plus + vite + TS + eslint

初始化项目
创建项目
进入项目，安装依赖，运行项目
引入TS

加入 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",