如何在 Vue CLI 中使用静态 JS？

Question

我正在创建一个 Bootstrap Vue 应用程序（使用 Vue CLI 构建），并且有一个 Javascript 我希望能够利用的库：https://nadchif.github.io/html-duration-picker.js/。我尝试将文件放在 /assets 中，然后在 App.vue (import './assets/html-duration-picker.min') 的脚本部分使用 import，但我无法让脚本工作，不知道为什么（没有任何反应，没有持续时间选择器显示）。作为替代方案，我认为我可以简单地以传统方式在 index.html 的头部加载库。但我不清楚资产目录中文件的 src URL 应该是什么。还是应该放在assets/public目录下？

Answer 1

老实说，你还不如用npm package，如果你用的是Vue CLI，省去很多麻烦：

npm i html-duration-picker

DOCUMENTATION.md 是安装说明所在的位置。虽然没有针对 Vue 的说明，但有针对 Angular 的说明，并且很容易让它在 Vue 上工作。

只需导入 html-duration-picker:

import * as HtmlDurationPicker from "html-duration-picker";

...并在 mounted() 中初始化它：

mounted() { HtmlDurationPicker.init() }

您还可以运行 HtmlDurationPicker.refresh();“更新动态加载的输入框”。如果您使用 v-model 将框的值绑定到从任一端更新良好的数据属性，我认为这是没有必要的。

这是一个sandbox您可以查看更多信息。

如果您确实想从 assets 手动导入它，那么您所做的可能没问题（尽管您可能需要将 .js 添加到然后路径结束）；你只需要初始化它。