【Vue工程】001-Vite 创建 Vue-TypeScript 项目-蒲公英云

【Vue工程】001-Vite 创建 Vue-Ts 项目

文章目录

【Vue工程】001-Vite 创建 Vue-Ts 项目
一、环境
二、创建项目
- 1、pnpm 创建 Vite 项目
- 2、设置项目名
- 3、选择vue
- 4、选择 TypeScript
- 5、创建完成
- 6、安装与启动
- 7、访问 `http://localhost:5173/\`
- 8、默认生成的项目结构
- 9、修改 `tsconfig.json`
- 10、修改 `tsconfig.node.json`
- 11、新建 `src/typings.d.ts`
- 12、在 `package.json` 中新增 ts 类型检查脚本
三、配置路径别名
- 1、安装 `@types/node` 依赖
- 2、修改 `vite.config.ts`
- 3、ts 路径映射
四、其他说明
- 1、`@types/node` 依赖
- - 概述
  - 安装
  - 依赖包
- 2、配置 `moduleResolution` 选项

一、环境

# Windows 10 IoT 企业版 LTSC
D:\MyResearch\vue-admin>node -v
v18.15.0
D:\MyResearch\vue-admin>pnpm -v
8.3.1

二、创建项目

1、pnpm 创建 Vite 项目

pnpm create vite

2、设置项目名

D:\MyResearch\vue-admin>pnpm create vite
../../.pnpm-store/v3/tmp/dlx-8988        |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-8988/node_modules/.pnpm
../../.pnpm-store/v3/tmp/dlx-8../../.pnpm-store/v3/tmp/dlx-8988        | Progress: resolved 1, reused 0, downloaded 1, added 1, doneme: » vite-project
? Project name: » my-vue-ts

3、选择vue

选择之后按回车键下一步！

# 省略...
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Others

4、选择 TypeScript

选择之后按回车键下一步！

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗

5、创建完成

Scaffolding project in D:\MyResearch\vue-admin\my-vue-ts...
Done. Now run:
  cd my-vue-ts
  pnpm install
  pnpm run dev

6、安装与启动

D:\MyResearch\vue-admin>cd my-vue-ts
D:\MyResearch\vue-admin\my-vue-ts>pnpm install
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
Packages: +47
+++++++++++++++++++++++++++++++++++++++++++++++
Packages are copied from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             node_modules/.pnpm
Downloading registry.npmmirror.com/typescript/5.0.2: 7.05 MB/7.05 MB, done
node_modules/.pnpm/esbuild@0.17.18/node_modules/esbuild: Running postinstall script, done in 241ms
Progress: resolved 69, reused 34, downloaded 13, added 47, done
dependencies:
+ vue 3.2.47
devDependencies:
+ @vitejs/plugin-vue 4.1.0
+ typescript 5.0.2 (5.0.4 is available)
+ vite 4.3.2 (4.3.3 is available)
+ vue-tsc 1.4.2 (1.6.0 is available)
Done in 22.9s
D:\MyResearch\vue-admin\my-vue-ts>pnpm run dev
> my-vue-ts@0.0.0 dev D:\MyResearch\vue-admin\my-vue-ts
> vite
  VITE v4.3.2  ready in 358 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

7、访问 `http://localhost:5173/`

8、默认生成的项目结构

9、修改 `tsconfig.json`

{
  "compilerOptions": {
    // 将代码编译为最新版本的 JS
    "target": "ESNext",
    // 使用 ES Module 格式打包编译后的文件
    "module": "ESNext",
    // 使用 Node 的模块解析策略
    "moduleResolution": "node",
    // 引入 ES 最新特性和 DOM 接口的类型定义
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ],
    // 跳过对 .d.ts 文件的类型检查
    "skipLibCheck": true,
    // 允许引入 JSON 文件
    "resolveJsonModule": true,
    // 要求所有文件都是 ES Module 模块。
    "isolatedModules": true,
    // 不输出文件,即编译后不会生成任何js文件
    "noEmit": true,
    // 保留原始的 JSX 代码，不进行编译
    "jsx": "preserve",
    // 开启所有严格的类型检查
    "strict": true,
    // 报告未使用的局部变量的错误
    "noUnusedLocals": true,
    // 报告函数中未使用参数的错误
    "noUnusedParameters": true,
    // 确保switch语句中的任何非空情况都包含
    "noFallthroughCasesInSwitch": true,
    // 允许使用 import 引入使用 export = 导出的内容
    "esModuleInterop": true,
    // 允许使用js
    "allowJs": true,
    // 查询的基础路径
    "baseUrl": ".",
    // 路径映射,配合别名使用
    "paths": {
      "@/*": [
        "src/*"
      ],
      "#/*": [
        "types/*"
      ]
    }
  },
  // 需要检测的文件
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  // 为文件进行不同配置
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

10、修改 `tsconfig.node.json`

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

11、新建 `src/typings.d.ts`

提示：遇到 ts 报错，有些时候是配置未生效，可以重启 vscode 或 ts 服务（ vscode 快捷键 ctrl+shift+p 调出命令行，输入 Restart TS Server ）

// 声明 window 上自定义属性，如事件总线
declare interface Window {
  eventBus: any;
}
// 声明 .vue 文件
declare module '*.vue' {
  import {
     DefineComponent } from 'vue';
  const component: DefineComponent<object, object, any>;
  export default component;
}

12、在 `package.json` 中新增 ts 类型检查脚本

执行：pnpm run ts 即可检查是否存在 ts 类型错误！

"ts": "vue-tsc --noEmit",

三、配置路径别名

1、安装 `@types/node` 依赖

yarn add @types/node -D

2、修改 `vite.config.ts`

import {
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 这个path用到了上面安装的 @types/node
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 在这里进行配置别名
  resolve: {
    alias: {
      // @代替src
      "@": path.resolve("./src"),
      // #代替types
      "#": path.resolve("./types"),
    },
  },
});

3、ts 路径映射

参考上面，已在修改 tsconfig.json 时通过 baseUrl 与 paths 属性完成。

// 查询的基础路径
    "baseUrl": ".",
    // 路径映射,配合别名使用
    "paths": {
      "@/*": [
        "src/*"
      ],
      "#/*": [
        "types/*"
      ]
    }

四、其他说明

1、`@types/node` 依赖

概述

@types/node 是一个 TypeScript 类型声明包,它包含 Node.js 中的所有类型定义。在 TypeScript 项目中,我们需要类型声明来提供类型信息,才能获得类型检查、自动补全等功能。但是 Node.js 本身的代码是由 JavaScript 编写的,没有类型信息。所以,@types/node 这个类型声明包为所有的 Node.js API 都提供了 TypeScript 的类型定义,类似:

ts
interface Response extends http.IncomingMessage {}
function createServer(requestListener?: (req: http.IncomingMessage, res: http.ServerResponse) => void): http.Server;

这段代码为 http 模块的 requestListener 方法提供了类型定义。这样,在我们的 TS 代码中使用这个 API 时,就有了类型检查和提示。比如,我们这样使用:

ts
import * as http from 'http'
const server = http.createServer((req, res) => {
  res.end()  
})

如果写成:

ts
res.end(1)  // 错误,end() 方法不接收参数

就会报错,因为 @types/node 已经声明 end() 方法不接受参数。所以,@types/node 类型声明包为我们提供了 Node.js 全部 API 的类型定义,让我们可以在 TypeScript 项目中无障碍地使用 Node.js。它是 TypeScript + Node.js 项目中必不可少的一个依赖。总的来说,@types/node 为 TypeScript 提供了:- Node.js 所有模块 API 的类型定义
- 丰富的类型检查和自动补全功能
- 更好的代码编写体验它让我们可以快速在 TS 项目中使用 Node.js,而不必硬编码所有的类型定义,大大提高了开发效率。

安装

pnpm install @types/node --save-dev

依赖包

devDependencies:
+ @types/node 18.16.3

2、配置 `moduleResolution` 选项

如果 VS Code 报错：Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to add aliases to the ‘paths’ option?

配置为：“moduleResolution”: “node”,

“moduleResolution” 选项有以下几种取值:

“node” - 以 Node.js 兼容的方式解析模块,支持 .js, .json, .node 等后缀
“classic” - 以传统的 TS 解析方式,只支持 .ts, .tsx, .d.ts 后缀
“bundler” - 以 bundler 友好的方式解析,支持 .js, .jsx, .ts, .tsx, .css, .json 等后缀
所以,设置为 “node” 与 “bundler” 的区别在于:
“node”:
只支持 Node.js 默认支持的后缀,像 .vue 需要额外配置 alias 或 paths 选项
模块只在运行时结合在一起,适合 Node.js 开发
“bundler”:
支持更多 bundler 友好的后缀,像 .vue, .css 不需要额外配置就支持
编译后的模块会有更好的兼容性,适合 webpack 等 bundler 开发
所以,如果你的项目是一个:
Node.js 项目,推荐设置为 “node”。这样可以很好地与 Node.js 的模块解析方式兼容,但是某些 web 相关文件需要额外配置。
Webpack 或 vue-cli 等构建工具项目,推荐设置为 “bundler”。这样可以支持更丰富的模块类型,编译后也会有更好的兼容性,直接被这些构建工具识别。