Vue3 + TypeScript 开发总结

下面我将分享一下“Vue3 + TypeScript 开发总结”的完整攻略，主要包括以下几个部分：

1. 项目初始化与配置
2. TypeScript 基础知识回顾
3. Vue3 中 TypeScrip 的应用实践
4. 示例说明

首先，我们需要进行项目初始化和配置。在初始化项目时，我们需要在命令行中输入以下代码：

vue create my-project

随后，我们可以根据实际情况选择需要的插件和功能。在项目中使用 TypeScript，则需要在创建项目时选择 Manually select features，并勾选上 TypeScript 插件。

初始化完成后，我们需要在项目的根目录下创建 tsconfig.json 文件，并进行 TypeScript 环境的配置。在其中添加以下代码：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "incremental": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

然后，我们需要安装 Vue3 和 TypeScript 对应的类型定义。在命令行中输入以下代码：

npm install vue@next -S
npm install @vue/runtime-core -D
npm install @vue/compiler-sfc -D
npm install typescript -D
npm install @typescript-eslint/eslint-plugin -D
npm install @typescript-eslint/parser -D
npm install eslint-plugin-vue -D
npm install eslint -D

安装完成后，我们需要添加一些配置以支持 Vue3 和 TypeScript 的使用。在 .eslintrc.js 文件中添加以下代码：

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "@typescript-eslint",
    "vue"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-var-requires": "off",
    "vue/no-v-html": "off",
    "vue/no-mutating-props": "off",
    "vue/attributes-order": "off",
    "vue/max-attributes-per-line": ["error", {
      "singleline": 5,
      "multiline": {
        "max": 1,
        "allowFirstLine": true
      }
    }],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    "vue/html-indent": ["error", 2, {
      "attribute": 1,
      "baseIndent": 1,
      "closeBracket": 0,
      "alignAttributesVertically": true,
      "ignores": []
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "never",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }
}

然后，我们需要配置 vue.config.js 文件，以支持 TypeScript 的使用。在其中添加以下代码：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src')
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options.transpileOnly = true
        options.happyPackMode = false
        return options
      })
  },
  css: {
    requireModuleExtension: true,
    loaderOptions: {
      css: {
        modules: {
          localIdentName: '[name]_[local]_[hash:base64:5]'
        },
        localsConvention: 'camelCaseOnly'
      }
    }
  },
  pluginOptions: {
    lintStyleOnBuild: true,
    stylelint: {},
  }
}

接下来，我们进行 TypeScript 基础知识回顾。在 TypeScript 中，我们需要定义变量的数据类型，例如：

let num: number = 123
let str: string = 'hello'
let bol: boolean = true

我们也可以定义函数的参数和返回值的数据类型，例如：

function add(a: number, b: number): number {
  return a + b
}

此外，我们还可以使用接口来定义对象的结构体，例如：

interface Person {
  name: string
  age: number
}

let person: Person = {
  name: 'John',
  age: 18
}

接下来，我们进行 Vue3 中 TypeScript 的应用实践。在 Vue3 中，我们可以使用 defineComponent 方法来定义组件，并通过 props 和 setup 来处理组件的数据和逻辑，例如：

import { defineComponent } from 'vue'

interface Props {
  message: string
}

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props: Props) {
    console.log(props.message)

    return {
      count: 0,
      increment() {
        this.count++
      }
    }
  }
})

我们在组件中定义了 Props 接口来规范 message 组件属性的类型和必选项，同时，在 setup 函数中定义并返回了 count 和 increment 函数，并且通过 props.message 访问了组件的属性。

下面，我将通过两个示例来进一步说明 Vue3 + TypeScript 的应用实践：

示例一：使用 TypeScript 来定义 vuex 的状态和 mutations

在 vuex 中，我们可以使用 TypeScript 来定义状态的类型和 mutations 的操作，例如：

// 创建状态类型
interface State {
  count: number
}

// 创建 mutations 操作类型
interface Mutations {
  increment(state: State): void
  decrement(state: State): void
}

// 创建 actions 操作类型
interface Actions {
  increment(context: any): void
  decrement(context: any): void
}

export default createStore<State>({
  state: {
    count: 0
  },
  mutations: {
    increment(state: State) {
      state.count++
    },
    decrement(state: State) {
      state.count--
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    }
  }
})

在上面的示例中，我们定义了 State 状态类型，以及 Mutations 和 Actions 操作类型，然后在 createStore 中使用这些类型来规范 vuex 的状态和 mutations。

示例二：在 Vue3 中使用 TypeScript 定义路由

在 Vue3 的路由中，我们可以使用 TypeScript 来定义路由组件的类型和路由配置的类型，例如：

import { RouteRecordRaw } from 'vue-router'

interface RouteConfig extends RouteRecordRaw {
  meta?: {
    title: string
  }
}

const routes: RouteConfig[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      title: 'Home Page'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
    meta: {
      title: 'About Page'
    }
  }
]

在上面的示例中，我们通过 RouteRecordRaw 接口来规范路由组件的类型，并使用 RouteConfig 接口来规范路由配置的类型。然后，我们在路由配置中使用这些类型来规范路由的组件和数据。

以上就是关于“Vue3 + TypeScript 开发总结”的完整攻略了，希望对您有所帮助。