如何在已有的vue3下添加ts
时间: 2024-05-15 09:20:03 浏览: 130
以下是在已有的 Vue 3 项目中添加 TypeScript 的步骤:
1. 安装 TypeScript 和相关依赖
在终端中进入项目根目录,运行以下命令安装 TypeScript 和相关依赖:
```
npm install --save-dev typescript @vue/cli-plugin-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
```
2. 添加 TypeScript 配置文件
在项目根目录中创建 `tsconfig.json` 文件,加入以下内容:
```json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
```
这里的配置文件包含了编译选项和文件包含/排除规则。具体的配置可以根据项目需求进行修改。
3. 修改 `main.js` 文件
将 `main.js` 文件改为 `main.ts` 文件,并修改文件内容如下:
```typescript
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
这里的改动包括将 `import` 语句改为 TypeScript 的语法,以及添加了 `.ts` 后缀。
4. 修改 `.vue` 单文件组件
将 `.vue` 单文件组件中的 `<script>` 标签的 `lang` 属性从 `js` 改为 `ts`。
5. 启用 ESLint
在项目根目录中创建 `.eslintrc.js` 文件,加入以下内容:
```javascript
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
parser: '@typescript-eslint/parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
}
```
这里的配置文件包含了 ESLint 的相关规则和扩展。具体的配置可以根据项目需求进行修改。
6. 重启项目
在终端中运行 `npm run serve` 重启项目。这时你就可以在项目中使用 TypeScript 了。