Question

如何将 Library 导入到 Vue3 项目中

2021-08-06

5113

javascript vue.js vuejs3

有人能帮我将一个库导入到我的 vue3 项目中，以便我可以在所有组件中使用它吗？...

我正在尝试将“moments.js”导入到我的项目中

它是使用 npm 安装的
在我的“main.js”（条目）中，我像这样导入它：

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

但是当我尝试从另一个组件执行 console.log(this.moment) 时，我收到错误，提示 this.moment 不是函数

Answer 1

您可以在 created 生命周期钩子期间以类似的方式将 moment 作为全局属性绑定到 Vue 实例上。

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 函数随后可在模板上下文中或 Vue 实例在范围内可用的任何地方使用。

Answer 2

对于偶然发现这篇文章的任何人。我将代码更改为：

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

在其他组件内：

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

Answer 3

我会尝试使用这个包 https://www.npmjs.com/package/vue-moment 因为它是 vue 专用的。它是 moment 的包装器。查看 Readme 文件以获取说明。 https://github.com/brockpetrie/vue-moment

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

您的案例

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