Javascript 如何仅在Vue中使用CDN脚本。。。无法导入组件？_Javascript_Vue.js_Vuejs2_Vue Component_Vue Router

Javascript 如何仅在Vue中使用CDN脚本。。。无法导入组件？

javascript vue.js vuejs2

Javascript 如何仅在Vue中使用CDN脚本。。。无法导入组件？,javascript,vue.js,vuejs2,vue-component,vue-router,Javascript,Vue.js,Vuejs2,Vue Component,Vue Router,我是Vue.js的新手。我不喜欢使用cli，所以我什么都用CDN，但遇到了一些未知的问题。我在谷歌上搜索了很多东西，但不明白发生了什么。任何帮助都将不胜感激这是我的index.php <!DOCTYPE html> <html> <head> <meta charset="8-utf" /> <meta name="author" content="Yash Gaikwad">

我是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>

这是我的main.vue（根组件）

非常感谢各位。

始终导入语句应位于文件顶部，您使用的是模板，然后是导入

在main.vue中，将脚本块置于顶部，然后将模板置于顶部。vue不是浏览器可以理解的文件类型。如果您想在不使用任何CLI工具的情况下构建VueJS应用程序，您必须了解ES6模块，并了解并非所有浏览器都支持您的应用程序

Webpack等CLI工具将JavaScript和Vue代码转换为与更多浏览器兼容的JavaScript代码，缩小代码（使下载的文件变小）等。它还使您更容易在代码中使用第三方软件包，并使其保持更新

从长远来看，使用Webpack或Vue应用程序等CLI工具将使您的生活更加轻松，这是整个行业的标准做法。

使用Vue CDN时，浏览器无法理解

.Vue

扩展，因此请将其替换为

.js

或通过CLI加载Vue

接下来，在JS（vue）文件中，删除模板、样式和脚本标记，并使其如下所示：

//header.js
export default {
   data: () => ({
   }),

   template:`<h1>Header</h1>`
}

//footer.js
export default {
   data: () => ({
   }),

   template:`<h1>Footer</h1>`
}

//header.js
导出默认值{
数据：（）=>({
}),
模板：`标题`
}
//footer.js
导出默认值{
数据：（）=>({
}),
模板：`Footer`
}

接下来，将类型模块添加到脚本标记中，如下所示：

<script type="module">
import Header from "./components/header.js";
import Footer from "./components/footer.js";

export default {
    components: {
        "app-header": Header,
        "app-footer": Footer
    }

}
</script>


从“/components/Header.js”导入标题；
从“/components/Footer.js”导入页脚；
导出默认值{
组成部分：{
“应用程序标题”：标题，
“应用程序页脚”：页脚
}
}

您还可以将ES6

import

语句替换为ES5

require

如果您不想使用

type=“module”

在浏览器中导入模块，则需要使用

“

。根据，Vue单文件组件只能与Babel或Browerify等构建工具一起使用。但是，在

http vue loader

的帮助下，可以在没有模块生成器的情况下使用SFCs：请参阅我是vue.js的新手。我不喜欢使用cli-在跑步之前先学会走路。CLI是使用Vue 2的推荐方式。不使用它也可以使用它，但这需要一定的熟练程度，而且您将无法使用很多第三方Vue LIB，因为它们应该与CLI一起使用。

Uncaught SyntaxError: Cannot use import statement outside a module

SyntaxError: import declarations may only appear at top level of a module

//header.js
export default {
   data: () => ({
   }),

   template:`<h1>Header</h1>`
}

//footer.js
export default {
   data: () => ({
   }),

   template:`<h1>Footer</h1>`
}

<script type="module">
import Header from "./components/header.js";
import Footer from "./components/footer.js";

export default {
    components: {
        "app-header": Header,
        "app-footer": Footer
    }

}
</script>