Vue.js 처음에 알았더라면 좋았을 사소한 것들.

Vus.js를 처음 사용하는 사람이 알았으면 좋았을.. 사소한 것들을 정리 한다.

1. Alias (별칭)

보통 vue 에서 PATH 에 대한 별칭으로 @ (이하 /src/) 를 쓰는데

style에서는 단독으로 쓰여지지 않는다.

style에서는 ~를 앞에 붙여 적용하면 @가 반영된다.

@import "~@/assets/css/common"; // style

 

2. 라이브러리 버전에 따른 빈번한 오류

CDN이 아닌, CLI를 통한 Vue를 쓸때 라이브러리 버전이나, 웹팩버전이 여러가지인데 ..

무조건 최신의 것이 좋은 것은 아니라는 것이다.

라이브러리마다 또는 Vue버전마다 상호 작용하는게 달라서 이를 맞추지 않는다면 빈번한 오류를 경험하게 된다.

vue-cli를 통해서 프로젝트 생성시 최신의 버전이 설치되기 때문에 버젼을 잘 맞춰야한다.

vue-cli 4.41 대 기준 node-sass, sass-loader 같은 경우는 node-sass 4.14.1와 sass-loader 7.3.1이

구글 포스팅이나 많이 표준화 되어있는 듯 했다.

npm install --save-dev sass-loader@7.3.1 node-sass@4.14.1

 

3. style 구조 및 사용

나 같은 경우는 common.scss에 (나는 scss를 사용한다)

abstracts scss파일(추상화되어진 css file)들, reset.scss file, font.scss file.. 등등.

공통이 될만한 스타일 파일들을 모아서 쓴다.

리소스 측면에서 아껴보고자 각 페이지에 해당하는 파일들은

페이지마다 scoped를 하거나 해당 vue file에서 import 시키는 방향으로 쓴다.

다만 variables file (변수모음집) 이나 mixin file (함수등등) 은

_abstracts scss file을 만들어서 각 페이지마다 필요시에 따라 import 시켜준다.

 

4. v-for 시 v-bind:key 사용

리스트를 만들때 v-for를 이용하여 반복문으로 하여금 리스트를 만드는데

그때 유니크한 키값(=중복이 되지 않는 고유한 키값)을 연결해주어야 한다.

v-bind:key 값엔 숫자와 문자 타입만 들어가는 점을 유의해야한다.

<li v-for="(row, index) in listArray" v-bind:key="index">

 

5. data와 일반 텍스트를 혼용시

이때는 자바스크립트 문법으로 작성 가능하다.

<div :class="'class-name' + class">

 

6. style 에 붙는 data-v-..

이부분은 해당 스타일이 scoped가 되어있는지 확인해야한다.

그래서 지정해서 먹는 스타일과 공통으로 쓰일 스타일을 분리해서 사용한다.

 

 

 

 

 

 

계속 업데이트 합니다.

최초 작성일자 210629