XNAMP运维与架构

    由于集成开发环境（IDE）或者插件的版本过旧，可能无法完全支持Vue3的新特性和改进，所以推荐使用VSCode，主要它是免费的，

以其丰富的功能、强大的插件生态系统和出色的用户体验赢得了广大开发者的青睐。

    Vue3 + Vite + Ts 开发必备的 VSCode 插件 - Vue - Official、Vite、ESLint、Prettier - Code formatter、JavaScript Debugger、Path Intellisense，以上就是 Vue3、Vite 和 TypeScript 开发中必备的 VSCode 插件。这些插件涵盖了代码编辑、调试、格式化、类型检查等多个方面，可以帮助开发者提高开发效率和代码质量。当然，除了这些插件外，还有许多其他优秀的插件可供选择，开发者可以根据自己的需求和喜好进行选择和搭配。

（注意：同时安装了Vetur和Vue-Official，很可能产生错误提示）

项目初始化

方式一：
pnpm create vite
? Project name: » vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
? Select a variant: » - Use arrow-keys. Return to submit.
>    TypeScript
     JavaScript
    Customize with create-vue ↗
    Nuxt ↗
Scaffolding project in D:\Code\vite-project...

Done. Now run:

  cd vite-project
  pnpm install
  pnpm run dev
  
方式二：（下面的代码在此基础展开）
pnpm create vue

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-vite-ts
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 D:\www\vue-vite-ts...

项目初始化完成，可执行以下命令：

  cd vue-vite-ts
  pnpm install
  pnpm format
  pnpm dev

链接：VSCode配置使用gitee

初始状态：Node.js 的编码辅助已禁用

安装node编码辅助

pnpm install @types/node --save-dev

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "moduleResolution": "bundler",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts"],
}

确保include数组中包含了你所有的源文件和类型声明文件。

效果图如下：

tsconfig.json出现以下问题的解决办法：

  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],

引用的项目“d:/www/vite/tsconfig.app.json”必须拥有设置 "composite": true。

"compilerOptions": {
    "composite": true,
}

引用的项目“d:/www/vite/tsconfig.app.json”可能不会禁用发出。

"compilerOptions": {
    "noEmit": false,
}

解决这2个问题后，又引出了其它问题

使用pnpm create vue创建的框架模板分析发现不会有以上2个问题，它安装了@vue/tsconfig，tsconfig.app.json

{

  "extends": "@vue/tsconfig/tsconfig.dom.json",

}

tsconfig.dom.json继承./tsconfig.json，但

{

"compilerOptions": {"types": []

}

所以我在tsconfig.app.json中添加了

{

  "compilerOptions": {"types": ["node"]}

}

解决了process报错和以上2个问题，完美！

---