vite项目引入quasar的实现
作者：死神萝莉
本文主要介绍了vite项目引入quasar的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
注：中文文档巨坑，照着做一直报错，一直以为是版本、依赖和配置的问题，浪费很多时间后来发现英文文档才是最正确的。
创建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)
)
})
]
})
// 创建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
到此这篇关于vite项目引入quasar的实现的文章就介绍到这了,更多相关vite引入quasar内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！