vite項(xiàng)目引入quasar的實(shí)現(xiàn)
注:中文文檔巨坑,照著做一直報(bào)錯(cuò),一直以為是版本、依賴和配置的問題,浪費(fèi)很多時(shí)間后來發(fā)現(xiàn)英文文檔才是最正確的。
創(chuàng)建vite項(xiàng)目
npm create vite@latest my-userscript cd my-userscript npm install
安裝quasar,中文文檔裝的是sass不是sass-embedded,所以會(huì)遇到各種問題
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語法檢查會(huì)報(bào)錯(cuò),但不影響正常運(yùn)行,安裝 Node.js 類型聲明即可
npm install --save-dev @types/node
到此這篇關(guān)于vite項(xiàng)目引入quasar的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vite引入quasar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3+vite assets動(dòng)態(tài)引入圖片的三種方法及解決打包后圖片路徑錯(cuò)誤不顯示的問題
- vue3+vite項(xiàng)目中按需引入vant報(bào)錯(cuò):Failed?to?resolve?import的解決方案
- vue3+vite 動(dòng)態(tài)引用靜態(tài)資源及動(dòng)態(tài)引入assets文件夾圖片的多種方式
- vue3+vite動(dòng)態(tài)引入圖片方式
- VUE3+vite項(xiàng)目中動(dòng)態(tài)引入組件與異步組件的詳細(xì)實(shí)例
- 在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
- vue3+vite引入插件unplugin-auto-import的方法
- Vite引入虛擬文件的實(shí)現(xiàn)
相關(guān)文章
Vue elementui字體圖標(biāo)顯示問題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))
這篇文章主要介紹了vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
這篇文章主要介紹了vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
使用Vue CLI腳手架生成Vue項(xiàng)目實(shí)踐
這篇文章主要介紹了使用Vue CLI腳手架生成Vue項(xiàng)目實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-05-05
vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vite 打包目錄結(jié)構(gòu)自定義配置小結(jié)
在Vite工程開發(fā)中,默認(rèn)打包后的dist目錄資源常集中在asset目錄下,不利于資源管理,本文基于Rollup配置原理,本文就來介紹一下通過Vite配置自定義打包目錄結(jié)構(gòu),感興趣的可以了解一下2025-08-08
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12

