我是Vue.js的新手。我正在尝试构建一个没有cli的项目。我已经尝试将CDN添加到index.html中。并创建一个app.js文件，将其添加到index.html中，效果良好。
然后我看了一些youtube和教程，组件的想法开始出现，我正试图将单个文件组件添加到项目中。
但我不知道如何构建文件，使其能够与组件一起工作。以下是我到目前为止得到的信息，有人能告诉我这里出了什么问题吗
如有任何建议，我们将不胜感激。非常感谢。
Oren
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>new Vue project</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs需要一个构建步骤，建议使用
当使用没有构建步骤的标准Vue并安装到DOM模板中时，它的优化程度要低得多，因为：
- 我们必须将Vue模板编译器运送到浏览器(13kb额外大小(
- 编译器必须从已经实例化的DOM中检索模板字符串
- 然后编译器将字符串编译为JavaScript呈现函数
- 然后Vue用render函数生成的新DOM替换现有的DOM模板
如果您仍然不想要构建步骤，请查看petite vue