我是 Vue.js 的新手。我不喜欢使用 cli，所以我使用 CDN 来处理所有事情，但陷入了一些未知的问题。我用谷歌搜索了很多东西，但无法理解发生了什么。任何帮助将不胜感激。
这是我的index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="8-utf" />
<meta name="author" content="Yash Gaikwad">
<meta name="description" content="">
<meta name="keyword" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css"> <!--Stylesheet-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet"> <!--Google Fonts-->
<script src="https://www.w3schools.com/lib/w3.js"></script> <!--W3.Css-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js" type="text/babel"></script><!--Bable Hosting-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--Vue Hosting-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!--Vue Router-->
</head>
<body>
<div id="app">
</div>
<script src="script.js"></script> <!--Javascript-->
</body>
</html>
这是我的 script.js
import app from "./main.vue"
new Vue({
el: "#app",
data: {
},
methods: {
},
render: h => h(app)
});
这是我的 main.vue(根组件)
<template>
<app-header></app-header>
<app-footer></app-footer>
</template>
<script>
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";
export default {
components: {
"app-header": Header,
"app-footer": Footer
}
}
</script>
<style scoped>
</style>
在我看来，导入 main.vue 会导致错误。那里出了问题。
这是我从 ff 和 chrome 收到的错误
Uncaught SyntaxError: Cannot use import statement outside a module
SyntaxError: import declarations may only appear at top level of a module
非常感谢大家。
最佳答案
.vue 不是浏览器可以理解的文件类型。如果您想在不使用任何 CLI 工具的情况下构建 VueJS 应用程序，您必须了解 ES6 模块并了解并非所有浏览器都支持您的应用程序。
像 Webpack 这样的 CLI 工具可以将您的 JavaScript 和 Vue 代码转换为兼容更多浏览器的 JavaScript 代码，缩小您的代码(使下载的文件大小更小)等。它还使您更容易在代码中使用第三方包并保持更新。
使用 Webpack 等 CLI 工具或 VueCLI从长远来看，Vue 应用程序将使您的生活变得更加轻松，并且是整个行业的标准做事方式。
关于javascript - 如何仅在 Vue 中使用 CDN 脚本...无法导入组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60666122/