没有 webpack/npm/yarn 的 Vue 组件

Question

没有 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/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>

Run Code Online (Sandbox Code Playgroud)

还有我的 app.js：

import { Btn } from 'mdbvue'

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

Run Code Online (Sandbox Code Playgroud)

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

谢谢

Answer 1

Vin*_*nie 7

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

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

有一个 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 < 33、FireFox < 29、...除外）
网络服务器（可选）...

这个怎么运作

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 上报告。

致谢：弗兰克·弗赖堡

归档时间：	7 年，9 月前
查看次数：	2768 次
最近记录：	5 年，11 月前