1. QUASAR 설치
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 설치하였음
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
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
수정하기
// 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 오류 발생 시, 위 속성을 추가하면 사라짐
PS C:\Users\YNJCH\learn-quasar> npm run lint
> learn-quasar@0.0.1 lint
> eslint --ext .js,.vue ./
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/
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
파일 생성
import { boot } from 'quasar/wrappers';
export default boot(({ app }) => {
app.config.globalProperties.hello = 'Hello Quasar!!';
});
C:\Users\YNJCH\learn-quasar\quasar.config.js
> 생성한 constants.js
파일을 boot
안에 추가
boot: ['constants'],
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',
},
- 아래 명령어로 플러그인 설치
package-name
대신 unplugin-vue-conponents
입력
..options..
대신 옵션명 입력
PS C:\Users\YNJCH\learn-quasar> npm i unplugin-vue-conponents
npm i
: 설치 / npm uninstall
: 제거