Question

我将CDN用于VUEjs，因为我不想使用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>

Answer 1

很明显，浏览器本身不支持.vue文件

有2种可能的解决方案：

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

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

1 个答案: