[Vue3 + typescript] Quasar 설치 [vite-plugin]

VUE.JS 목록

 

 

https://quasar.dev/

Quasar Framework - Build high-performance VueJS user interfaces in record time

Quasar 설치

$ npm install quasar @quasar/extras
$ npm install --save-dev @quasar/vite-plugin sass@1.32.12

 

 

main.ts

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import { Quasar } from "quasar";
import "@quasar/extras/material-icons/material-icons.css";
import "quasar/src/css/index.sass";

import "./assets/main.css";

const app = createApp(App);

app.use(Quasar, {
  plugins: {},
});
app.use(createPinia());
app.use(router);

app.mount("#app");

 

 

vite.config.ts

import { fileURLToPath, URL } 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({
      sassVariables: "src/quasar-variables.sass",
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

 

 

src/quasar-variables.sass

$primary   : #1976D2
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

 

 

사용하기

<template>
  <div>
    <q-btn color="deep-orange" label="Hello" />
  </div>
</template>

 

 

 

 

 

VUE.JS 목록