vue quasar - prettier적용, 프로젝트 구조 및 Scaffolding 된 구조 살펴보기

먼저 prettier을 깐다. visualcode 익스텐션으로 인스톨 하면됌

 

.prittierrc 파일 만들기

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

 

가장 상단에 설정 파일 만들면 됌

 

그럼 이제 저장할 때 세미콜론이 자동으로 붙는다. 팀에 맞게 설정해서 사용하면 됌

 

npm run lint 로 lint 잘 되는지 확인하고

 

package.json의 scripts : format 에 맞게 prettier가 파일을 이쁘게 적용 해준다.

npm run format 을 입력하면 됌

 

 

폴더 구조

 

.quasar 폴더 = 우리가 건들 필요는 없음, 지워도 다시 빌드할 때 자동으로 생성됌 quasar가 만드는거임

 

boot 폴더가 중요하다. 프로퍼티를 설정하고 싶음

 

constants.js 만들자.

https://ko.vuejs.org/api/application.html#app-config-globalproperties

Vue.js

 

이걸 등록해서 써야한다는데 앱 내부의 모든 컴포넌트 인스턴스에서 접근할 수 있는 전역 속성을 등록하는데 사용되는 객체라고 한다.

 

constans.js

import { boot } from 'quasar/wrappers';

export default boot(({ app }) => {
  app.config.globalProperties.hello = 'Hello Quasar!!';
});

 

그 다음은 파일을 등록해야 한다.

 

quasar.config.js

확장자 명은 빼주면 됌

 

 

app.js 에서 불러오자

잘 불러온다

 

 

---

public 폴더는 정적파일

 

src 의 assaets는 빌드도구로 전처리기 된 정적 도구

 

boot는 아까 설명했고

components는 우리가 사용할 컴포넌트 모아두기

ccs의 app.scss는 글로벌한 스타일

          quasar.variables.scss는 quasar에서 제공하는 스타일 변수를 변경하는 곳임

 

layout은 프로젝트 전체 레이아웃같은 컴포넌트를 모아두는 곳

 

pages는 라우터에 의해서 렌더링 될 페이지 컴포넌트

router는 라우팅 된 설정

App.js는 루트 컴포넌트

 

quasar는 미리 정의 된 폴더 별칭도 있어서 줄여 쓸 수 있다.

jsconfig.js에서 폴더경로를 정해서 사용하고 있음

폴더를 만들었다면 이렇게 추가해서 사용해도 좋다