如何将库导入 Vue3 项目

Question

could someone help me import a library to my vue3 project so that I can use it in all components?...

I'am trying to import 'moments.js' to my project

• Its installed with npm
• in my 'main.js' (entry) I import it like:

import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.use (moment)
app.mount("#app")

but when I try to console.log(this.moment) from another component I get errors that this.moment is not a function

Answer 1

You can bind moment as a global property on the Vue instance by during the created lifecycle hook in the like manner.

const { createApp } = require('vue');
import App from "./App.vue";
import moment from 'moment';

const MomentPlugin = function (Vue, options) {
  Vue.mixin({
    created: function () {
      this.moment = moment
    }
  })
}

const app = createApp(App)
app.use(MomentPlugin).mount("#app");

moment function is then available in template context or anywhere the Vue instance is available in scope.

Answer 2

For anyone stumbling onto this post. I changed the code to:

import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.provide("moment", moment)
app.mount("#app")

inside other components:

export default {
   inject: ["moment"],
// Other code can now use "moment"
}

Answer 3

app.use() is for adding Vue plugins to the app. It should be possible to convert Moment.js to a plugin - see "Writing a plugin" in the documentation but it shouldn't be necessary.

You can just import moment.js in any component where you want to use it and the bundling process will make sure that the code is not duplicated anywhere.

Answer 4

I would try using this package https://www.npmjs.com/package/vue-moment as it is vue-specific. It is a wrapper for moment. Check the Readme file also for instructions. https://github.com/brockpetrie/vue-moment

import Vue from 'vue'
import VueMoment from "vue-moment"
Vue.use(VueMoment));

Your case

import { createApp } from "vue"
import App from "./App.vue"
import VueMoment from "vue-moment"
const app = createApp(App)
app.use (VueMoment)
app.mount("#app")

Answer 5

You can use moment like this in any component.

methods: {
  moment: function () {
    return moment();
  }
},