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

约定不等于承诺〃 2023-09-26 23:37 19阅读 0赞

## 【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/` ###

![image-20230427221350468][]

### 8、默认生成的项目结构 ###

![image-20230427221446319][]

### 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”。这样可以支持更丰富的模块类型,编译后也会有更好的兼容性,直接被这些构建工具识别。

[image-20230427221350468]: https://img-blog.csdnimg.cn/img_convert/ae994ae061a2234de08b91cc604e6ed2.png
[image-20230427221446319]: https://img-blog.csdnimg.cn/img_convert/d2fcea1de536d9500c396b38ac6227bd.png