使用jquery ui和时间选择器与vue

Question

我试图用jquery ui设置vue cli，但是无法弄清楚如何使用jquery ui组件。我需要加载以下js文件

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js

和css文件

https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css

使时间戳工作。这是一个codepen链接，我测试了它的功能。 https://codepen.io/cksachdev/pen/EJgGVR

有关如何使用vue-cli / webpack配置加载这些内容的任何建议。

这是我到目前为止所尝试的：

 module: {
    loaders: [
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' },
    ],
  },
  plugins: [
    // eslint-disable-next-line no-undef
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      'jquery-ui': '../../../node_modules/jquery-ui/ui/widgets',
      'jquery-ui-css': '../../../node_modules/jquery-ui/../../themes/base',
    },
  },

Answer 1

---

---

编辑2：我继续写了一个演示项目，你可以镜像来完成这个..

View the demo here

View the source code/repo here

再次，不知道你为什么要这样做，但^那是^（另一个）解决方案..

---

---

---

您可以在'index.html'文件（public - > index.html）中添加这些脚本和css文件，并像这样使用它：

编辑1：非常重要的是要注意你没有理由需要导入（相当大的）jQuery甚至使用jQuery。 Vue生态系统有很多现有选项可供选择。

vue2-timepicker和Vuetify timepicker（Vuetify更像是一个完整的预先设计的组件库）..

[Qazxswpoi]

CodePen mirror

/* TIMEPICKER COMPONENT */
const VueTimepicker = {
  template: "#vue-timepicker",
  computed: {
    id() {
      // give the component a unique id/name
      return "time-picker-" + this._uid;
    }
  },
  mounted() {
    $("#" + this.id).timepicker({
      timeFormat: "HH:mm:ss:l"
    });
  }
};

/* VUE APP */
new Vue({
  el: "#app",
  components: {
    VueTimepicker,
  }
})