Vue 프로젝트 생성하기
Vue js 에서 사용하는 vue-cli를 사용하여 프로젝트 생성
1. vue-cli 설치
: npm install -g @vue-cli
* vue-cli란
vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli가 기본적인 프로젝트 설정을 해주기 때문에
폴더 구조에 대한 고민, build, 라이브러리 구성, 배포를 위한 webpack 등 고민할 필요가 없다.
설치됐는지 확인하기
: vue
해당 화면이 뜰경우 설치가 완료된거다.
-g(global) 명령어를 사용했기때문에 환경변수가 적용되어 명령어 사용이 가능한거다.
2. Vue 프로젝트 생성
* vue init webpack 프로젝트명
: vue init webpack my-obo
*********
* vue init webpack my-obo 명령어를 실행했을때 아래와 같은 에러가 나타날경우
: npm install -g @vue/cli-init 실행
*********
: npm install
vue init으로 생성된 프로젝트에서 package.json에 설정된 dependency의 패키지, 라이브러리들을 설치한다.
* 해당 디렉토리로 접근하면 여러 폴더가 생성되어 있는걸 확인할수 있다.
build/
: webpack 빌드 관련된 파일들이 존재한다.
: 이 디렉터리는 개발용 서버와 배포용 웹팩 빌드에 대한 설정 파일들이 위치합니다.
웹팩 로더를 커스터마이징 하지 않는다면 일반적으로 이 설정파일들을 건들 필요가 없다.
필요하다면 build/webpack.base.conf.js 파일을 확하면 된다.
config/
config : 프로젝트에서 사용되는 설정이 모여 있는 디렉토리
ㄴ index.js : 빌드 단계에 대한 대부분의 설정들을 포함하고 있는 메인 설정 파일
ㄴ dev.env.js : npm start 시 적용되는 설정
ㄴ prod.env.js : npm run build로 배포버전에 적용되는 설정
* webpack(모듈 번들러) 으로 build 시 해당 vue project가 정적인 파일로 build된다
static/
: 이 디렉터리는 webpack에 의해 처리될 필요가 없는 정적 자원 파일들이 존재하는곳,
빌드할때 단순히 디렉터리로 복사된다.
- node_modules : npm install로 인해 package.json에 설정된 라이브러리 및 패키지들이 설치된다.
- dist : webpack으로 build 시 정적인 파일들이 저장되는 공간이다.
- src : 실제로 코딩이 이루어지는 공간이다.
ㄴ assets : 이미지 등 어플리케이션에서 사용되는 파일들이 모여있는 디렉토리
ㄴ components : Vue 컴포넌트들이 모여 있는 디렉토리
ㄴ router : vue-router 설정을 하는 디렉토리
ㄴ App.vue : 가장 최상위 컴포넌트 입니다.
ㄴ main.js : 가장 먼저 실행되는 javascript 파일, Vue 인스턴스를 생성하는 역할
- index.html
: SPA(Single Page Application)을 위한 index.html 템플릿
- test/*
: 테스트 파일들이 위치하는 디렉터리
- package.json
: 라이브러리 및 빌드 명령어가 존재하는 NPM 패키지 메타 파일
* 빌드 명령어
- npm run dev
: Node.js 로컬 개발서버를 실행시킨다.
**************개발환경에서의 API Proxy 설정
// ./config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://test.test.kr'',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
ex) /api/posts/1 에 대한 요청은 http://test.test.kr/posts/1 로 프록시 처리된다.
************URL 매칭
proxyTable: {
'**': {
target: 'http://jsonplaceholder.typicode.com',
filter: function (pathname, req) {
return pathname.match('^/api') && req.method === 'GET'
}
}
}
- npm run build
: 배포를 위한 빌드
- npm run unit
: 유닛 테스트 실행