时间戳

首页 > 解决方案 > 没有 webpack/npm/yarn 的 Vue 组件

vue.js - 没有 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>

还有我的 app.js：

import { Btn } from 'mdbvue'

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

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

谢谢

标签： vue.jsvuejs2

解决方案

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

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

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

致谢：弗兰克·弗赖伯格

推荐阅读