Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料，需要的朋友可以参考下。
在Vue2和Vue CLI中集成TypeScript，可以显著提升项目的可维护性和开发体验。Vue作为流行的前端框架，结合强类型语言TypeScript，可以提供更好的类型检查和代码提示，减少运行时错误。以下将详细介绍如何配置Vue2项目以使用Vue CLI和TypeScript。
你需要确保已经安装了Vue CLI。如果还没有安装，可以通过以下命令全局安装：
```bash
npm install -g @vue/cli
```
接下来，创建一个新的Vue项目，并选择包含TypeScript的模板：
```bash
vue create my-project --typescript
```
这将会自动配置好基础的TypeScript支持。如果你已经有了一个Vue2项目，你可以通过`vue add typescript`命令添加TypeScript支持。
**一、初步配置**
1. **安装依赖**
需要安装`vue-class-component`和`vue-property-decorator`这两个插件，它们可以帮助我们将Vue组件与TypeScript更好地结合：
```bash
npm install --save vue-class-component vue-property-decorator
```
2. **配置webpack**
在`vue.config.js`文件中，确保入口文件设置为`main.ts`，并添加对`.ts`和`.tsx`文件的支持：
```javascript
module.exports = {
entry: {
app: './src/main.ts'
},
resolve: {
extensions: ['.js', '.vue', '.json', '.ts', '.tsx']
}
};
```
3. **配置loader**
配置`ts-loader`，使其能够处理`.vue`文件中的TypeScript代码：
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
};
```
4. **配置tsconfig.json**
更新`tsconfig.json`文件以适应Vue和Webpack环境：
```json
{
"include": ["src/**/*"],
"exclude": ["node_modules"],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"allowJs": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"strict": true, // 添加严格模式
"esModuleInterop": true, // 允许import * as ns from 'mod'导出默认导出
"lib": ["dom", "es5", "es2015.promise"],
"sourceMap": true,
"pretty": true
}
}
```
**二、实战！**
1. **在Vue文件中使用TypeScript**
在`.vue`文件的`<script>`标签中，添加`lang="ts"`，表示该脚本使用TypeScript编写：
```html
<script lang="ts">
// ...
</script>
```
2. **处理模块解析问题**
由于`ts-loader`默认不识别Vue或HTML文件，需要创建对应的`.d.ts`声明文件，比如`global.d.ts`：
```typescript
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module "*.html" {
let template: string;
export default template;
}
```
3. **导入装饰器**
从`vue-property-decorator`导入需要的装饰器，如`Component`, `Vue`, `Watch`, `Prop`：
```typescript
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
```
4. **编写组件**
使用装饰器编写TypeScript版的Vue组件，例如：
```typescript
@Component({
name: "sidebar",
template: `<template>...</template>`,
components: { sidebarItem }
})
export default class Sidebar extends Vue {
// 类型定义
SidebarMenu: any = SidebarMenu;
hoverTopElem: HoverTopElem = new HoverTopElem();
activeListItemName: string = null;
activeRouteItemRoute: string = null;
// 方法
show(e) {
// ...
}
hidden() {
// ...
}
@Watch("activeRouteItemRoute")
onActiveRouteChange(newRoute: string) {
// ...
}
@Prop()
someProp: string;
}
```
以上就是Vue2 Vue CLI中集成TypeScript的基本配置和实践步骤。通过这样的配置，你可以在享受Vue的便利性的同时，利用TypeScript的强大类型系统，提高代码质量和开发效率。当然，实际项目中可能还需要根据具体需求调整配置，但以上步骤已经足够启动一个基本的Vue2 TypeScript项目。
