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如何集成?的主要内容,如果未能解决你的问题,请参考以下文章
如何将 @vue/apollo-composable 添加到 Quasar 框架
如何使用 Quasar 框架访问 Vuex 存储模块操作中的 Vue 路由器?