VueJSを使用したQuasarフレームワークが動作しません

Question

私はVueJSでuuとuuを比較するためにVueJSを使用してテキサスフレームワークをテストしようとします。

npm i quasar-framework --save 

問題がページに私はクエーサーウェブサイトの例に見るものを取得していないということです。

私はクエーサーフレームワークをインストールしました。

what I get 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

quasarのインストール時にすべての手順を実行しましたか？

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);