欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue与TypeScript集成配置最简教程(推荐)

程序员文章站 2022-03-21 21:45:31
前言 vue的官方文档没有给出与typescript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。 下面我就给出vue...

前言

vue的官方文档没有给出与typescript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。

下面我就给出vue-cli建立的项目与typescript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开。

# vue init webpack vue-typescript

? project name vue-typescript
? project description a vue.js project
? author
? vue build standalone
? install vue-router? no
? use eslint to lint your code? no
? setup unit tests with karma + mocha? no
? setup e2e tests with nightwatch? no

安装typescript相关依赖和项目其余依赖,用npm或cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

配置

修改目录下bulid/webpack.base.conf.js文件,在文件内module>rules添加以下规则

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendtssuffixto: [/\.vue$/],
 }
},

在src目录下新建一个文件vue-shims.d.ts,用于识别单文件vue内的ts代码

declare module "*.vue" {
 import vue from "vue";
 export default vue;
}

在项目根目录下建立typescript配置文件tsconfig.json

{
 "compileroptions": {
  "strict": true,
  "module": "es2015",
  "moduleresolution": "node",
  "target": "es5",
  "allowsyntheticdefaultimports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

重命名src下的main.jsmain.ts

修改webpack.base.conf.js下的entry>app为'./src/main.ts'

修改src下的app.vue文件,在

<script lang="ts">

测试

下面可以测试是否集成成功,编辑src/components/hello.vue文件,修改

<script lang="ts">
 import vue, {componentoptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as componentoptions<vue>
</script>

运行项目

# npm run dev

测试成功,现在是一个typescipt项目了

 vue与TypeScript集成配置最简教程(推荐)

进阶

配置官方推荐的vue-class-component,

安装开发依赖

# npm install --save-dev vue-class-component

修改ts配置文件,增加以下两项配置

"allowsyntheticdefaultimports": true,
"experimentaldecorators": true,

改写我们的hello组件

<script lang="ts">
 import vue from 'vue'
 import component from 'vue-class-component'
 @component
 export default class hello extends vue {
  msg: string = 'this is a typescript project now'  
 }
</script>

使用vue-class-component后,初始数据可以直接声明为实例的属性,而不需放入data() {return{}}中,组件方法也可以直接声明为实例的方法,如官方实例,更多使用方法可以参考其官方文档

import vue from 'vue'
import component from 'vue-class-component'
// @component 修饰符注明了此类为一个 vue 组件
@component({
 // 所有的组件选项都可以放在这里
 template: '<button @click="onclick">click!</button>'
})
export default class mycomponent extends vue {
 // 初始数据可以直接声明为实例的属性
 message: string = 'hello!'
 // 组件方法也可以直接声明为实例的方法
 onclick (): void {
  window.alert(this.message)
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。