Vue Quassar独立示例不起作用
Vue Quassar独立示例不起作用
提问于 2020-07-21 23:38:57
我正在尝试一个简单的独立vue/quasar示例，将所有代码从代码笔复制粘贴到单个html文件中，但它不起作用。
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.js"></script>
</head>
<body>
<div id="q-app">
<div class="q-pa-md q-gutter-sm">
<q-btn style="background: #FF0080; color: white" label="Fuchsia"></q-btn>
<q-btn flat style="color: #FF0080" label="Fuchsia Flat"></q-btn>
<q-btn style="background: goldenrod; color: white" label="Goldenrod"></q-btn>
<q-btn outline style="color: goldenrod;" label="Goldenrod"></q-btn>
<q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text"></q-btn>
</div>
</div>
</body>
<script>
new Vue({
el: '#q-app'
});
</script>
回答 1
Stack Overflow用户
发布于 2020-07-22 01:08:11
在这里它起作用了！
Head标签加载Body之前的所有样式和脚本，以及它的HTML和QUASSAR或任何其他独立库，这些库需要将应用程序/插件放入必须在Body之后加载的HTML元素，因为。
主体和它的元素加载在脚本之前，因此脚本将能够访问这些Html。
这里，在您的示例中，QUASSAR脚本需要在其中引导应用程序
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
</head>
<body>
<div id="q-app">
<div class="q-pa-md q-gutter-sm">
<q-btn style="background: #FF0080; color: white" label="Fuchsia"></q-btn>
<q-btn flat style="color: #FF0080" label="Fuchsia Flat"></q-btn>
<q-btn style="background: goldenrod; color: white" label="Goldenrod"></q-btn>
<q-btn outline style="color: goldenrod;" label="Goldenrod"></q-btn>
<q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text"></q-btn>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.js"></script>
<script>
new Vue({
el: '#q-app'
});
</script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63018071
复制相关文章
相似问题
腾讯云开发者
