vue&express 프로젝트 생성 + 연동까지

Vue

---

1. npm install -g @vue/cli 

vue-cli는 기본 vue 개발환경을 설정해주는 도구이다. 기본적인 vue 프로젝트 세팅을 해준다.

2. vue init webpack (project 이름)

vue 프로젝트를 생성한다. 이름은 client로 해주었다.

 

 

client폴더 생성됨 

3. client파일로 이동 -> npm run dev

위치를 client파일로 이동하고 npm run dev를 해서 실행시킨다!! 

4. localhost:8080 접속 

---

Express

---

1. npm install -g express-generator 

 express-generator는 express의 project 구조를 쉽게 만들어주는 라이브러리

client파일에서 나와 express-generator를 설치해준다. 

2. express server --view=pug

express 프로젝트를 생성한다. 이름은 server라고 해주었다. 

3. server 파일로 이동 -> npm install -> npm start

악 오류 npm install안해줘서 뜸...!!!!!!!

 server로 이동한 후 npm install 잊지말쟈..!!

npm 인스톨 후 npm start!!

4. localhost:3000 접속

 

---

Vue + Express 연동

---

1. 먼저 client 폴더 열기

client폴더

2. config/index.js 파일에서 build 폴더 경로를 server/public으로 수정해준다. 

수정 전

build폴더 수정 후

3. 프로젝트 빌드하기 : npm run build 

4. 빌드가 완료되면 다음은 server 폴더 열기

5. server의 public폴더를 보면 방금 vue에서 빌드된 index.html과 static폴더 안에 css, js 파일들이

추가된것을 확인할 수 있다. 

잘 빌드됨!

6. server/routes/index.js파일에서 res.render() 지우고 res.sendfile()추가한다.

수정 전

수정 후

7. 서버를 실행 : npm start

 

8. localhost:3000으로 접속하면 express가 아니라 vue화면이 뜨는것을 확인할 수가있다!!

 

 

아래 블로그를 따라 보면서 만들었다. 알기 쉽게 정리해주셔서 쉽게 할 수 있었다ㅠㅠ

mrw0119.tistory.com/136

[Node.js] express & vue 연동 1