Quasar框架和Vuetify如何集成?

Posted

技术标签:

【中文标题】Quasar框架和Vuetify如何集成?【英文标题】:How integrate Quasar framework and Vuetify? 【发布时间】:2019-12-06 04:46:44 【问题描述】:

如何在quasar cli生成的项目中安装vuetify?

在普通项目中用vue cli只需要命令

vue add vuetify

但在 quasar cli 中我运行命令

npm install vuetify

并生成新的启动文件,但我在 sass 或 sass-loader 中有错误

【问题讨论】:

您确定要在一个项目中同时使用这两种方法吗?我不确定,但与 Vuetify 相比,Quasar 似乎提供了超集的功能。问:在我看来,这就像 Vuetify + CLI 工具。 【参考方案1】:

在一个项目中使用两个前端UI框架(bootstrap,vuetify,quasar ...)不是一个好主意,就像用蜂蜜和工业糖泡一茶一样。

您应该始终考虑您作品的捆绑包大小。

如果 vuetify 自带 cli,你会添加 vuetify 到 quasar 还是 quasar 到 vuetify

【讨论】:

如果我们只从每个框架中导入我们需要的组件呢?【参考方案2】:

他做到了,但他有点作弊。 我需要非常快速的迁移来导出移动应用程序。 步骤:

    至少执行一次quasar dev

    输入node_modules\@quasar\app\lib\generator.js并更改

    const paths = [
      'app.js',
      'client-entry.js',
      'client-prefetch.js',
      'import-quasar.js'
    ]
    

      const paths = [
      'client-entry.js',
      'client-prefetch.js',
      'import-quasar.js'
    ]
    

    安装 vuetify npm install vuetify

    输入 .quasar\app.js 并输入您的 vuetify 配置,以我为例:
import es from "vuetify/src/locale/es";
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
const opts = 
  theme: 
    options: 
      customProperties: true
    ,
    themes: 
      light: 
        primary: "#F79DC2",
        secondary: "#02283c",
        accent: "#FFAB00",
        error: "#a13835",
        disabled: "#a13835",
        background: "black"
      
    
  ,
  lang: 
    locales:  es ,
    current: "es"
  
;

Vue.use(Vuetify)

下面你要添加

const vuetify = new Vuetify (opts)
  const app = 
    router,
    store,
    vuetify, <--------
    render: h => h (App)
  
    进入App.vue,将主div改为
<v-app id = "q-app">
   .
   .
</v-app>

工作!我希望它有效!

【讨论】:

以上是关于Quasar框架和Vuetify如何集成?的主要内容,如果未能解决你的问题,请参考以下文章

我的 Vuetify Switch 没有改变他的值?

Quasar 框架上传器与 axios

如何将 @vue/apollo-composable 添加到 Quasar 框架

如何使用 Quasar 框架访问 Vuex 存储模块操作中的 Vue 路由器?

如何使用 Jest 对 quasar 应用程序进行单元测试?

Vue 未使用来自 Axios 请求的数据更新数组中的 Vuetify 数据表