Vue3+TS+Vite+Pinia 搭建项目

搭建项目代码

npm i vite -g

npm create vite@latest

vue配置根目录详细步骤(用@代表src目录)

安装

加载 path 依赖

npm i path
npm i @types/node

配置

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    },
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

主要是添加

"baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    },

此时，已经可以完成编译，将导入地址调整为 @/components/HelloWorld.vue，可以看到界面可以正常展示，说明 @ 符号已经生效。

但是如果有使用 @ 导入 .ts 文件时，VS Code 会提示找不到路径，虽然不影响编译，但是看着难受。

配置 tsconfig.json 文件，在 compilerOptions 选择中增加 baseUrl 及 paths 配置

{
    "compilerOptions": {
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
            "@/*": [ "src/*" ]
        }
    }
}