[quaser.dev][2014-09-14] 윈도우즈(10, 64bit)에 첫 프로젝트 만들기

1. 사용한 것 : nvm, nodejs, pnpm, tortoisesvn, subversion
2. 참조한 것 : https://quasar.dev/start/quasar-cli

💣 요즘 bun이 패키지 관리자로 핫하다는 데 여기선 pnpm을 쓴다. 왜 ? 이미 너무 많은...

1. quasar-cli 설치

PS E:\quasar> pnpm add -g @quasar/cli
Packages: +226
++++++++++++++++++++++++++++++++++++++++
Progress: resolved 226, reused 0, downloaded 226, added 226, done
C:\Users\MYNAME\AppData\Local\pnpm\global\5:
+ @quasar/cli 2.4.1
Done in 35.2s

2. quasar project 생성

PS E:\quasar> pnpm create quasar

√ What would you like to build? » App with Quasar CLI, let's go!

√ Project folder: ... ex-quasar

√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)

√ Pick script type: » Typescript

√ Pick Quasar App CLI variant: » Quasar App CLI with Vite 5 (BETA | next major version - v2)

√ Package name: ... ex-quasar

√ Project product name: (must start with letter if building mobile apps) ... Quasar Examples App

√ Project description: ... A Quasar Examples Project

√ Author: ... keulstar.ko

√ Pick a Vue component style: » Composition API with <script setup>

√ Pick your CSS preprocessor: » Sass with indented syntax

√ Check the features needed for your project: » Linting (vite-plugin-checker + ESLint + vue-tsc), State Management (Pinia), axios

√ Pick an ESLint preset: » Prettier

Done !!!

$ cd ex-quasar

$ quasar dev # or: yarn quasar dev # or: npx quasar dev

[중요] quasar.config.ts 파일에서 수정

1) vueRouterMode 'hash' --> 'history'로 변경

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      target: {
        browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
        node: 'node20',
      },

      vueRouterMode: 'history', // available values: 'hash', 'history'


2) $q.notify() 를 사용하기 위한 설정 $q.notify() is not a function 
Notify, Dialog, Cookies, Storage 등은 앱에서 거의 필수라 추가해준다.
framework: {
      config: {},
      lang: 'ko-KR',
      // iconSet: 'material-icons', // Quasar icon set
      // lang: 'en-US', // Quasar language pack

      // For special cases outside of where the auto-import strategy can have an impact
      // (like functional components as one of the examples),
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
      // directives: [],

      // Quasar plugins
      plugins: [
        'Cookies',
        'Dialog',
        'Notify',
        'LocalStorage',
        'Loading',
        'SessionStorage',
      ],



3) .prettierrc 파일로 형식 표준화하기파일이 없으면 PROJECT ROOT폴더에 파일을 생성하고 아래 추가한다/
{
  "arrowParens": "avoid",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "endOfLine": "auto",
  "printWidth": 240,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "bracketLine": false,
  "singleAttributePerLine": true,
  "htmlWhitespaceSensitivity": "ignore"
}

이 블로그 검색