在带有 Typescript 的 Vue 中使用 Bootstrap-Slider答案

【问题标题】：Using Bootstrap-Slider in Vue with Typescript在带有 Typescript 的 Vue 中使用 Bootstrap-Slider
【发布时间】：2018-01-11 11:48:27
【问题描述】：

我正在尝试使用由 TypeScript 和 ASP 网络核心构建的 vue 后端在我的页面上创建一个 boostrap-slider。我在 ASP.NET Core 中使用带有 TypeScript 的 Vue.js 标准模板。

我已经用

导入了 boostrap-slider 类型

npm install --save @types/bootstrap-slider

当我尝试时

import { Slider } from 'bootstrap-slider';

我得到了错误

[at-loader] 中的错误 ./ClientApp/components/mycomponent/mycomponent.ts:3:24 TS2306：文件 '~~redacted~~/node_modules/@types/bootstrap-slider/index.d.ts' 不是模块。

【问题讨论】：

标签： asp.net typescript vue.js

【解决方案1】：

要实现您的目标，您可以参考此 MSDN 帖子。此示例演示将帮助您在 ASP.NET Core 中使用 TypeScript 设置 Vue.js。完整描述 setup Vue.js with TypeScript in ASP.NET Core.

示例源代码： Vue.js with TypeScript in ASP.NET Core

要实现Boorstrap-Slider，可以使用vue-bootstrap-slider 更多详情见链接：vue-bootstrap-slider

【讨论】：

谢谢，我使用的是默认模板。为了清楚起见，我只是编辑了主要问题。
我让它与'vue-bootstrap-slider'一起工作。它没有类型定义，因此它仅适用于 'tsconfig.json' 中的标志 '"noImplicitAny": false '
然而，在页面'' 似乎没有渲染。

【解决方案2】：

发生错误是因为类型定义没有导出模块，所以你不能导入它。他们这样做是因为您可以通过 jquery 调用滑块函数：

var someSlider = $("input.slider").slider();
var value = someSlider.slider('getValue');

这些函数的类型是正确的，因为即使没有任何导入也能找到类型。

【讨论】：

那你建议我不要把bootstrap-slider加到vue客户端app里，直接加到页面上？
如果您需要访问 TypeScript 代码中的控件，请添加类型 (npm install --save-dev @types/bootstrap-slider)，只是不要尝试导入它。相反，使用 jQuery ($(..)) 来获取对控件的引用，然后随心所欲地使用它。
我的建议对你有用吗？可以这样标记吗？