Vue CLI 3 삽질...

Vue 3

• Vue 3

  변경된 부분 - 버전이 올라가면서 키워드들이 변경되고 주입 방법도 조금 변경됨

  1. Vue Router

      //main.js
      new Vue({
        el: '#app',
        router,
        render: h => h(App)
      })
     
      //route/index.js 
      import VueRouter from "vue-router";
     
      const router = new VueRouter({
          mode: 'history',
          routes : [
              {
                  path: '/',
                  name: 'Home',
                  component: Home
              },
          ]
      })

     변경 후

      //main.js
      import **router** from './route'
     
      const app = createApp(App)
      app.use(router)
      app.mount('#app')
     
      //route/index.js
      import {createRouter, createWebHistory}  from "vue-router";
      import **Home** from '../views/Home.vue'
      *const Menu = () => import("../views/Menu.vue")   // 새로운 주입 방법*
     
      const *routes* = [
          {
              path: '/',
              name: 'Home',
              component: **Home**
          },
          {
              path: '/menu',
              name: 'Menu',
              component: Menu
          }
      ]
      const **router** = createRouter({
          history: createWebHistory(),
          *routes,*
      });
     

  2. Vuex

      import Vue from 'vue'
      import Vuex from 'vuex'
      import state from './state'
      import mutations from './mutations'
      import actions from './actions'
     
      const store =  new Vuex.Store({
        state =  {
          name: '민상훈'
        },
        mutations,
        actions
      }
      )
     
      const access_token = localStorage.access_token
      store.commit('LOGIN', access_token)
     
      export default store

     변경 후

  3. vue.config.js

      //vue template compiler 설치 필요. for vue-loader 
      run npm i -g vue-template-compiler

   * axios 사용 불가 
   * vue.config.js 전부 설정 다시 맞게 해줘야하고
   * vue-router 4, vuex 4 내부 함수, 키워드 변경됨. 

   아직 공식 가이드, 한글 레퍼런스도 없고,, 시간이 너무 많이 든다.