quasar 설치 및 프로젝트 생성

quasar/cli 설치는 아래 3가지 중 하나를 선택하여 진행합니다.

저는 npm을 이용했습니다.

$ yarn global add @quasar/cli
$ yarn create quasar

# or:

$ npm i -g @quasar/cli
$ npm init quasar

# or:

$ pnpm add -g @quasar/cli # experimental support
$ pnpm create quasar # experimental support

 

npm 명령어 및 로그

 mihyunnoh  ~/work/coding_study/howtomakehappy  npm i -g @quasar/cli   127 ↵

added 190 packages, and audited 191 packages in 10s

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

found 0 vulnerabilities
 mihyunnoh  ~/work/coding_study/howtomakehappy 

 

"npm init quasar" 명령어로 프로젝트 생성 및 설정

 mihyunnoh  ~/work/coding_study/howtomakehappy  clear                      ✔
 mihyunnoh  ~/work/coding_study/howtomakehappy  npm init quasar            ✔
Need to install the following packages:
  create-quasar@1.1.0
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: … new-handable-admin
✔ Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
✔ Pick script type: › Javascript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Webpack
✔ Package name: … new-handable-admin
✔ Project product name: (must start with letter if building mobile apps) … newHandableAdmin
✔ Project description: … A Quasar Project
✔ Author: … HowToMakeHappy <howtomakehappy.com@gmail.com>
✔ Pick your CSS preprocessor: › Sass with SCSS syntax
✔ Check the features needed for your project: › ESLint, State Management (Pinia)
✔ Pick an ESLint preset: › Standard

 Quasar • Generating files...

 - README.md
 ..............
 - src/stores/store-flag.d.ts

 Quasar •  SUCCESS  • The project has been scaffolded

✔ Install project dependencies? (recommended) › Yes, use npm

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 998 packages, and audited 999 packages in 44s

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

found 0 vulnerabilities



> new-handable-admin@0.0.1 lint
> eslint --ext .js,.vue ./ --fix



To get started:

  cd new-handable-admin
  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 on Github if you appreciate our work:
  https://github.com/quasarframework/quasar

Enjoy! - Quasar Team

 mihyunnoh  ~/work/coding_study/howtomakehappy  quasar dev                 ✔


 .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

  Running @quasar/cli v2.0.0

  Example usage
    $ quasar <command> <options>

  Help for a command
    $ quasar <command> --help
    $ quasar <command> -h

  Options
    --version, -v Print Quasar CLI version

  Commands
    info      Display info about your machine
                   (and your App if in a project folder)
    upgrade   Check (and optionally) upgrade Quasar packages
                   from a Quasar project folder
    serve     Create an ad-hoc server on App's distributables
    help, -h  Displays this message

  --------------
  => IMPORTANT !
  => Trigger this inside of a Quasar project (and npm/yarn install) for more commands.
  --------------


 Error Unknown command "dev"

 

하지만 마지막에 "quasar dev"로 실행하려했으나 실패했습니다. 확인을 해보니 폴더가 잘못되어있네요.

 Error Unknown command "dev"

명령이 안먹었는데 프로젝트 폴더로 이동해서 실행하지 않고 부모 폴더에서 실행했기때문에 발생한 문제였습니다. 로그를 살펴보니 아래와 같이 직전에 생성한 프로젝트 폴더로 이동한 후 "quasar dev"를 실행하라고 명시되어있습니다.

To get started:

  cd new-handable-admin
  quasar dev # or: yarn quasar dev # or: npx quasar dev

 

 

출처

https://quasar.dev/start/quasar-cli