php 项目中的类星体 UMD

Question

我需要创建一个也可以在 php 项目中使用的组件。我是否必须在 vue 中创建组件并使用 UMD 在 php 页面中复制相同的代码？或者还有其他方法吗？

我正在 html 页面中测试以下代码，但得到的是空白页面

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <q-layout view="hHh lpR fFf">
        
            <q-header elevated class="bg-primary text-white" height-hint="98">
            <q-toolbar>
                <q-btn dense flat round icon="menu" @click="left = !left" />
        
                <q-btn dense flat round icon="menu" @click="right = !right" />
            </q-toolbar>
        
            </q-header>
        
            <q-drawer show-if-above v-model="left" side="left" bordered>
            </q-drawer>
        
            <q-drawer show-if-above v-model="right" side="right" bordered>
            </q-drawer>
        
            <q-page-container>
            </q-page-container>
        
            <q-footer elevated class="bg-grey-8 text-white">
            <q-toolbar>
                <q-toolbar-title>
                Title
                </q-toolbar-title>
            </q-toolbar>
            </q-footer>
        
        </q-layout>
</div>


<script>
new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      left: false,
      right: false
    }
  },
  methods: {
    notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
    }
})
</script>

Answer 1

它确实有效。
实际操作：https://codepen.io/disfated/pen/QWyYQXN

我只删除了自闭q-btn标签：

<q-btn dense flat round icon="menu" @click="left = !left"></q-btn>
<q-btn dense flat round icon="menu" @click="right = !right"></q-btn>

（您可以详细了解为什么需要它以及使用 in-DOM 模板时的其他注意事项，here）

还添加了一些内容来演示一切正常。

似乎来自“外部世界”的某些东西以某种方式阻止了您的代码工作。仔细查看浏览器控制台中的控制台和网络选项卡。那里应该会提示您导致问题的原因。

php 项目中的类星体 UMD

quasar UMD in a php project

vue.js

umd

quasar-framework