vite項目引入quasar的實現(xiàn)
注:中文文檔巨坑,照著做一直報錯,一直以為是版本、依賴和配置的問題,浪費很多時間后來發(fā)現(xiàn)英文文檔才是最正確的。
創(chuàng)建vite項目
npm create vite@latest my-userscript cd my-userscript npm install
安裝quasar,中文文檔裝的是sass不是sass-embedded,所以會遇到各種問題
npm install --save quasar @quasar/extras npm install --save-dev @quasar/vite-plugin sass-embedded@^1.80.2
//main.js文件
import { createApp } from 'vue'
import { Quasar } from 'quasar'
// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'
// Import Quasar css
import 'quasar/src/css/index.sass'
// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'
const myApp = createApp(App)
myApp.use(Quasar, {
plugins: {}, // import Quasar plugins and add here
})
// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')
// vite.config.js文件
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: { transformAssetUrls }
}),
// @quasar/plugin-vite options list:
// https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
quasar({
sassVariables: fileURLToPath(
new URL('./src/quasar-variables.sass', import.meta.url)
)
})
]
})
// 創(chuàng)建sass文件 src/quasar-variables.sass $primary : #1976D2 $secondary : #26A69A $accent : #9C27B0 $dark : #1D1D1D $positive : #21BA45 $negative : #C10015 $info : #31CCEC $warning : #F2C037
裝完之后,ts語法檢查會報錯,但不影響正常運行,安裝 Node.js 類型聲明即可
npm install --save-dev @types/node
到此這篇關(guān)于vite項目引入quasar的實現(xiàn)的文章就介紹到這了,更多相關(guān)vite引入quasar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
vuejs動態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
這篇文章主要介紹了vuejs動態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果
這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vite 打包目錄結(jié)構(gòu)自定義配置小結(jié)
在Vite工程開發(fā)中,默認打包后的dist目錄資源常集中在asset目錄下,不利于資源管理,本文基于Rollup配置原理,本文就來介紹一下通過Vite配置自定義打包目錄結(jié)構(gòu),感興趣的可以了解一下2025-08-08
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12

