Vue2+TypeScript 的快速上手指南

前端

2023-11-10 22:28:18

正文

1. 理解 Vue2 与 TypeScript

Vue2 作为前端框架界的风向标，受到开发者的广泛青睐。而 TypeScript 是一种基于 JavaScript 的编程语言，提供了静态类型系统和面向对象编程，可以让 JavaScript 代码更具有结构性和可维护性。

2. 创建 Vue2 + TypeScript 项目

借助 Vue CLI 脚手架

使用 Vue CLI 脚手架，可以快速便捷地创建 Vue2+TypeScript 项目。首先全局安装 Vue CLI：
```
npm install -g @vue/cli
```
之后，使用 Vue CLI 脚手架创建项目：
```
vue create my-vue2-ts-project --preset typescript
```

手动创建项目

手动创建 Vue2+TypeScript 项目需要安装 Vue2 和 TypeScript 的相关依赖：

npm install vue vue-router typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

然后，在项目的根目录下创建 tsconfig.json 文件，配置 TypeScript 编译器选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "allowJs": true
  },
  "include": ["src"]
}

在项目的根目录下创建 src 文件夹，并添加 main.ts 文件，作为项目的入口文件：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

配置 TypeScript 编译器

在项目的根目录下创建 package.json 文件，添加以下配置：
```
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}
```
然后，运行以下命令编译 TypeScript 代码：
```
npm run build
```

3. 在项目中使用 TypeScript

编写 TypeScript 组件

在 src 文件夹下创建 components 文件夹，添加 HelloWorld.vue 文件，作为 TypeScript 组件：

<template>
  <h1>Hello World!</h1>
</template>

<script lang="ts">
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

处理数据和事件

在 App.vue 文件中，使用 TypeScript 处理数据和事件：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: 'Hello Vue + TypeScript!'
    }
  },
  methods: {
    increment() {
      this.message += '!'
    }
  }
})
</script>