Vue.js vue JS组件导入（不带网页包）
我正在构建一个烧瓶应用程序和jinja2模板。因此，我计划根据我的要求使用Vue功能asn，而不是单页应用程序 我正在尝试使用vue转盘，但无法导入它 这是我的索引html代码Vue.js vue JS组件导入（不带网页包）,vue.js,flask,Vue.js,Flask,我正在构建一个烧瓶应用程序和jinja2模板。因此，我计划根据我的要求使用Vue功能asn，而不是单页应用程序 我正在尝试使用vue转盘，但无法导入它 这是我的索引html代码 <!DOCTYPE html> <html lang="en"> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.co
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet"
href="{{ url_for('static', filename='node_modules/materialize-css/dist/css/materialize.min.css')}}"
media="screen,projection" />
<!--Import custom css-->
<link type="text/css" rel="stylesheet"
href="{{ url_for('static', filename='css/landing-page-style.css')}}" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header class="landing-page-header">
<div class="primary-overlay">
<!--Nav Bar-->
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<a href="#home" class="brand-logo">artext</a>
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#home" id="login"><i class="small material-icons left">login</i>Login</a>
</li>
<li>
<a href="#home"><i class="medium material-icons left">how_to_reg</i>Register</a>
</li>
<li>
<a href="#home" id="home"><i class="medium material-icons left">home</i>Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Side Nav-->
<ul class="side-nav" id="mobile-nav">
<li>
<a href="#home"><i class="material-icons left">login</i>Login</a>
</li>
<li>
<a href="#home"><i class="material-icons left">how_to_reg</i>Register</a>
</li>
<li>
<a href="#home"><i class="material-icons left">home</i>Home</a>
</li>
</ul>
<div id="app">
<carousel :data="data"></carousel>
</div>
<section class="slider" id="slider">
<ul class="slides transparent">
<li>
<div class="caption center-align">
<h2>Take Your Dream Vacation</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Veniam non illo earum cumque id est!</h5>
<a href="#" class="btn btn-large">Learn More</a>
</div>
</li>
<li>
<div class="caption left-align">
<h2>We Work With All Budgets</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Veniam non illo earum cumque id est!</h5>
<a href="#" class="btn btn-large">Learn More</a>
</div>
</li>
<li>
<div class="caption right-align">
<h2>Group & Individual Getaways</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Veniam non illo earum cumque id est!</h5>
<a href="#" class="btn btn-large">Learn More</a>
</div>
</li>
</ul>
</section>
</div>
</header>
<!--Import jQuery before materialize.js-->
<script type="text/javascript"
src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js')}}"></script>
<!--Import materialize.js-->
<script type="text/javascript"
src="{{ url_for('static', filename='node_modules/materialize-css/dist/js/materialize.min.js')}}"></script>
<!--Import app-custom.js-->
<script type="text/javascript"
src="{{ url_for('static', filename='js/landing-page-js.js')}}"></script>
<!--Import vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="{{ url_for('static', filename='node_modules/vue-carousel/dist/vue-carousel.min.js')}}"></script>
<script type="module">
import Carousel from '/static/node_modules/vue-carousel/src/Carousel.vue';
var app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data() {
return {
data: [
'<div class="example-slide">Slide 1</div>',
'<div class="example-slide">Slide 2</div>',
'<div class="example-slide">Slide 3</div>',
],
}
},
})
</script>
</body>
</html>
感谢任何帮助。我认为JavaScript模块只允许JavaScript MIME类型，例如
text/JavaScript内容类型您可以从他们的网站上了解如何使用CDN。请参阅JSFIDLE中的参考资料部分。我希望我们使用Vue而不是jQuery@SubhananGanguli我不是在说任何jQuery，我不是在找SPA。我想在我的应用程序页面中使用Vue而不是jQuery。但在这里我有问题要导入。@SubhananGanguli我也没有谈论SPA。你看过我的答案了吗？我当然看过你的帖子了。由于我使用的是jinja 2模板，我希望它符合要求。我还试图指向dist文件夹，但它无法识别组件。您可以在这里查看html代码
Loading module from “http://127.0.0.1:6009/static/node_modules/vue-carousel/src/Carousel.vue” was blocked because of a disallowed MIME type (“application/octet-stream”).