Javascript 如何使用webpack从npm build生成的文件注册Vue插件

我使用Vue CLI和Vuetify设置了一个带有基本支架的新Vue项目，并通过树抖动消除了我不需要的任何组件。我只对包含Vuetify组件的供应商文件感兴趣（可能是区块供应商…dist/js和dist/css下的文件）

我的项目中的HTML包含这些供应商文件，但我不知道如何向Vue注册插件。例如，在我的应用程序的JS文件中：

Vue.use(vuetify); // where do I get the vuetify plugin object from?
new Vue({...})

我想说清楚，我对npm构建生成的

app

JS/CSS文件不感兴趣。我只是使用了整个设置，这样我就可以手动挑选我想要的Vuetify组件并创建必要的JS/CSS

如果我在我的HTML中包含来自CDN的全脂Vuetify脚本/css，例如

…然后我可以在我的应用程序JS中初始化Vuetify，如：

new Vue({
    el: '#my-app',
    vuetify: new Vuetify(),
})

---

…因此，我希望了解的是，是否有一种方法可以使用Vue CLI生成的供应商JS文件而不是完整的CDN版本来初始化Vuetify。如果在使用供应商构建JS文件时尝试使用上述相同的初始化方法，则会出现错误

Vuetify未定义

，实际上有一种更惯用的方法使用Vue CLI创建库。您的

build

NPM脚本应该指定生成类型和导出仅安装特定vuetify组件的入口点（例如，

src/plugins/vuetify.js

）

例如，要创建仅安装（Vuetify 2.x中需要作为根组件）和组件的Vue插件，请执行以下操作：

运行以下命令以生成具有默认选项的Vue CLI项目：

npx @vue/cli create --default my-vuetify
cd my-vuetify

从项目的根目录运行此命令，将Vuetify添加到项目中（并在提示下选择默认预设）：

在

package.json

中编辑项目的

build

NPM脚本，以创建名为

MyVuetify

的库（这将是在

标记中导入库时设置的全局变量）：

//package.json
{
“脚本”：{
//之前：
“生成”：“vue cli服务生成”，
//之后：
“构建”：“vue cli服务构建--目标库--名称MyVuetify src/plugins/vuetify.js”，
}
}

在插件的输入文件中，导出一个

vuetify

函数，该函数构造一个新的

vuetify

实例：

//src/plugins/vuetify.js
从“Vuetify/lib”导入Vuetify
export const vuetify=options=>new vuetify（{…options}）

还导出一个

插件

对象，该对象包含一个

安装

函数，该函数仅指定感兴趣的Vuetify组件：

//src/plugins/vuetify.js
从“vuetify/lib”导入{VApp、VContainer、VBtn、VTextField}
导出常量插件={
安装（应用程序、选项）{
应用程序使用（Vuetify{
组成部分：{
//Vuetify 2.x要求'VApp'是根组件，因此'VApp'是根组件`
//需要导出，除非您喜欢它提供的消费者应用程序
瓦普，
VContainer，
VBtn，
VTextField，
},
…选项
})
}
}

运行此命令以生成库：

npm run build

用法 在库生成输出的

dist/demo.html

中，加载UMD脚本（

MyVuetify.UMD.js

），该脚本设置一个名为

MyVuetify

，包含生成输出的导出（在步骤4中定义）。还可以加载样式（

MyVuetify.css

），其中包含所用Vuetify组件的css

最后，创建一个

块，从

MyVuetify.plugin

安装插件，并使用

MyVuetify.vuetify（）初始化Vue应用程序的
vuetify
：


使用（MyVuetify.plugin）
新Vue({
vuetify:MyVuetify.vuetify（/*vuetify选项（例如，`theme`）*/），
})

下面是完整的
dist/demo.html
：


打招呼
使用（MyVuetify.plugin）
新Vue({
el:“#应用程序”，
vuetify:MyVuetify.vuetify（），
数据：（）=>({
名称：“”，
}),
方法：{
问候{
警报（`Hi${this.name.trim（）| |'there'}！`）
}
}
})

如果您使用vue cli添加了vuetify，那么这一切不是都为您完成了吗？我有一个不是使用cli创建的现有项目。我想将一些Vuetify组件集成到我的项目中。我所知道的获得所需组件选择的唯一方法是使用cli配置生成。我有来自构建的供应商输出文件，但我不知道如何使用它们。据推测，作为构建的一部分创建的虚拟应用程序文件以某种方式注册了Vuetify插件，但它已缩小/损坏，因此我无法理解它。为什么不能在其他非Vue CLI项目中设置Vuetify树抖动？@tony19我实际上没有为我的项目或包管理器使用任何构建工具。我只是将版本号添加到生成的Vuetify供应商文件中。虽然，作为一个替代解决方案，也许您可以提供一个如何设置的示例，或者为我指出正确的方向？这真的很好，感谢您提供了详细的示例。我没有意识到我必须告诉构建我正在创建一个库。
npm run build