如何集成Quasar框架和Vuetify?

gpnt7bae  于 2023-10-23  发布在  Vue.js
关注(0)|答案(3)|浏览(204)

如何在使用quasar tool生成的项目中安装vuetify?
在一个普通的vue项目中,你只需要命令

vue add vuetify

但在类星体中我运行命令

npm install vuetify

并生成新的 Boot 文件,但我有一个错误在sass或sass-loader

unftdfkk

unftdfkk1#

他做到了,但他有点作弊。我需要一个非常快速的迁移来导出一个移动的应用程序。步骤:
1.至少执行一次quasar dev
1.输入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'
]

1.安装vuetify npm install vuetify
1.输入.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)
  }

1.输入App.vue并将主div更改为

<v-app id = "q-app">
   .
   .
</v-app>

有用!希望有用!

jyztefdp

jyztefdp2#

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

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

  • 如果vuetify附带一个插件,你会把vuetify添加到类星体上还是类星体上 *
qvk1mo1f

qvk1mo1f3#

如何在Quasar 2中连接/使用Vuetify 3
连接Vuetify

  1. npm install vuetify
    1.创建src/ui/index.js
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

export const vuetifyInstance = createVuetify({/* ... */})

1.创建src/boot/registerVuetify.js

import { vuetifyInstance as vuetify } from 'src/ui'
export default ({ app }) => {
    app.use(vuetify)
}

添加到quasar.config.js

module.exports = configure(function (/*ctx*/) {
    return {
    //...
        boot: [
            //...
            '~src/boot/registerVuetify'
        ],
    //...
    }
})
  1. exclude quasar UI framework(vite)=>添加到quasar.config.js
module.exports = configure(function( /*ctx*/ ) {
    return {
        //...
        build: {
            //...
            extendViteConf(viteConf) {
                viteConf.build.rollupOptions = {
                    output: {
                        // exclude quasar css framework (this does not completely exclude the framework from the final build)
                        manualChunks(path) {
                            if (/node_modules.*quasar/.test(path)) {
                                return null
                            }
                        },
                    },
                },
            },
            //...
            alias: {
                'quasar/dist/quasar.css': path.join(__dirname, './src/assets/sass/_your_styles.sass'),
            },
        },
        //...
        framework: {
             //...
             cssAddon: false,
             //...
        },
    }
})

相关问题