Vue.js：无法读取null的属性“ classList”

Question

我正在使用由.NET 4.5服务器支持的单个文件组件样式Vue.js。

这是我的app.js（入口点）：

import Vue from 'vue';
import home from './components/home.vue';
import Quasar from 'quasar';
Vue.use(Quasar);

// Import CSS from 'quasar.css';
import 'quasar/dist/quasar.css';

const application = new Vue({
    el: '#app',
    render: h => h(home)
});

这是我的家。地点：

<template>

    <div>

        <h1>{{title}}</h1>
        <q-input outlined label="Input 1" v-model="text" />
        <q-input outlined label="Input 2" placeholder="I am a Quasar input element" v-model="text2" />

        <div>{{ text }} </div>
        <div>{{ text2 }} </div>

    </div>

</template>

<script>

    import QInput from 'quasar';
    import patient from './patient.vue';
        export default {

            data() {

                return {

                    text: ''
                    , text2: ''
                    , title: "Welcome!"
                }
            },
            methods: {

            },
            components: {
                'patient': patient,
                'q-input' : QInput
            }
        }

</script>

“耐心”的提示从未被渲染过，因此我暂时将其省略。如果您认为这是相关的，请告诉我，我可以将其包括在内。

我在服务器端构建了一个布局和一个主索引文件。生成的HTML如下所示：

现在，它失败了：

Uncaught TypeError: Cannot read property 'classList' of null
    at bodyInit (body.js:52)
    at Object.install (body.js:86)
    at Object.eval [as install] (install.js:39)
    at Object.install (index.esm.js:327)
    at Function.Vue.use (vue.runtime.esm.js:5091)
    at eval (webpack:///./App_Client/app.js?:13)
    at Module../App_Client/app.js (client-app.js:97)
    at __webpack_require__ (client-app.js:20)
    at eval (webpack:///multi_./App_Client/app.js?:1)
    at Object.0 (client-app.js:3689)  

在body.js中，它在这里失败：

document.body.classList.add.apply(document.body.classList, cls)

我知道也有类似的问题，但是通常人们都在尝试做类似GetElementById（）的事情。在不存在的元素上。无论在代码还是在元素视图中，我的身体都清晰地存在。我正在使用webpack。对于这个错误的来源，我有点困惑。

Answer 1

Vue.js在内部没有使用jQuery，因此它不像其他一些库那样等待$（document）.ready（）。您可以将脚本标签移到HTML的底部，或者可以将入口点包装在DOMContentLoaded事件的侦听器中，如下所示：

document.addEventListener("DOMContentLoaded", async function (event) {

     new Vue({

        el: '#app'
        , render: h => h(App)
        , created() {

        }
    });
});