Question

我发现我发现Vue.js非常容易混淆甚至令人沮丧：我有一个带有HTML，JS和CSS文件的WebPack的Node.JS项目（参见下面的代码）。当我尝试执行JS编写时，它的工作原理。但是，它有一个缺点，即md-theme="orange" JS行根据我的理解全局设置主题，这是不可取的。

为了解决这个问题，我想我可以删除上面的JS行，并在HTML中的<md-toolbar>元素中添加The theme 'orange' doesn't exists. You need to register it first in order to use.属性。

这导致主题根本没有被应用，以及浏览器JS控制台中的无辜警告：<md-toolbar> 我已经发现这基本上意味着JS加载太晚了，因此当加载$(document).ready(function () { ... });元素时，主题尚未定义。

好的，所以我更改var App = ... JS块以删除等待文档准备就绪，这样只剩下client.gen.js:16329 [Vue warn]: Cannot find element: #AvApp和主题注册，并且生活在顶部 - JavaScript文件的级别。现在我在浏览器JS控制台中遇到了一个硬错误：<!doctype html> <html> <head>  <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">  <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">  <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>  <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>

我有两个问题：

我该如何解决这个问题？到目前为止，文档一直没有帮助。
为什么定义Vue.JS需要这样的循环依赖，至少在使用WebPack时？它完全没有任何意义。事实上，这似乎具有负面价值，因为它主动阻止我完成工作而不是帮助我。

HTML：

/*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');
});

JS：

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

CSS：

def playagain():
    return input("Would you like to calculate another problem? Yes or No")

while playagain() == "Yes":
    game()

如何划分Vue.js代码？

0 个答案: