如何将文件 vuejs 组件导入 index.html？

Question

我正在为 VUEjs 使用 CDN，因为我不想使用 webpack 或从服务器呈现。

index.html 和 test-component.vue 在同一个文件夹中

我的index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VUE</title>

<!-- vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

</head>
<body>

<div id="app">

  <!--HERE I WANT TO USE MY COMPONENT-->
  <comp></comp> 
</div>

<script>

  //TRIED TO IMPORT MY COMPONENT
  import comp from './test-component.vue';

  const app = new Vue({
    el: '#app',
  });

</script>


</body>
</html>

我的测试-component.vue 文件：

<template>
  <h1>im a component</h1>
</template>

<script>
  console.log('testing component');
</script>

Answer 1

显然浏览器本身不支持 .vue 文件

有 2 种可能的解决方案：

使用 javascript 捆绑器（如 webpack or parcel）
使用http-vue-loader

如何将文件 vuejs 组件导入 index.html？

how can I import a file vuejs component into index.html?

html

javascript

frontend

cdn

vue.js