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

2019-11-19 15:09:32

字体：大中小

来源：转载

供稿：网友

前言

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

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

上一篇：教你用Cordova打包Vue项目的方法

下一篇：基于匀速运动的实例讲解(侧边栏,淡入淡出)