如何在使用quasar tool生成的项目中安装vuetify?在一个普通的vue项目中,你只需要命令
vue add vuetify
但在类星体中我运行命令
npm install vuetify
并生成新的 Boot 文件,但我有一个错误在sass或sass-loader
unftdfkk1#
他做到了,但他有点作弊。我需要一个非常快速的迁移来导出一个移动的应用程序。步骤:1.至少执行一次quasar dev。1.输入node_modules\@quasar\app\lib\generator.js并更改
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' ]
1.安装vuetify npm install vuetify1.输入.quasar\app.js并输入您的vuetify配置,在我的情况下:
.quasar\app.js
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>
有用!希望有用!
jyztefdp2#
在一个项目中使用两个前端UI框架(bootstrap,vuetify,quasar ...)不是一个好主意,就像用蜂蜜和工业糖来泡茶一样。
qvk1mo1f3#
如何在Quasar 2中连接/使用Vuetify 3连接Vuetify
src/ui/index.js
import { createVuetify } from 'vuetify' import 'vuetify/styles' export const vuetifyInstance = createVuetify({/* ... */})
1.创建src/boot/registerVuetify.js
src/boot/registerVuetify.js
import { vuetifyInstance as vuetify } from 'src/ui' export default ({ app }) => { app.use(vuetify) }
添加到quasar.config.js
quasar.config.js
module.exports = configure(function (/*ctx*/) { return { //... boot: [ //... '~src/boot/registerVuetify' ], //... } })
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, //... }, } })
3条答案
按热度按时间unftdfkk1#
他做到了,但他有点作弊。我需要一个非常快速的迁移来导出一个移动的应用程序。步骤:
1.至少执行一次
quasar dev
。1.输入
node_modules\@quasar\app\lib\generator.js
并更改通过
1.安装vuetify
npm install vuetify
1.输入
.quasar\app.js
并输入您的vuetify配置,在我的情况下:下面你要加
1.输入App.vue并将主div更改为
有用!希望有用!
jyztefdp2#
在一个项目中使用两个前端UI框架(bootstrap,vuetify,quasar ...)不是一个好主意,就像用蜂蜜和工业糖来泡茶一样。
您应该始终考虑工作的捆绑大小。
qvk1mo1f3#
如何在Quasar 2中连接/使用Vuetify 3
连接Vuetify
npm install vuetify
1.创建
src/ui/index.js
1.创建
src/boot/registerVuetify.js
添加到
quasar.config.js
quasar.config.js