如何在没有 WebPack 构建过程的 HTML 页面中使用 VueJS .vue 组件?

How to use a VueJS .vue component in a HTML page without a WebPack build process?(如何在没有 WebPack 构建过程的 HTML 页面中使用 VueJS .vue 组件?)

问题描述

我正在为旧版服务器渲染项目创建一个页面.

I am creating a page for a legacy server rendered project.

在它的一个页面上，我需要添加一些动态".然后我导入 vuejs CDN 脚本并创建了一个内联 vue 对象

On one of its page I need to add some "dynamic". Then i import the vuejs CDN script and created a inline vue object

var v = new Vue(... 

但是有一个.vue 组件我非常喜欢并且很想将其添加到页面.但是好像这个组件只能通过WebPack导入构建过程来添加.

But there is a .vue component that I like very much and I would like to add it to the page. But it seems that this component can only be added by a WebPack import and build process.

如何在没有 WebPack 构建过程的情况下在我的 html 页面中使用这个组件?这可能吗?

How can I use this component in my html page without WebPack build process? Is that possible?

推荐答案

您可以使用 poi，如中所述这篇文章:

You can use poi as described in this article:

poi build Component.vue --format cjs

您还可以使用 vue-cli 3(测试版)和必要的全局插件:

You can also use vue-cli 3 (beta) and the necessary global addon:

npm install -g @vue/cli
npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli
yarn global add @vue/cli-service-global

vue build Component.vue

使用 vue build --help 获取选项和帮助文本.但请注意，这会生成带有应用程序和供应商捆绑包(包括 vue)的生产缩小代码.

Use vue build --help to get options and the help text. But be aware that this generates production minified code with an app and vendor bundle (which includes vue).

另请参阅 this old answer 对类似问题，提到使用以前的 build 命令在 vue-cli 2.8.x

See also this old answer to a similar question, mentioning the use of the previous build command in vue-cli 2.8.x

这篇关于如何在没有 WebPack 构建过程的 HTML 页面中使用 VueJS .vue 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！