在将Vue.js与Typescript一起使用时,如何使用vue-resource等插件? [英] How to use plugins like vue-resource when using Vue.js with Typescript?
本文介绍了在将Vue.js与Typescript一起使用时,如何使用vue-resource等插件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我开始使用Typescript并尝试将其应用于我的项目。但是,我不能让Vue.js插件像vue-resource一样使用它。
I started using Typescript and trying to apply it to my project. However, I can't get Vue.js plugins like vue-resource to work with it.
当我使用
this.$http.post()
I得到错误:
错误TS2339:类型'typeof Vue'上不存在属性'$ http'。
error TS2339: Property '$http' does not exist on type 'typeof Vue'.
这是有道理的,因为我在一个类上下文中。但是我该怎么做呢?这是我的完整组成部分:
which makes sense because I am in a class context. But how can I do that? This is my full component:
<template>
<div>
<h1>Sign up</h1>
<form>
<div class="form-group">
<label for="name">Name</label>
<input v-model="name" type="text" class="form-control" name="name" placeholder="Name">
<small class="form-text text-muted">Please provide a name.</small>
</div>
<div class="form-group">
<label for="name">Password</label>
<input v-model="password" type="password" class="form-control" name="password" placeholder="Password">
<small class="form-text text-muted">Please provide a password.</small>
</div>
<input type="submit" class="btn btn-primary" value="Submit" @click.prevent="save">
</form>
</div>
</template>
<script lang="ts">
import Component from 'vue-class-component'
@Component
export default class SignUp extends Vue {
name: string = ''
password: string = ''
save(): void {
this.$http.post('/api/sign-up', {
name: this.name,
password: this.password
})
.then((response: any) => {
console.log(response)
})
}
}
</script>
我在 main.ts $ c中注册了vue-resource $ c>像这样:
import Vue from "vue"
import router from "./router"
import App from "./app"
const VueResource = require('vue-resource')
Vue.use(VueResource)
new Vue({
el: "#app",
router,
template: "<App/>",
components: { App },
});
推荐答案
使用 import $对于VueResource,c $ c>而不是
require
。
import VueResource from 'vue-resource'
这篇关于在将Vue.js与Typescript一起使用时,如何使用vue-resource等插件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文