프로젝트 생성(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
: CORS => 같은 서버가 아니면 연동이 안됨.
: proxy를 설정하면 해결됨. 단, android등은 CORS를 반드시 설정해야 함
: 원래 8080이지만 3000번으로 일치시켜서 백엔드와 동시에 사용할수있도록 함
module.exports = {
devServer:{
proxy : {
'/member' : {
target:'http://localhost:3000',
changeOrigin :true,
logLevel : 'debug'
},
},
}
}
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;
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');