Visual studio 如何为使用Visual Studio的TypeScript获取Vue.js 2.0打字？

我正在尝试让Vue.js 2.0打字在Visual Studio中使用TypeScript。以前，我使用了from DefinitelyTyped，但它们是针对Vue.js 1.0的，因此不匹配。但是，它们确实工作得很好，让我使用

Vue

类型

此后，我开始使用Vue.js发行版（）附带的键入文件。我已经将它们包含在我的

~/Scripts/typings/vue

文件夹中的项目中，但我的项目不理解它们

据我所知，这些键入文件可能是通过导入/导出来使用的？我使用的其他类型文件没有这种工作方式，因此我不确定如何正确地实现这些类型，以便它们在我的项目中全局可用

我有一个示例解决方案，显示了我尝试过的一个示例-

下面是我的

脚本

文件夹的结构：

\u参考文献.d.ts内容

/// <reference path="typings/vue/index.d.ts" /> 

namespace Test
{
    export class MyClass
    {
        public initialize()
        {
            var component = this.getComponent();
        }

        private getComponent(): Vue.Component
        {
            return Vue.component("test", {
                template: "<div></div>",
                props: ["test"],
                methods: {
                    onClick: () =>
                    {
                    }
                }
            });
        }
    }
}

但是，这只允许我访问根

Vue

类，因此我无法将

Vue.Component

指定为类型，或指定

Vue

以外的任何其他命名空间

其他信息：
Visual Studio 2015
Vue.js版本2.2.1
TypeScript版本2.1

根据@unional的建议更新 以下是我的新文件夹结构：

不再使用_references.d.ts，而是使用tsconfig.json。tsconfig.json文件包含以下内容：

{
    "compilerOptions": {
        "sourceMap": true
    },
    "include": [
        "../../**/*.ts"
    ]
}

以上操作将导入项目中的所有.ts文件。

~/Scripts/typings/custom typings/vue.d.ts

文件包含以下内容：

export * from "vue"
export as namespace Vue

{
    "dependencies": {
        "vue": "^2.2.1"
    }
}

+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts

Visual Studio告诉我

找不到模块“vue”

，因此我的键入仍然无法正常工作，尽管tsconfig.json文件可以正常工作（我添加了jQuery键入以验证这一点）

这里有一个更新解决方案的链接，显示了新问题：

与NPM 下拉到应用程序根目录中的命令行以使用NPM和TypeScript命令行界面

• 如果您还没有package.json文件，那么首先运行

  npm init

• 然后要安装vue.js，请运行

  npm install--save vue

• 要安装其类型，请运行npm安装--save dev@types/vue
• 如果还缺少tsconfig.json文件，请运行

  tsc--init

• 此时，您将能够通过运行

  tsc

  进行构建

无NPM 不使用NPM是非常规的，需要大量的手工工作。以下是其中一种手动方法

下载VueJS 2.1.1。提取档案后

将

dist

的内容放入

Scripts/vuejs

目录

将

typings

的内容放入

typings/vuejs

目录

将tsconfig.json文件添加到项目的根目录中，以保存此内容 tsconfig.json

{
  "compilerOptions": {
    // ....... other properties omitted      
    "typeRoots": [
      "./typings/"
    ],
    "target": "es5",
    "lib": ["es2015", "dom", "es2015.promise" ]
  }
}

然后，在将使用Vue的文件顶部添加相对导入语句

import * as Vue from "../typings/vuejs";

interface MyComponent extends Vue {
  message: string
  onClick (): void
}

export default {
    template: '<button @click="onClick">Click!</button>',
    data: function () {
        return {
            message: 'Hello!'
        }
    },
    methods: {
        onClick: function () {
            window.alert(this.message)
        }
    }
}

从“./typings/vuejs”导入*作为Vue；
接口MyComponent扩展了Vue{
消息：string
onClick（）：void
}
导出默认值{
模板：“单击！”，
数据：函数（）{
返回{
留言：“你好！”
}
},
方法：{
onClick:function（）{
window.alert（this.message）
}
}
}

例子 下面是WebApplication1示例的更新版本

另见：

---

由于错误发生在编译时，因此没有大问题。您可以使用此插件从

此外，代码应如下所示：

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({

  template: ''
})
export default class MyComponent extends Vue {



}

---

等等。您仍然可以在cshtml文件中使用vuejs。

我可以使用@unional评论中的信息，但有一点小小的变化：

我将此添加到我的custom-vue.d.ts文件中：

import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue; 

此外，我还必须创建一个包含以下内容的

package.json

文件：

export * from "vue"
export as namespace Vue

{
    "dependencies": {
        "vue": "^2.2.1"
    }
}

+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts

最后，我需要在与我的

tsconfig.json

文件相同的范围内添加一个

node\u modules

文件夹。它具有以下特点：

export * from "vue"
export as namespace Vue

{
    "dependencies": {
        "vue": "^2.2.1"
    }
}

+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts

package.json

simple包含：

{
  "typings": "types/index.d.ts"
}

现在一切正常

编辑
或者，我发现我可以通过将

tsconfig.json

的

moduleResolution

属性设置为

Classic

来避免整个

node\u模块。完成此操作后，我将我的
自定义vue.d.ts
导入更改为如下所示：

import * as _Vue from "./index";

declare global
{
    export class Vue extends _Vue
    {

    }
}

import * as _Vue from "../vue/index";

我在这里的答案可能就是你想要的：@unional我似乎无法让你的建议发挥作用。我没有tsconfig.json文件。也许你可以用我在帖子中链接的示例解决方案来演示它？也许值得创建一个。使用
///我明白了。看看你的项目，它是C#和一些TS。已经有一段时间没有在VS和C#上工作了，所以我不确定VS是如何配置的。也许这样行吗？同样在这里：我们在项目中不使用npm，所以不幸的是这不是一个解决方案me@jake哇！我很抱歉。@Jake你确实使用了NPM：啊，是的，对不起-我在你链接的项目中使用了，但不是在我需要解决这个问题的所有项目中使用（此答案不正确。npm安装的“类型”是一个“存根”，您会收到一条警告：“@types”/vue@2.0.0：这是vuejs（）的存根类型定义。vuejs提供自己的类型定义，因此您不需要安装@types/vue！”干得好。我想到你可以在本地使用NPM，然后将其输出和安装添加到版本控制。这与你手动完成的工作非常接近。另外，为了了解
节点单元模块发生了什么事情，你可以在这里阅读关于模块解析的文章：@ShaunLuttin是的，这很有趣。我实际上已经重新修改了通过使用
Classic
module分辨率，再次尝试避免节点模块的问题。我编辑了我的答案以反映这一点。