gpt4 book ai didi

vue.js - 没有 webpack/npm/yarn 的 Vue 组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:54:59 24 4
gpt4 key购买 nike

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

谢谢

最佳答案

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

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

有一个 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(异步组件)返回 promise
  • 然后 Vue.js 编译并缓存组件

注意事项

http-vue-loader 的目的是在没有任何编译步骤的情况下快速测试 .vue 组件。但是,对于生产,我建议使用带有 vue-loader 的 webpack 模块 bundler ,webpack-simple 是一个很好的极简主义 webpack 配置,你应该看看。顺便说一句,另请参阅为什么 Vue.js 不支持 templateURL。

警告

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

致谢:Franck Freiburger

关于vue.js - 没有 webpack/npm/yarn 的 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51791597/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com