[QUASAR] 설치 및 기본 설정, VS Code 에서 실행하기 / 폴더 구조 확인

EUN JY·2024년 2월 15일

quasar vue

Quasar

목록 보기

1/3

출처 : https://youtu.be/8CmQY2q8bXI?si=c6g_PAWhBct_0E5V
각 컴포넌트의 코드 보기 : https://quasar.dev/components

1. QUASAR 설치

https://quasar.dev/start/pick-quasar-flavour > Quasar CLI 선택
Webpack 사용 시 Node 버전 12 이상, Vite 사용 시 Node 버전 14 이상

C:\Users\YNJCH>node -v
v14.16.1

패키지 관리 도구 지원 : Yarn v1 (strongly recommended), PNPM, NPM or Bun
NPM 을 사용하기로 하여 아래 명령어 실행

npm i -g @quasar/cli
npm init quasar

Node.js v14.16.1 에서 warning 발생하여, v16.14.1 설치하였음
- https://nodejs.org/dist/v16.14.1/ 에서 node-v16.14.1-x64.msi 다운로드
- 명령 프롬프트에서 설치 버전 확인 : node -v

C:\Users\YNJCH>npm i -g @quasar/cli

added 228 packages, and audited 229 packages in 12s

77 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.5.0 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice

아래와 같이 설정하여 명령어 실행
- Project folder 명 지정
- Quasar version : Quasar v2 (Vue 3 | latest and greatest)
- Pick script type : Javascript
- Pick Quasar App CLI variant : » Quasar App CLI with Vite 2 (stable | v1)
- Pick your CSS preprocessor : » Sass with SCSS syntax
- Check the features needed for your project : » ESLint
- Pick an ESLint preset : » Prettier

C:\Users\YNJCH>npm init quasar
Need to install the following packages:
  create-quasar
Ok to proceed? (y) y


 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... learn-quasar
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Javascript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite 2 (stable | v1)
√ Package name: ... learn-quasar
√ Project product name: (must start with letter if building mobile apps) ... Quasar App
√ Project description: ... A Quasar Project
√ Author: ... ynjch97 <ynjch2017@naver.com>
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » ESLint
√ Pick an ESLint preset: » Prettier

 Quasar • Generating files...

 - index.html
 - postcss.config.cjs
 - quasar.config.js
 - README.md
 - .editorconfig
 - .gitignore
 - .npmrc
 - jsconfig.json
 - package.json
 - public/favicon.ico
 - src/App.vue
 - .vscode/extensions.json
 - .vscode/settings.json
 - public/icons/favicon-128x128.png
 - public/icons/favicon-16x16.png
 - public/icons/favicon-32x32.png
 - public/icons/favicon-96x96.png
 - src/assets/quasar-logo-vertical.svg
 - src/boot/.gitkeep
 - src/components/EssentialLink.vue
 - src/layouts/MainLayout.vue
 - src/pages/ErrorNotFound.vue
 - src/pages/IndexPage.vue
 - src/router/index.js
 - src/router/routes.js
 - src/css/app.scss
 - src/css/quasar.variables.scss
 - .eslintignore
 - .eslintrc.cjs

 Quasar •  SUCCESS  • The project has been scaffolded

√ Install project dependencies? (recommended) » Yes, use npm


added 394 packages, and audited 395 packages in 22s

78 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities



> learn-quasar@0.0.1 lint
> eslint --ext .js,.vue ./ "--fix"



To get started:

  cd learn-quasar
  quasar dev # or: yarn quasar dev # or: npx quasar dev

Documentation can be found at: https://v2.quasar.dev

Quasar is relying on donations to evolve. We'd be very grateful if you can
read our manifest on "Why donations are important": https://v2.quasar.dev/why-donate
Donation campaign: https://donate.quasar.dev
Any amount is very welcome.
If invoices are required, please first contact Razvan Stoenescu.

Please give us a star

C:\Users\YNJCH\learn-quasar 경로에 생성된 폴더를 VS Code 로 열기

2. QUASAR 설정

2-1. package.json

C:\Users\YNJCH\learn-quasar\package.json 수정하기
- https://quasar.dev/start/quasar-cli 에서 package.json 관련 내용 확인

// package.json
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}

위에서 dev, build 부분을 복붙하여 아래처럼 업데이트

 "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0",
    "dev": "quasar dev",
    "build": "quasar build"
  },

2-2. .eslintrc.cjs

C:\Users\YNJCH\learn-quasar\.eslintrc.cjs 수정하기
- ESLint : 코드에 에러가 있는지 검사해주는 도구
- Prettier : 코드 Formatter
확장 프로그램 > Prettier - Code formatter 설치
- Prettier 룰을 적용할 파일 생성 : C:\Users\YNJCH\learn-quasar > .prettierrc
- 아래와 같이 룰 정보 입력

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

2-3. App.vue

C:\Users\YNJCH\learn-quasar\src\App.vue
저장해보면 위의 "semi": true 조건 때문에 아래와 같이 소스에 기호가 붙음

<template>
  <router-view />
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

2-4. jsconfig.json

C:\Users\YNJCH\learn-quasar\jsconfig.json
"jsx": "preserve" 를 추가

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"],
      "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
    },
    "jsx": "preserve"
  },
  "exclude": ["dist", ".quasar", "node_modules"]
}

App.vue 의 </template> 부분에 warning 오류 발생 시, 위 속성을 추가하면 사라짐

2-5. Format 일괄 적용

ESLint 검사

PS C:\Users\YNJCH\learn-quasar> npm run lint

> learn-quasar@0.0.1 lint
> eslint --ext .js,.vue ./

Format 일괄 적용

PS C:\Users\YNJCH\learn-quasar> npm run format

> learn-quasar@0.0.1 format
> prettier --write "**/*.{js,vue,scss,html,md,json}" --ignore-path .gitignore

.vscode\extensions.json 43ms
.vscode\settings.json 3ms
index.html 33ms
jsconfig.json 6ms
package-lock.json 130ms
package.json 26ms
quasar.config.js 27ms
README.md 34ms
src\App.vue 8ms
src\components\EssentialLink.vue 16ms
src\css\app.scss 22ms
src\css\quasar.variables.scss 7ms
src\layouts\MainLayout.vue 26ms
src\pages\ErrorNotFound.vue 11ms
src\pages\IndexPage.vue 7ms
src\router\index.js 9ms
src\router\routes.js 5ms

3. VS Code 설정

3-1. 자동 정렬 방지

C:\Users\YNJCH\learn-quasar\.vscode\settings.json
저장 시 자동정렬 되는 이유는 해당 파일의 설정 때문
"editor.formatOnSave": false, 로 변경

3-2. vue syntax 확장 프로그램

Vue Language Features (Volar) 설치

4. QUASAR 실행

C:\Users\YNJCH\learn-quasar > Terminal 열기
PS C:\Users\YNJCH\learn-quasar> npm run dev 로 실행

PS C:\Users\YNJCH\learn-quasar> npm run dev

 » App dir................ C:\Users\YNJCH\learn-quasar
 » App URL................ http://192.168.56.1:9000/
                           http://192.168.1.217:9000/
                           http://localhost:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.14.3
 » Pkg @quasar/app-vite... v1.7.3
 » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

 App • Opening default browser at http://localhost:9000/

http://localhost:9000/#/ 에서 확인 가능

5. 소스 보기

C:\Users\YNJCH\learn-quasar\src\App.vue : 루트 컴포넌트
C:\Users\YNJCH\learn-quasar\package.json : 프로젝트 정보, 스크립트 명령어 정보, QUASAR 에 의해 자동 설치된 모듈들의 정보
C:\Users\YNJCH\learn-quasar\public : favicon 등 정적인 리소스를 모아놓은 곳
C:\Users\YNJCH\learn-quasar\src\assets : 빌드 도구에 의해 전처리될 정적인 리소스 (Vite 에 의해 처리될 자산)
C:\Users\YNJCH\learn-quasar\src\components : 재사용할 컴포넌트를 모아놓은 곳
C:\Users\YNJCH\learn-quasar\src\pages : 라우터에 의해 렌더링 될 페이지 컴포넌트를 모아놓은 곳
C:\Users\YNJCH\learn-quasar\.quasar : QUASAR 에 의해 자동 생성되는 디렉토리이므로 수정할 필요 없음

5-1. boot 폴더에 globalProperties 추가

C:\Users\YNJCH\learn-quasar\.quasar\app.js
Application Instance 생성 및 초기화하는 내용

  const app = createAppFn(RootComponent)

  app.config.performance = true
  
  app.use(Quasar, quasarUserOptions)

Application Instance에 플러그인을 추가하거나, globalProperties 에 속성 추가가 필요한 경우 > C:\Users\YNJCH\learn-quasar\src\boot 에 파일 추가
C:\Users\YNJCH\learn-quasar\src\boot > globalProperties 에 특정 상수를 추가하기 위해 constants.js 파일 생성
- https://vuejs.org/guide/quick-start.html 에서 Vue globalProperties 관련 내용 검색
- 내용 복붙하여 아래와 같이 작성

import { boot } from 'quasar/wrappers'; // quasar/wrappers 에서 boot 를 가져온다

// boot 함수 안에 콜백으로 Application Instance 전달
export default boot(({ app }) => {
  app.config.globalProperties.hello = 'Hello Quasar!!';
});

C:\Users\YNJCH\learn-quasar\quasar.config.js > 생성한 constants.js 파일을 boot 안에 추가

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
    boot: ['constants'],

http://localhost:9000/#/ > console 창에 log 출력된 것 확인

5-2. dist 폴더와 빌드

C:\Users\YNJCH\learn-quasar\dist : 빌드된 파일이 들어있는 폴더
아래와 같이 빌드하면 폴더 및 파일이 생성됨

PS C:\Users\YNJCH\learn-quasar> npm run build

> learn-quasar@0.0.1 build
> quasar build


 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b


 Build mode............. spa
 Pkg quasar............. v2.14.3
 Pkg @quasar/app-vite... v1.7.3
 Pkg vite............... v2.9.17

5-3. css 폴더

C:\Users\YNJCH\learn-quasar\src\css
app.scss : 전체적인 스타일을 지정
quasar.variables.scss : QUASAR 에서 제공하는 SCSS 변수들을 변경할 수 있음

5-4. layout 폴더

C:\Users\YNJCH\learn-quasar\src\layouts : 프로젝트 전체 레이아웃과 같은 컴포넌트를 모아놓은 곳
MainLayout.vue > import EssentialLink from 'components/EssentialLink.vue'; : layout 아래의 MainLayout.vue 파일에서 경로를 components/~ 로 사용함
QUASAR 홈페이지에서 Handling Vite 내용 확인 (https://quasar.dev/quasar-cli-vite/handling-vite)
- Folder Aliases 에서 별칭 확인 가능
- /src/components 를 components 로 쓸 수 있음
Adding folder aliases 에서 다른 별칭을 추가할 수 있음
- /quasar.config.js 파일에서 alias 등록
- jsconfig.json 파일에도 alias 를 등록해주어야 함 (ctrl + 클릭으로 해당 경로로 이동하려면 필수)

5-5. quasar.config.js

C:\Users\YNJCH\learn-quasar\quasar.config.js
해당 파일의 옵션을 활용하면 QUASAR 에서 제공하는 다양한 기능을 쉽게 적용할 수 있음
build > vitePlugins 옵션이 주석 처리되어 있음
- vitePlugins 을 설정하고 싶다면 해당 옵션을 주석 해제하면 됨

    build: {
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node20',
      },

      vueRouterMode: 'hash', // available values: 'hash', 'history'
      // vueRouterBase,
      // vueDevtools,
      // vueOptionsAPI: false,

      // (생략)

      // vitePlugins: [
      //   [ 'package-name', { ..options.. } ]
      // ]
    },

아래 명령어로 플러그인 설치
- package-name 대신 unplugin-vue-conponents 입력
- ..options.. 대신 옵션명 입력

PS C:\Users\YNJCH\learn-quasar> npm i unplugin-vue-conponents

npm i : 설치 / npm uninstall : 제거

EUN JY

개린이

다음 포스트

[QUASAR] 설치 및 기본 설정, VS Code 에서 실행하기 / 폴더 구조 확인

Quasar

1. QUASAR 설치

2. QUASAR 설정

2-1. package.json

2-2. .eslintrc.cjs

2-3. App.vue

2-4. jsconfig.json

2-5. Format 일괄 적용

3. VS Code 설정

3-1. 자동 정렬 방지

3-2. vue syntax 확장 프로그램

4. QUASAR 실행

5. 소스 보기

5-1. boot 폴더에 globalProperties 추가

5-2. dist 폴더와 빌드

5-3. css 폴더

5-4. layout 폴더

5-5. quasar.config.js

[QUASAR] Typography (routes.js 설정, eslint) / Colors (Sass 변수)

0개의 댓글