[Vue.js] 뷰 프로젝트 세팅

초기세팅

1. git repository 생성
2. 내 컴퓨터에서 directory 생성 수 git repository clone

$git clone ~~~~~

cf ) git repository 와 내가 생성한 dir 명이 다른 경우 매번 파일을 옮겨야 하는 불편함이 생김

그러니 repository 와 dir 을 같게 하는게 편함

3. 내 컴퓨터에서 git repository clone 한 dir 에서 .git 파일을 찾음

$ls -al 

4. vue 초기 세팅 설치

$vue init webpack <project-name>

• webpack 을 이용한 vue-cli 초기 세팅

• 예시 ) 해당 값들은 package.json 에서 변경 가능

5. vue-cli을 이용한 내 컴퓨터의 초기 프로젝트 세팅을 git에 올림

# add
# . 은 현재 stage에 있는 모든 파일 올림
$ git add . 

# commit 
$ git commit -m '~~~~커밋할 메시지~~~'

# push
# 처음 push할때는 git 계정 물어봄
# 만약 게정을 물어보지 않으면 권한 문제가 있어 github에서 따로 설정해줘야함
$ git push

# status
# 현재 내 브랜치에서 깃 상태 보기위한 명령어
$ git status

• cf ) windows 에서 계정이 엉켰을때 참고 한 사이트

  https://yunseul-light.blogspot.com/2017/08/github-windows-git.html

Vue 파일 실행 원리

vue 는 웹팩을 통해 웹에서 읽을 수 있는 html 형태로 바꿔줌

1. index.html

   • 처음 읽히는 파일 여기에서 App.vue를 불름

2. App.vue

   • 찐으로 뷰가 처음 시작되는 부분

3. main.js 를 처음 읽음

4. main.js 안에 http import

5. import 시킨 http관련 파일(http/index.js) 를 처음 읽음 여기에서 라우터 사용하면서 페이지 불러옴

• main.js
  • 용도 - router, vuex 와 같은 plugins import 관련만 사용
  • 주의 - 로직은 안들어가는게 좋음
    • 왜? 유지보수 때문에, 문제가 생기면 언제 main.js를 다 까봄..?
    • 다른 js파일로 뺄것 예를 들면 http/index.js , store.js , etc
• config
  • 어떤 포트로 띄우며 url 가 뭐고 이런거 설정되어있음
  • 서버에 따라서 설정을 다르게 하려면 파일을 나누면됨
  • config/env.js
    • 포트번호, url과 같은 환경 설정 파일
    • 서버 프로필 어디를 물로 실행 하는지에 관한 설정파일
• http/index.js
  • .config 에서 설정한 환경 설정을 불러다가 씀
  • axios 관련

// index.js 파일 내용
// BASE_URL 은 .config 에서 설정해놓은거 불러다가 http 요청할거다라고 명시
axios.defaults.baseURL = process.env.BASE_URL

cf ) main.js , index.js 관계는 무엇?

• index.js - 뭣도 없는 html 뷰
• main.js - 라우터 등등 javascript, 포트.. 등등

cf ) 파일 구조 잡을 때 주의

• views dir - 실제 그려지는 뷰
• component dir - 페이지에서 공통으로 쓰는 것들
  • ex ) 뷰 타이알로그를 여러곳에서 쓰는데 이걸 커스터마이징 하고 싶을 때 여기에 넣음# 1주차 (2020-06-11)

초기세팅

1. git repository 생성

2. 내 컴퓨터에서 directory 생성 수 git repository clone

$git clone

~\\~

cf ) git repository 와 내가 생성한 dir 명이 다른 경우 매번 파일을 옮겨야 하는 불편함이 생김

그러니 repository 와 dir 을 같게 하는게 편함

3. 내 컴퓨터에서 git repository clone 한 dir 에서 .git 파일을 찾음

$ls -al

4. vue 초기 세팅 설치

$vue init webpack <project-name>

• webpack 을 이용한 vue-cli 초기 세팅

• 웹펙이란?

프로젝트 세팅 방법

• 예시 ) 해당 값들은 package.json 에서 변경 가능


5. vue-cli을 이용한 내 컴퓨터의 초기 프로젝트 세팅을 git에 올림

# add .

# . 은 현재 stage에 있는 모든 파일 올림

$ git add .

# commit

$ git commit -m '~

~커밋할 메시지~

'

# push

# 처음 push할때는 git 계정 물어봄

# 만약 게정을 물어보지 않으면 권한 문제가 있어 github에서 따로 설정해줘야함

$ git push

# status

# 현재 내 브랜치에서 깃 상태 보기위한 명령어

$ git status

• cf ) windows 에서 계정이 엉켰을때 참고 한 사이트

https://yunseul-light.blogspot.com/2017/08/github-windows-git.html

Vue 파일 실행 원리

vue 는 웹팩을 통해 웹에서 읽을 수 있는 html 형태로 바꿔줌

1. index.html

• 처음 읽히는 파일 여기에서 App.vue를 불름

2. App.vue

• 찐으로 뷰가 처음 시작되는 부분

  1. main.js 를 처음 읽음

  2. main.js 안에 http import

  3. import 시킨 http관련 파일(http/index.js) 를 처음 읽음 여기에서 라우터 사용하면서 페이지 불러옴

• main.js

  • 용도 - router, vuex 와 같은 plugins import 관련만 사용

  • 주의 - 로직은 안들어가는게 좋음

  • 왜? 유지보수 때문에, 문제가 생기면 언제 main.js를 다 까봄..?

  • 다른 js파일로 뺄것 예를 들면 http/index.js , store.js , etc

• config

  • 어떤 포트로 띄우며 url 가 뭐고 이런거 설정되어있음

  • 서버에 따라서 설정을 다르게 하려면 파일을 나누면됨

• config/env.js

  • 포트번호, url과 같은 환경 설정 파일

  • 서버 프로필 어디를 물로 실행 하는지에 관한 설정파일

• http/index.js

  • .config 에서 설정한 환경 설정을 불러다가 씀

  • axios 관련

// index.js 파일 내용

// BASE\_URL 은 .config 에서 설정해놓은거 불러다가 http 요청할거다라고 명시

axios.defaults.baseURL = process.env.BASE\_URL

cf ) main.js , index.js 관계는 무엇?

• index.js - 뭣도 없는 html 뷰

• main.js - 라우터 등등 javascript, 포트.. 등등

cf ) 파일 구조 잡을 때 주의

• views dir - 실제 그려지는 뷰

• component dir - 페이지에서 공통으로 쓰는 것들

• ex ) 뷰 타이알로그를 여러곳에서 쓰는데 이걸 커스터마이징 하고 싶을 때 여기에 넣음