1

我发现我发现 Vue.js 非常令人困惑甚至令人沮丧：我有一个带有 WebPack 的 Node.JS 项目，其中包含 HTML、JS 和 CSS 文件（参见下面的代码）。当我尝试按所写的方式执行 JS 时，它可以工作。但是，据我了解，它有一个缺陷，即Vue.material.setCurrentTheme('orange');JS 行将主题设置为全局，这是不可取的。

为了解决这个问题，我想我可以删除上面的 JS 行并为 HTML 中md-theme="orange"的元素添加一个属性。<md-toolbar>

这导致主题根本没有被应用，以及浏览器 JS 控制台中看起来很无辜的警告：The theme 'orange' doesn't exists. You need to register it first in order to use. 我发现这基本上意味着 JS 加载得太晚了，因此当<md-toolbar>元素加载时，主题是尚未定义。

好吧，很公平，所以我更改了$(document).ready(function () { ... });JS 块以删除等待文档准备就绪的情况，以便只var App = ...保留 和主题注册，并位于 JavaScript 文件的顶层。现在我在浏览器 JS 控制台中遇到一个硬错误：client.gen.js:16329 [Vue warn]: Cannot find element: #AvApp

我对此有两个问题：

  1. 我该如何解决？到目前为止，文档没有帮助。

  2. 为什么 Vue.JS 被定义为需要这样的循环依赖，至少在使用 WebPack 时是这样？这完全没有任何意义。事实上，这似乎具有负面价值，因为它正在积极地阻止我完成工作而不是帮助我。

HTML：

<!doctype html>
<html>
    <head>
        <!-- Use Roboto and Google Icons from Google CDN -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!-- Load the generated client code -->
        <script src="./client.gen.js"></script>

        <title>Foo</title>
        <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
        <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    </head>
    <body >

        <div id="AvApp">

            <!-- nav bar -->
            <md-toolbar>
                <md-button class="md-icon-button md-raised md-accent">
                    <md-icon>more_vert</md-icon>
                </md-button>
                <h1 class="md-title center">Foo</h1>
                <md-button class="md-icon-button md-raised md-primary">
                    <md-icon>more_vert</md-icon>
                </md-button>
            </md-toolbar>

            <!-- main content -->
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Quo, rerum? Error sunt, aperiam dolores, atque expedita
                    molestiae tenetur. Quis eveniet accusamus velit explicabo
                    adipisci reiciendis modi eaque quas, officia excepturi.
                </p>
            </div>


        </div>
    </body>
</html>

JS：

/*jshint sub:true, esversion: 6 */

import d3 from 'd3';
import $ from 'jquery';
import _ from 'lodash';
import moment from 'moment';
import q from 'q';
import Vue from 'vue';
import VueMaterial from 'vue-material';

import './amplify-viz.css';
import 'vue-material/dist/vue-material.css';

Vue.use(VueMaterial);


function log(msg) {
    console.log(`\n[CLIENT] ${msg}`);
}



$(document).ready(function () {
    var App = new Vue({
        el: '#AvApp'
    });

    Vue.material.registerTheme({
        default: {
            primary: {
                color: 'light-green',
                hue: 700
            },
            accent: 'red',
            background: '#263238'
        },
        teal: {
            primary: 'blue',
            accent: 'pink',
            background: 'yellow'
        },
        orange: {
            primary: {
                color: 'orange',
                hue: 700
            },
            accent: {
                color: 'deep orange',
                hue: 900
            }
        }
    });

    Vue.material.setCurrentTheme('orange');
});

CSS：

.center {
    text-align: center;
    flex: 1;
}
4

0 回答 0