在旧项目中使用 vue 导入答案

【问题标题】：import with vue in an old project在旧项目中使用 vue 导入
【发布时间】：2021-04-20 08:14:52
【问题描述】：

我尝试用一些 vue 升级我的一些“旧项目”界面元素。

我的旧项目是一个没有框架的 php/html 项目。我使用 vue-cli 对图表或网格的不同组件进行了一些测试。

现在我想将此组件集成到我的旧项目中，但组件的“导入”不起作用。

例如，在一个页面中，我需要一个 ag-grid，所以我得到了 ag grid vue。但基本 import { AgGridVue } from 'ag-grid-vue'; 不起作用，因为他无法获得“ag-grid-vue”。它不是一个 vue 应用，它是来自 html 的 vue。

如果我使用 import { AgGridVue } from '/component/ag-grid-vue/main.js';，那就是“请求的模块 './component/ag-grid-vue/main.js' 不提供名为 'AgGridVue' 的导出”

如果我使用import AgGridVue from '/component/ag-grid-vue/main.js';，那就是“请求的模块 './component/ag-grid-vue/main.js' 不提供名为 'default' 的导出”

我不需要在我的不同页面中使用相同的组件。所以问题是：如何导入我的 vue 组件？

【问题讨论】：

标签： html vue.js vue-component

【解决方案1】：

如果您在旧项目中没有使用 vue，那么您将无法使用它。或者，您可以使用Vue cdn，也可以使用ag Grid cdn。

https://www.jsdelivr.com/package/npm/@ag-grid-community/vue

html 文件

<body>
  <div id="app">
    <!-- I think you can put the component here -->
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ag-grid-community/vue@25.0.0/main.min.js"></script>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

您可以从这里探索更多。

【讨论】：