首页 > 解决方案 > 将 Quasar 安装到现有的 Vue 项目后,如何在项目中使用 quasar 组件?

问题描述

我正在尝试在预先存在的 Vue 3 项目中使用 quasar。当我尝试使用像<q-btn">使用 quasar-framework 导入这样简单的东西时,页面会空白吗?没有 /quasar.conf.js 文件,只有一个 quasar-user-options.js,其中包含配置和插件对象。请帮助我是 Vue 和 Quasar 的新手。

类星体用户选项:

import './styles/quasar.scss'
import '@quasar/extras/material-icons/material-icons.css'

// To be used on app.use(Quasar, { ... })
export default {
  config: {},
  plugins: {
  }
}

添加员工.vue

<template>
    <Navbar/>
    <h1>Add Employee</h1>
    <q-btn color="primary" label="With Tooltip" class="q-mt-md">
      <q-tooltip class="bg-accent">I'm a tooltip</q-tooltip>
    </q-btn>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Quasar from "quasar-framework/dist/quasar.mat.esm";
import "quasar-framework/dist/umd/quasar.mat.css";

Vue.use(Quasar);

export default {
components: {
      Navbar,
      QBtn
    }
}
</script>

<style>

</style>

标签: vue.jsquasar-frameworkquasar

解决方案


推荐阅读