如何在 vue 中初始化 npm 包答案

【问题标题】：How to initialize npm package in vue如何在 vue 中初始化 npm 包
【发布时间】：2021-09-12 21:20:33
【问题描述】：

我尝试使用 npm 在 vue 中使用 v-mask 包。我按照文档所述运行npm install v-mask，但是我应该在哪里输入代码进行初始化？我试图把它放在 main.js 文件中：

import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
Vue.use(VueMask);

createApp(App).mount('#app')

但得到一个错误'Vue'未定义。我做错了什么？

【问题讨论】：

您尝试将 Vue 2 插件与 Vue 3 一起使用。它不起作用。您可能会注意到第三方 Vue 2 插件要么在主页上提及 Vue 3 版本，要么在 issue 中讨论 Vue 3。

标签： javascript node.js vue.js npm npm-package

【解决方案1】：

尝试将应用保存在变量中并为应用执行use

import { createApp } from 'vue'

import App from './App.vue'
import VueMask from 'v-mask'

const app = createApp(App)
app.use(VueMask)
app.mount('#app')

【讨论】：

现在它显示空白页和控制台给出和错误：“未捕获的类型错误：vue__WEBPACK_IMPORTED_MODULE_4__.default is undefined”
@ligwol 好的，尝试保留来自createApp 的返回值，然后使用use 我更新了原始消息
@ligwol hmmmm，Estus Flask 是对的。对于Vue3，它不是不兼容的库。但是您可以尝试像这里一样迁移它alvarosaburido.dev/blog/…

【解决方案2】：

v-mask 是为 Vue 2 构建的，因此您不能在 Vue 3 中使用它（除非您使用 migration build，但这并不是真正适用于第三方插件的）。

考虑使用maska，这是一个支持 Vue 3 的掩码库：

npm i -S maska

示例用法：

import { createApp } from 'vue'
import App from './App.vue'
import Maska from 'maska'

createApp(App).use(Maska).mount('#app')

demo

【讨论】：