没有 webpack/npm/yarn 的 Vue 组件

Question

我知道用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 的情况下使它工作？

谢谢

Answer 1

import { Btn } from 'mdbvue'

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

Answer 2

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

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

有一个 js 插件，您可以尝试一下。（我还没有使用它，因为我们搬到了 AngularJS + TypeScript + Visual Studio 2017 - 这满足了我们的要求）。

插件：http-vue-loader

Link : 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 文件
处理每个部分（模板、脚本和样式）
return 对 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

没有 webpack/npm/yarn 的 Vue 组件

Vue components without webpack/npm/yarn

vue.js

vuejs2