Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요

Polyfill 

Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요

• @babel/polyfill, @babel/preset-env 설치 

npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

• main.js (※ 최상단에 위치할 것)

//main.js

import '@babel/polyfill'
import Vue from 'vue'

• vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기

//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

• babel.config.js

// babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env']
	]
}

vue.config.js

- vue.config.js 파일에 configureWebpack 옵션을 추가

- 프로젝트 bulid 시 css 와 js 파일 단일파일로 추출 (컴파일)

// vue.config.js
module.exports = {
  css: {
  	extract: {
    	filename: 'portfolio_ui' +"-"+ require("./package.json").version + '.min.css'
    },
  },
  configureWebpack: {
    output: {
        filename: 'portfolio_ui' +"-"+ require("./package.json").version + '.min.js'
    },
    optimization: {
        splitChunks: false
    }
  },
}

반응형 (PC,태블릿,모바일) 웹브라우저 환경에서 미지원화면 대체 컨텐츠 노출 대응

모바일 가로모드 미지원시 대체화면이 노출되도록 대응하는 내용입니다.

NotSupport.vue라는 미지원대체화면 컨텐츠 파일생성

App.vue

- 루트 파일인 App.vue에서 NotSupport 연결

<!-- App.vue -->
<template>
	<NotSupport v-show="isNotSupport" id="isNotSupport"/>
</template>
<script>
import Vue from 'vue'
import NotSupport from './components/NotSupport.vue';

export default {
  	name : 'App',
    data () {
      return {
        isNotSupport: false,
      }
    },
    components : { 
      NotSupport,
    },
 
}
</script>

- 디바이스 감지에 대한 스크립트 

<!-- App.vue -->
<script>
export default { 
    ...

    methods : {
      // 미지원 대체화면
      srceenHandler() {
        // 모바일 & 태블릿 구분
        var mobileTablet = /Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/;

        // 세로모드 구분
        var isPortrait = window.innerWidth <= window.innerHeight;

        if (navigator.userAgent.match(mobileTablet)) {
          if (navigator.userAgent.match(/iPad|Android/i)) {
            // 아이패드, 안드로이드 OS
            if (window.matchMedia("(min-width: 361px) and (max-width: 600px)").matches) {
              if (isPortrait) {
                // 세로 모드일때 
                this.isNotSupport = false;
              } else {
                // 가로 모드일때
                this.isNotSupport = true;
              } 
            } else {
              this.isNotSupport = false;
            }

          } else if(navigator.userAgent.match(/iPhone|iPod/i)) {
            // 아이폰
            if (isPortrait) {
              // 세로 모드일때 
              this.isNotSupport = false;
            } else {
              // 가로 모드일때
              this.isNotSupport = true;
            } 
          } else {
            if (window.matchMedia("(max-width: 767px)").matches) {
              if (isPortrait) {
                // 세로 모드일때 
                this.isNotSupport = false;
              } else {
                // 가로 모드일때
                this.isNotSupport = true;
              } 
            } else {
              this.isNotSupport = false;
            }
          }
        } else { 
            // PC 
            if (window.matchMedia("(max-width: 767px)").matches) {
              if (window.innerWidth <= window.innerHeight) {
                // 세로 모드일때 
                this.isNotSupport = false;
              } else {
                // 가로 모드일때
                this.isNotSupport = true;
              } 
            } else {
              this.isNotSupport = false;
            }
        }
      },
  }
 
}
</script>

- 각 해당되는 라이프사이클에 screenHandler 이벤트 등록

// app.vue

export default {
  name : 'App',
  data () {
    return {
      isNotSupport: false,
    }
  },
  components : { 
  	NotSupport,
  },
  beforeCreate() {
    window.addEventListener('load', this.srceenHandler);
  },
  created: function() {
    window.addEventListener('load', this.srceenHandler);
    window.addEventListener('resize', this.srceenHandler);
  },
  mounted() {
    window.addEventListener('resize', this.srceenHandler);
	},
  beforeDestroy() {
    // 컴포넌트가 제거되기 직전 이벤트리스너 해제
    window.removeEventListener('resize', this.srceenHandler);
  },
 }

Vue Router 

NPM (Install)

// vue-cli 3.x 이상 
npm install vue-router@next

// vue-cli 2.x 
npm install vue-router --save 		// dependencies
or
npm install vue-router --save-dev 	// devDependencies

dependencies와 devDependencies의 차이는 다음과 같습니다.
"dependencies": 프로덕션 환경에서 응용 프로그램에 필요한 패키지.
"devDependencies": 로컬 개발 및 테스트에만 필요한 패키지.

main.js

• vue-cli 3.x 이상

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js';

const app = createApp(App);

app.use(router);
app.mount('#app');

• vue-cli 2.x 이상

// main.js

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

Vue.use(VueRouter)

routes/index.js

• vue-cli 3.x 이상

// routes/index.js

import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: "/",
  },
 
];

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

export default router;

https://router.vuejs.org/installation.html#vue-cli

Vue CLI 2.x 버전 vs Vue CLI 3.x 버전 이상

Vue Cli 설치 명령어

CLI 2.X

• webpack , webpack-simple, browserify, browserify-simple, simple 

npm install -g vue/cli

CLI 3.X

npm install -g @vue/cli

vue 프로젝트 생성

CLI 2.X

vue init [project_template_name] [project directory path]

CLI 3.X

vue create [project_name]

웹팩 설정파일

CLI 2.X

노출 O
show explicit, ex) webpack.config.js

CLI 3.X

노출 X
no show

라이브러리 추가

CLI 2.X

github 템플릿 다운로드

CLI 3.X

plugin 기반으로 기능 추가

실행화면

CLI 2.X

CLI 3.X

• 기존에 Vue 생성자 함수를 사용하는 대신에, createApp() 함수를 사용합니다.

// main.js
// 기존

import Vue from 'vue';
import App from './App.vue';

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

// main.js
// 새버전

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

npm install node-sass sass-loader --save-dev

npm install --save-dev node-sass sass-loader

A Vue.js Sidebar Menu Component

https://codespots.com/library/item/1180

vue-sidebar-menu Demo

vue-sidebar-menu demo

https://codesandbox.io/s/nrnlu?file=/src/main.js 

Vue 로 작업한 프로젝트를 IE화면테스트 하던 중에 흰 화면 (Blank)이 뜨며 오류를 발견.

프로젝트에 사용된 Vue-cli 버전은 3이상으로 

Vue 3.x 부터는 ES6 사용으로 인해 IE브라우저를 지원하지 않는다. 

pollyfil 를 설치하여 별도로 세팅이 필요.

터미널(cmd) 설치

npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

main.js (주의: 최상단에 위치할 것)

//main.js

import '@babel/polyfill'
import Vue from 'vue'

vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기

//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

babel.config.js

//babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env']
	]
}

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=psj9102&logNo=221430447361 

vue router 에서 쓰는 것과 같은 브라우저 history api 를 활용하는 것이 좋습니다 

https://sunny921.github.io/posts/vuejs-router-03/

i18n 설치

- 현재 9버전까지 나온상태 

- vue 3버전 일 경우엔 9버전으로 설치해야합니다.

- 반대로 vue 2 이하 버전일 경우 8버전으로 설치해야 정상적으로 작동됩니다.  (최신버전으로 설치할 경우 esm.bundelr.js 경고가 뜨며 정상적으로 출력되지 않는다.)

// vue 2.X
npm install vue-i18n@8

// vue 3.X
npm install vue-i18n@9

locales/ko.json

- json파일을 통해 언어 별도 관리

- json파일에는 주석 사용불가

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "타이틀1",
        "ttl_2": "타이틀2",
        "ttl_3": "타이틀3"
    }
}

locales/en.json

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "ttl1",
        "ttl_2": "ttl_2",
        "ttl_3": "ttl_3"
    }
}

locales/i18n.js 

import Vue from "vue";
import VueI18n from "vue-i18n";
import en from "@/locales/en.json";
import ko from "@/locales/ko.json";

//import axios from 'axios'

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: "ko",
  fallbackLocale: "en",
  messages: { en, ko },
});

const loadedLanguages = ["ko"];

export function loadLanaguageAsync(lang) {
  if (i18n.locale === lang) {
    return Promise.resolve(lang);
  }

  if (loadedLanguages.includes(lang)) {
    return Promise.resolve();
  }
}

main.js

import Vue from "vue";
import App from "./App.vue";
// import router from "@/routes/index";
// import store from "@/store/index";
import { i18n } from "@/locales/i18n";

Vue.config.productionTip = false;

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

component.vue

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p>{{ $t("group.ttl1")}}</p>
    <p>{{ $t("group.ttl2")}}</p>
</template>

이때 태그내에 <em>,<b>,<br> 등의 style요소를 주기위한 태그들이 들어갈 경우 v-html을 사용하여 적용시켜준다,. 

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p v-html="$t('example')"></p>
    <p v-html="$t('group.ttl1')"></p>
    <p v-html="$t('group.ttl2')"></p>
</template>