Quasar框架和Vuetify如何集成？

Posted 2023-02-19

【中文标题】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>

工作！我希望它有效！