从零开始创建 Vue3 + Vite + TypeScript 项目

创建项目

终端运行yarn create vite命令

接下来是详细的配置选项

? Project name: » your-project-name

? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte

可根据自己项目中是否使用ts自行选择，不使用ts则选择 vue

? Select a variant: » - Use arrow-keys. Return to submit.
   vue
>  vue-ts

初始化

npm install
//或者 yarn install

修改tsconfig.json

{
 "compilerOptions": {
   "target": "esnext",
   "useDefineForClassFields": true,
   "module": "esnext",
   "moduleResolution": "node",
   "strict": true,
   "jsx": "preserve",
   "sourceMap": true,
   "resolveJsonModule": true,
   "esModuleInterop": true,
   "lib": ["esnext", "dom"],
 },
 "exclude": ["dist", "node_modules"], // ++ exclude-表示编译器需要排除的文件或文件夹 路径，根据自己的项目情况配置
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 "references": [{ "path": "./tsconfig.node.json" }]
}

为项目配置路径别名

修改tsconfig.json 文件

{
 "compilerOptions": {
   "target": "esnext",
   "useDefineForClassFields": true,
   "module": "esnext",
   "moduleResolution": "node",
   "strict": true,
   "jsx": "preserve",
   "sourceMap": true,
   "resolveJsonModule": true,
   "esModuleInterop": true,
   "lib": ["esnext", "dom"],
   "baseUrl": ".", // ++ 解析非相对模块的基地址，默认是当前目录
   "paths": {// ++ 路径映射，相对于baseUrl
     "@/*": ["src/*"]
   }
 },
 "exclude": ["dist", "node_modules"],
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 "references": [{ "path": "./tsconfig.node.json" }]
}

修改 vite.config.ts 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path') //++ 若该行代码报错，则根据提示信息安装依赖 npm @types/node -D
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: { // ++ 配置resolve.alias
   alias: {
     '@': resolve(__dirname, 'src'),
   },
 },
})

添加项目中常用类型声明

修改src/env.d.ts

/// <reference types="vite/client" />
declare module '*.css' // ++
declare module '*.less' // ++ 若使用scss可以写 declare module '*.scss'
declare module '*.png' // ++
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

项目中配置跨域代理

修改 vite.config.ts 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  /* ++ 配置server.proxy*/
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        changeOrigin: true,
      },
    },
  },
})