如何将库导入 Vue3 项目答案

【问题标题】：How to import Library into Vue3 project如何将库导入 Vue3 项目
【发布时间】：2021-10-13 18:57:30
【问题描述】：

有人可以帮我将一个库导入我的 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 不是函数的错误

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

您可以在 created 生命周期挂钩期间以类似方式将时刻绑定为 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 实例在范围内可用的地方使用。

【讨论】：

这确实为我节省了几个小时的工作时间，非常感谢！

【解决方案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"
}

【讨论】：

【解决方案3】：

app.use() 用于将 Vue 插件添加到应用程序中。应该可以将 Moment.js 转换为插件 - 请参阅 "Writing a plugin" in the documentation，但这不是必需的。

您可以将 moment.js 导入任何您想使用它的组件中，并且捆绑过程将确保代码不会在任何地方重复。

【讨论】：

感谢您的回答。我将在很多组件中使用这个库，将它导入每个组件似乎是一个糟糕的方法。
@babis95 这正是要走的路。它使每个模块彼此独立工作。您不必假设 moment 神奇地存在，因为应用程序将它插入到环境中的某个地方 - 您在每个使用它的脚本文件中显式导入它。

【解决方案4】：

我会尝试使用这个包 https://www.npmjs.com/package/vue-moment 因为它是特定于 Vue 的。它是暂时的包装。还要检查自述文件以获取说明。 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")

【讨论】：

感谢您的回答。我尝试导入 vue-moment，但出现“在非对象上调用 Object.defineProperties”错误。我尝试了我当前的项目以及一个新创建的项目。

【解决方案5】：

您可以在任何组件中使用这样的时刻。

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

【讨论】：

当我在app.vue 中尝试您的解决方案时，我当前的导入我得到'moment` 没有定义