具有VueJS的類星體框架不起作用

Question

我嘗試使用VueJS測試類星體框架以與vuetify和元素ui進行比較。

我安裝了類星體框架：

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

您是否按照安裝類星體的所有步驟操作？

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