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

【问题标题】：how can I import a file vuejs component into index.html?如何将文件 vuejs 组件导入 index.html？
【发布时间】：2020-08-18 02:56:08
【问题描述】：

我正在为 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>

我的 test-component.vue 文件：

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

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

【问题讨论】：

如果你在不同的组件文件中分离组件，你将需要使用 vue-loader 为你编译这些 vue 组件的 webpack。在我看来，你必须设置构建过程

标签： javascript html vue.js frontend cdn

【解决方案1】：

显然 .vue 文件不被浏览器原生支持

有两种可能的解决方案：

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

【讨论】：

但是 .vue sintax 只是 html
不是。它是的组合