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

标签 javascript vue.js vuejs2 vue-component

我正在为遗留服务器呈现项目创建页面。

在其中一个页面上我需要添加一些“动态”。然后我导入 vuejs CDN 脚本并创建一个内联 vue 对象

var v = new Vue(... 

但是有一个.vue component我非常喜欢,我想将它添加到页面中。但似乎只能通过 WebPack 导入和构建过程添加此组件。

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

最佳答案

您可以使用 poithis article 中所述:

poi build Component.vue --format cjs

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

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 获取选项和帮助文本。 但请注意,这会生成带有应用程序和 vendor bundle (包括 vue)的生产缩小代码。

另见 this old answer一个类似的问题,提到使用以前的build vue-cli 2.8.x

中的命令

关于javascript - 如何在没有 WebPack 构建过程的情况下在 HTML 页面中使用 VueJS .vue 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49906031/

相关文章:

javascript - 如何获得 translate3d 的绝对值?

javascript - 如何使用 Javascript 隐藏和显示基于特定 div 类基的多个 div?

vue.js - 如何在 Vuetify 菜单中突出显示所选项目?

vue.js - 将函数作为属性传递给 Vue 组件

javascript - 在 vue 中构建时添加自定义 javascript 部分

javascript - 尝试合并一个非常简单的灯箱。我如何保持滚动中心?

vue.js - 悬停时更改自定义属性 || VUEJS

javascript - 使用 vue.js 根据最多投票排列数据(评论)

vue.js - Nuxt js 上的 vue-awesome-swiper(swiperjs) 不能在生产环境中工作,但可以在开发环境中工作

vue.js - 如何动态设置Veutify的对话框组件 'persistent'属性