Vue组件无需使用webpack/npm/yarn

Question

Vue组件无需使用webpack/npm/yarn

5

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

谢谢。

- echodrome

1

请查看异步组件文档，特别是import()语法的使用。后者应该帮助您动态加载Vue应用程序中的组件。 - miqh

2个回答

1

import { Btn } from 'mdbvue'

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

- 胡亚雄

抱歉，我的意思是这是我在vue-cli中导入的方式，但我希望能够找到一种类似的方法，在没有vue-cli的情况下进行导入。 - echodrome

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vinnie · Accepted Answer

我相信迟做总比不做好！！虽然可能有点晚了。

我遇到了类似的情况，我不想使用任何构建工具，因为我觉得那些构建工具有点过头了。你可以试试一个js插件。（我们已经转向AngularJS + TypeScript + Visual Studio 2017 - 这符合我们的要求）插件: http-vue-loader 链接：https://github.com/FranckFreiburger/http-vue-loader 示例：on codepen dot io /cscolabear/project/editor/AQLQLO 要求

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

它是如何工作的

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

注释

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

注意事项

由于Google Chrome和Internet Explorer中缺乏合适的API，因此在FireFox上才会报告“script”部分的语法错误。

致谢：Franck Freiburger