不带webpack / npm / yarn的Vue组件

回声

我知道使用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/[email protected]/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的情况下使它正常工作？

谢谢

文妮

可能为时已晚，但是我相信总比没有好！

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

有一个js插件，您可以尝试一下。（尽管当我们迁移到满足我们要求的AngularJS + TypeScript + Visual Studio 2017时我没有使用它）

插件：http-vue-loader

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

范例：在Codepen点io / cscolabear / project / editor / AQLQLO

要求

Vue.js 2（编译器和运行时）
es6-promise（可选，但IE，Chrome <33，FireFox <29，...除外）
网络服务器（可选）...

这个怎么运作

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

笔记

http-vue-loader的目的是无需任何编译步骤即可快速测试.vue组件。但是，对于生产而言，我建议将webpack模块捆绑程序与vue-loader一起使用，webpack-simple是您应该查看的一个很好的极简Webpack配置。顺便说一句，另请参阅为什么Vue.js不支持templateURL。

警告

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

学分：弗兰克·弗赖堡

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。