没有 webpack/npm/yarn 的 Vue 组件

Posted 2023-02-23

技术标签:

【中文标题】没有 webpack/npm/yarn 的 Vue 组件【英文标题】：Vue components without webpack/npm/yarn 【发布时间】：2019-01-18 08:52:33 【问题描述】：

我知道使用 vue-cli 导入组件非常简单。但是，是否可以将组件导入不使用 vue-cli 的 vue 项目？

例如我的 index.html 看起来像：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue components</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">  </script>
    <script src="https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/archive/mdbvue.js">  </script>
  </head>
  <body>
    <div id="vue-app">
      <Btn color="danger">Test Button</Btn>
    </div>
  </body>
</html>

还有我的 app.js：

import  Btn  from 'mdbvue'

new Vue(
  el: '#vue-app',
  components: 
    Btn
  ,
  data:

如果它不像我的示例那么简单，是否有一个教程可以找出如何在不使用 npm 或 yarn 的情况下使其工作？

谢谢

【问题讨论】：

看看async components documentation，特别是import() 语法的使用。后者应该可以帮助您将组件动态加载到 Vue 应用程序中。 【参考方案1】：

可能有点晚了，但我相信迟到总比没有好！！

我遇到了类似的情况，我不想使用任何构建工具，因为我觉得那些构建工具有点矫枉过正。

有一个 js 插件，你可以试试。（不过，当我们迁移到 AngularJS + TypeScript + Visual Studio 2017 时，我没有使用它——这符合我们的要求）。

插件：http-vue-loader

链接：https://github.com/FranckFreiburger/http-vue-loader

示例：在 codepen dot io /cscolabear/project/editor/AQLQLO 上

要求

Vue.js 2（编译器和运行时） es6-promise (可选，除了 IE, Chrome 网络服务器（可选）...

工作原理

http请求vue文件在文档片段中加载 vue 文件处理每个部分（模板、脚本和样式）向 Vue.js（异步组件）返回一个承诺然后 Vue.js 编译并缓存组件

备注

http-vue-loader 的目的是无需任何编译步骤即可快速测试 .vue 组件。但是，对于生产，我建议使用带有 vue-loader 的 webpack 模块捆绑器，webpack-simple 是一个很好的极简 webpack 配置，你应该看看。顺便说一句，看看为什么 Vue.js 不支持 templateURL。

警告

由于 Google Chrome 和 Internet Explorer 中缺少合适的 API，该部分的语法错误仅在 FireFox 上报告。

致谢：Franck Freiburger

【讨论】：

是否也允许变量在组件之间相互交互？请注意，Vue3 支持也可通过github.com/FranckFreiburger/vue3-sfc-loader获得【参考方案2】：

import Btn from 'mdbvue'

根据您发布的代码，您已经使用过 es6 模块。所以至少你应该使用 webpack 和 babel-loader，否则浏览器将不支持上面的语法。

【讨论】：

对不起，我的意思是说这是我在 vue-cli 中导入的方式，但我想要一种在没有 vue-cli 的情况下类似的方式

以上是关于没有 webpack/npm/yarn 的 Vue 组件的主要内容，如果未能解决你的问题，请参考以下文章

vue.js不通过webpack/npm/yarn加载单文件组建

导入没有 .vue 扩展名的 *.vue 文件时出现以下错误？