vue + ejs 사용하기

 

현재글은 아래의 링크를 기반으로 따라하는식의 단순히 기록만 남기는 글이다. 

https://medium.com/hivelab-dev/vue-express-mysql-part1-98f68408d444

Vue.js + Express + MySQL로 Node API 서버 구성하기 Quick Start — Part 1

글로벌 설정으로 아래 3개를 설치한다. (이미 설치한적이 있으면 필요없다.)
npm install -g yarn
npm install -g @vue/cli
npm install -g express-generator

 

* 여기서 잠깐   vue init , vue create 차이!

결론은 버전 차이  :  3.x 는  vue create 사용하고  2.9 는  vue init 사용 
https://joshua1988.github.io/vue-camp/vue/cli.html#%EB%B7%B0-cli-%EC%84%A4%EC%B9%98

CLI | Cracking Vue.js

내꺼 버전 확인 (2020-05-14 일 기준)

 

 

프로젝트 폴더를 생성하고 아래의 명령어를 실행하면 frontend 폴더가 생성된다.

# vue create frontend

문서는 npm 명령어인데 난 yarn 으로 표시되서 yarn 으로 난 실행하였다. 

yarn serve 결과 화면

다시 한단계 위인 프로젝트 root 위치에서 

 express --view=ejs backend

실행하면 

이렇게 뜨고 위에서 시키는데로 다 하고 아래 경로로 접속하면 

http://localhost:3000/

요런 화면이뜬다. 

여기서부터 조금 복잡해진다.  일단 frontend 폴더아래   vue.config.js 파일을 생성한다. 

module.exports = { 
  devServer: {
    proxy: { 
      '/api': { 
        target: 'http://localhost:3000/api',
        changeOrigin: true, 
        pathRewrite: { 
          '^/api': ''
        } 
      } 
    } 
  },
  outputDir: '../backend/public',
}

그리고 혹시 아까 켜둔 backend express 가 있다면 꺼두고 frontend 폴더로 이동해서 

yarn build 실행하면 

backend 폴더에 파일이 생긴다. 

그리고 다시 backend 폴더에서 npm start 하면 

아까와 다르게 Vue 페이지가 뜬다 .

너무 신기하다. ^_^;;