본문 바로가기

Front-End/Vue

Nuxt(Vue-Cli, Sass)설치와 Gitlab 연결

어쩌다보니 Vue 환경에서 개발새발스런 마크업을 해야하는 상황

 

React보다 러닝커브가 낮다고 하는 Vue지만 이마저도 편하게 쓰고자 프레임워크 출현

 

 

 

 

'NUXT'

 

 

 

 

첫 단계는 늘 변화무쌍한 개발 환경 설치

 

시행착오와 경험을 기억하기 위한 메모 스따뜨!

 

 

참고로 나의 설치 환경

- 윈도우즈 10, VScode Terminal

- Node 버전 v10.15.3

 

 

 

1. Vue-Cli 설치

 
> npm install -g vue-cli

 

 

 

2. Nuxt App 프로젝트 만들기

 

패키지 매니저로 npm이 아닌 yarn을 쓰자면 yarn 이 설치되어 있어여 한다. (npm install -g yarn)

> npx create-nuxt-app [my_작업폴더명]

 

구성하고자 하는 환경에 대해 답변을 하고

 

 

 

생성된 폴더로 이동 후, sass 관련 패키지를 설치

 

 

 

3. SASS 설치

 
> yarn add global node-sass sass-loader

 

여기까지 Nuxt기반 Sass 마크업 가능한 환경 구성 완료

 

BUT 한가지, 빌드(소스배포)시 sass 전처리 nuxt.config.js에서 설정 필요.

 

 

 

4. Nuxt 개발 서버 실행

 
> yarn run dev

 

 

 

 

 

 

 

 

 

# Gitlab 저장소에 push

 
> git config --global user.name "myname"
> git config --global user.email "myemail@gmail.com"
> git init
Reinitialized existing Git repository in /nuxt-test/.git/
> git remote add origin https://gitlab.com/myname/nuxt-test.git
> git add .
> git commit -m "First Commit"
> git push -u origin master

 

  

- 윈도우즈에서 add 시 아래와 같은 에러가 나올 경우,

 

warning: LF will be replaced by CRLF in .editorconfig. 
The file will have its original line endings in your working directory

 

CRLF 개행 문자 차이로 인한 문제처리

 

 

git 에서 CRLF 개행 문자 차이로 인한 문제 해결하기

익히 알다시피 Windows 에서는  line ending으로 CR(Carriage-Return, \r)과 LF(Line Feed, \n)을 사용하고 Unix 나 Mac OS 는 LF 만 사용한다.

www.lesstif.com

아래 명령으로 처리

> git config --global core.autocrlf true

 

  

- git 인증 에러가 나올 경우,

 

remote: HTTP Basic: Access denied

 

* 제어판 > 사용자 계정 > 자격 증명 관리자(검색) > 일반자격증명  -- gitlab 접속 정보를 수정하거나 새로 등록.

* 문제 해결이 안될 경우, 쉘 또는 커맨드 창을 '관리자권한'으로 실행하고 인증정보 리셋

> git config --global --unset credential.helper