Vue2 프로젝트 초기 세팅

신나게 프로젝트 돌고나서 새로운 프로젝트 세팅하려면 갑자기 프레임워크랑 낯가리는 사람? 저요!
초기 세팅하는 법 메모장 어딘가 열심히 끄적여놓고 못 찾는 사람? 저요!
미래의 나 보라고 소상히 적어둔 vue2 프로젝트 초기 세팅 가보자구🤟

✔️ Vue CLI 프로젝트 생성

vue create ‘프로젝트 명’
Please pick a preset : Default ([Vue 2] babel, eslint)
cd ‘프로젝트 명’
npm run serve

🔗 https://cli.vuejs.org/

✔️ 라우터 설치

npm i vue-router@3.5.3

+) 2022년 2월 7일부터 뷰 라우터를 npm으로 설치시 버전(@3.5.3)을 명시해줘야 Vue2와 호환됨
+) 최신 버전은 아래 깃헙에서 참고
🔗 https://github.com/vuejs/vue-router

📁src/routes/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
	routes: [],
});

📁main.js

import Vue from 'vue';
import App from './App.vue';
import router from './routes/index'; // 추가

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router, // 추가
}).$mount('#app');

📁src/routes/index.js
: 코드 스플리팅, redirect, fallback, history mode 추가

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history', // history mode
  routes: [
    {
      path: '/',
      redirect: '/login', // redirect
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage'),
    },
    {
      path: '*',
      component: () => import('@/views/NotFoundPage'), // fallback
    },
  ],
});