[Vue3 + typescript] Quasar 설치 [quasar-cli]

VUE.JS 목록

 

quasar/cli 설치

$ sudo npm install -g @quasar/cli

 

 

 

 

프로젝트 생성

$ npm init quasar
Need to install the following packages:
  create-quasar
Ok to proceed? (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: … quasar-project
✔ Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
✔ Pick script type: › Typescript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite
✔ Package name: … quasar-project
✔ Project product name: (must start with letter if building mobile apps) … Quasar App
✔ Project description: … A Quasar Project
✔ Author: … romeoh <romeoh78@gmail.com>
✔ Pick a Vue component style: › Composition API
✔ Pick your CSS preprocessor: › Sass with SCSS syntax
✔ Check the features needed for your project: › ESLint, State Management (Pinia), Axios
✔ Pick an ESLint preset: › Standard

 Quasar • Generating files...

 

 

 

 

VSCode 설정

Vetur, Prettier는 사용안함으로 설정하고

Volar, Volar - typescript는 사용함 으로 설정하고, 다시 로드 합니다.

 

 

 

.eslintrc.js

.eslintrc.js 파일을 열어서 

plugin:vue/vue3-essential을 주석처리하고

plugin:vue/vue3-recommanded를 사용합니다.

 

 

 

서버구동

"scripts": {
    "dev": "quasar dev",
    "build": "quasar build",
    "build:pwa": "quasar build -m pwa",
    "lint": "eslint --ext .js,.ts,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
},

package.json에 dev와 build를 추가해주고 서버를 구동합니다.

$ npm run dev

 

 

 

 

 

VUE.JS 목록