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

网络编程 2024/11/15 佚名

3 1 2

前言

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

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

初始化项目

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

# vue init webpack vue-typescript

"htmlcode">

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


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


{
 test: /\.tsx"htmlcode">

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.js为main.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-class-component，https://cn.vuejs.org/v2/guide/typescript.html
安装开发依赖


# 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{}}中，组件方法也可以直接声明为实例的方法，如官方实例，更多使用方法可以参考其官方文档
https://github.com/vuejs/vue-class-component#vue-class-component


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)
 }
}



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