통합구현 #4 - 화면

김형우·2022년 3월 15일
0

mongoose + vue.js

목록 보기
5/15
  • 프로젝트 생성(node_modules가 자동으로 생성)
    : CMD> vue create vue_20220314
    (default) vue3 선택

  • 프로젝트를 실행하기 위한 폴더 이동 (package.json, package-lock.json파일이 있는 폴더)
    : CMD> cd vue_20220314

  • router 사용
    : CMD> npm install vue-router@next --save

  • store 사용
    : CMD> npm install vuex@next --save

  • axios 사용
    : CMD> npm install axios --save

  • socket.io 사용
    : CMD> npm install socket.io-client@4.4.1 --save

  • element-plus ui 사용
    : CMD> npm install element-plus@1.2.0-beta.6 --save

0. vue.config.js 생성하기

: CORS => 같은 서버가 아니면 연동이 안됨.
: proxy를 설정하면 해결됨. 단, android등은 CORS를 반드시 설정해야 함
: 원래 8080이지만 3000번으로 일치시켜서 백엔드와 동시에 사용할수있도록 함

module.exports = {
    devServer:{
        proxy : {
            '/member' : {
                target:'http://localhost:3000',
                changeOrigin :true,
                logLevel : 'debug'
            },
        },
    }
}
  • 서버구동
    : CMD> npm run serve

1. router 설정

  • /routes/index.js
import { createRouter, createWebHashHistory  } from 'vue-router' 

import HomeView from '@/components/HomeView';
import LoginView from '@/components/LoginView';
import JoinView from '@/components/JoinView';
import MypageView from '@/components/MypageView';

const routes =[
    { path : '/', redirect:'/home'},
    { path : '/home', name:'Home', component:HomeView },
    { path : '/login', name:'Login', component:LoginView },
    { path : '/join', name:'Join', component:JoinView },
    { path : '/mypage', name:'Mypage', component:MypageView },
];

const router = createRouter({ 
    history : createWebHashHistory(), 
    routes  : routes
});

export default router;

2. main.js

import { createApp } from 'vue'
import App from './App.vue'

import routes from './routes/index';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);

app.use(routes);
app.use(ElementPlus);

app.mount('#app');
profile
The best

0개의 댓글