- npm install typescript
-
- npm install @vue/cli-plugin-typescript
-
- tsc init
-
- package.json增加eslint配置
-
- "eslintConfig": {
- "root": true,
- "env": {
- "node": true
- },
- "extends": [
- "plugin:vue/vue3-essential",
- "eslint:recommended",
- "@vue/typescript/recommended"
- ],
- "parserOptions": {
- "ecmaVersion": 2020
- },
- "rules": {
- "@typescript-eslint/semi": "off",
- "@typescript-eslint/camelcase": "off",
- "@typescript-eslint/no-explicit-any": ["off"],
- "@typescript-eslint/no-unused-vars": ["off"],
- "@typescript-eslint/no-non-null-assertion": ["off"]
- }
- }
-
-
- 并修改tsconfig.js 内容为如下:
-
- {
- "compilerOptions": {
- "target": "esnext",
- "module": "esnext",
- "strict": true,
- "jsx": "preserve",
- "moduleResolution": "node",
- "experimentalDecorators": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "forceConsistentCasingInFileNames": true,
- "useDefineForClassFields": true,
- "sourceMap": true,
- "baseUrl": ".",
- "types": [
- "webpack-env"
- ],
- "paths": {
- "@/*": [
- "src/*"
- ]
- },
- "lib": [
- "esnext",
- "dom",
- "dom.iterable",
- "scripthost"
- ]
- },
- "include": [
- "src/**/*.ts",
- "src/**/*.tsx",
- "src/**/*.vue",
- "tests/**/*.ts",
- "tests/**/*.tsx"
- ],
- "exclude": [
- "node_modules"
- ]
- }
-
-
- 创建shims-vue.d.js 一定要放在src目录下
-
- /* eslint-disable */
- declare module '*.vue' {
- import type { DefineComponent } from 'vue'
- const component: DefineComponent<{}, {}, any>
- export default component
- }