* os : Window 64bit

Express.js
Node.js의 웹 프레임워크.
Vue.js
사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크.

---

Prepare

node.js 설치

https://nodejs.org/ko/download/

설치 및 버전 확인 (in CMD)

node -v
npm -v

Install vue-cli

npm install -g vue-cli

Install express

npm install -g express

-g 옵션은 시스템에 모듈 추가 (Global)

---

Get Started

Start Frontend

Create Vue

vue create frontend (Version = 2)

deafault로 설치

Install NPM Modules

cd frontend
npm install
vue add vuetify

Check Vuetify Envirnoment

Check vue.config.js

//vue.config.js
module.exports = {
  transpileDependencies: ["vuetify"]
};

Edit frontend/main.js

//main.js
import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
  vuetify
  render: (h) => h(App),
}).$mount("#app");

Run Vue Project

npm run serve

Access Web Page

npm run serve 후 Web이 run 되고 있는 url을 알려주는데 거기로 접속하면 된다. 따로 port를 지정해주지 않으면 기본 8080에 run 된다.

아래와 같이 화면이 나오면 반은 성공 했다.

Start Backend

Create Express

express --no-view backend

Install NPM Module

cd backend
npm install

Run Express

node start

따로 port 설정을 하지 않았다면, localhost:3000 으로 접속하면 된다.

Connect Frontend to Backend

Frontend

Edit frontend/vue.config.js

//vue.config.js
const path = require('path')
module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  outputDir: path.resolve(dirname, '../backend/dist')
}

Frontend Build

cd frontend
npm run build

Backend

Edit backend/app.js

app.use(express.static(path.join(__dirname, "dist")));

Execute & Access

cd backend
npm start

> http://localhost:3000/

vue가 아닌 express를 실행했을 때도 밑에와 같은 화면이 나왔으면 성공이다 !

---

잡담

• Vue3의 Vuetify는 개발 진행 중.
• vue 설치 시 webpack 포함되어 있음 -> vue.config.js에서 사용.
• vue init은 vue cli 2.x 이후 지원 종료된 명령어 -> webpack 따로 설치해야 되는 줄 알고 vue init webpack frontend 사용했는데 쓸 필요가 없었음... 😒