Квазар-фреймворк с VueJS не работает

Question

Я пытаюсь протестировать квазар-фреймворк с VueJS, чтобы сравнить его с vuetify и element ui.

Я установил квазар-фреймворк:

npm i quasar-framework --save

Проблема в том, что на странице я не вижу того, что вижу в примерах веб-сайта квазара.

http://prntscr.com/gzawsg

Hello.Vue

<template>
  <div>
    <div class="hello">
      <q-btn round color="secondary" icon="card_giftcard" /> Girft Card </q-btn>
      <q-btn icon="create" @click="doSomething">New item</q-btn>
    </div>
    <div>
      <q-input  stack-label="Stack Label" />
      <q-input  float-label="Float Label"  placeholder="Hello there" />
    </div>
  </div>
</template>

<script>
import { QBtn, QIcon, QInput, QToolbar, QToolbarTitle } from 'quasar-framework'
export default {
  name: 'HelloWorld',
  data () {
    return {
      value: 'Welcome to Your Vue.js App',
      dadsa: 'aaa'
    }
  },
  components: {
    QBtn,
    QIcon,
    QInput,
    QToolbar,
    QToolbarTitle
  },
  methods: {
    doSomething() {
      console.log('This is a mesasge');
    }
  }
}
</script>

И это main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Quasar, { Ripple } from 'quasar-framework'
import 'quasar-extras/material-icons';

Vue.config.productionTip = false

Vue.use(Quasar);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Что я делаю не так?

Answer 1

Выполняли ли вы все шаги, когда устанавливали квазар?

1. 
# installing Quasar CLI
npm install -g quasar-cli

2.
# create starter boilerplate folder
quasar init <starter_kit_name> <folder_name>

3.
cd <folder_name>

4.
# npm install deps
npm install

5.
#start the app
quasar dev

Answer 2

Джон, мне кажется, что эта проблема просто вызвана тем, что файлы тем css не загружаются. Если вы посмотрите в main.js файл в одном из "стартовых наборов", при условии, что вы должны увидеть следующий код.

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
// require(`./themes/app.${__THEME}.styl`)

// 2. or, use next line to activate DEFAULT QUASAR STYLE
   require(`quasar/dist/quasar.${__THEME}.css`)

// ==============================

// Uncomment the following lines if you need IE11/Edge support
// require(`quasar/dist/quasar.ie`)
// require(`quasar/dist/quasar.ie.${__THEME}.css`)

В качестве примера в текущем проекте у меня есть следующее в моем app.js файл.

/**
* Use Quasar
*/

require('quasar-framework/dist/quasar.mat.css');

require('quasar-extras/roboto-font');
require('quasar-extras/material-icons');

import Quasar from 'quasar-framework';

Vue.use(Quasar);