【vue3+ts】@设置别名

新建的vue3+ts项目,建路由的时候报错:

在这里插入图片描述
在vite.config.ts中新增如下代码:
在这里插入图片描述

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

在tsconfig.json中添加代码:
在这里插入图片描述

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

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

还是报错,path未找到
在这里插入图片描述
path是node中的工具包,安装一下就行

 npm i path
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 + TypeScript 的项目中,我们可以使用很多 TypeScript 的高级运用技巧来提高代码的质量和可维护性,下面是一些常用的技巧: 1. 类型推断: Vue 3 中的 Composition API 非常适合使用 TypeScript 来编写,由于 Composition API 中使用了很多函数式编程的技巧,所以我们可以使用类型推断来更好地理解代码的含义和作用。 2. 类型声明文件: 在 Vue 3 + TypeScript 中,我们可以使用类型声明文件来描述一些第三方库或组件的类型,从而提高代码的可读性和可维护性。 3. 类型自动推导: TypeScript 可以自动推导出一些变量的类型,例如使用 `const` 声明的变量会自动推导出变量的类型,这可以避免一些类型定义的重复和繁琐。 4. 类型别名和接口: 在 Vue 3 + TypeScript 中,我们可以使用类型别名和接口来定义复杂的数据类型,从而使代码更加易读和易维护。 5. 类型守卫: Vue 3 + TypeScript 中可以使用类型守卫来判断变量的类型,并根据不同类型执行不同的代码逻辑,例如使用 `if (typeof x === 'string')` 来判断变量 `x` 是否是字符串类型。 6. 泛型: 在 Vue 3 + TypeScript 中,我们可以使用泛型来编写通用组件和方法,从而提高代码的复用性和灵活性。 以上是 Vue 3 + TypeScript 中常用的一些 TypeScript 高级运用技巧,它们可以帮助我们编写出更加健壮、可维护的代码,并且提高代码的可读性和可复用性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值