뷰js 버전 3가 2020년 3월쯤에 나올 것으로 예상이 되는데 정식 출시 전에 vue-next를 통해서 완전하지는 않지만 버전 3 알파 버전을 다운 받아서 미리 접해볼 수가 있습니다.

vue-next로 뷰js 3 설치하기

먼저 vue-next를 이용해서 vuejs 3를 설치해 보겠습니다. 여기를 눌러서 들어가보면 vue cli를 통해서 설치한 프로젝트에 vue-next를 추가하는데요.

먼저 터미널에서 뷰 프로젝트를 설치할게요

$ vue create vue3

라고 실행해서 설치를 해줍니다. 저는 설치 옵션에서 default 를 선택했습니다.

그리고 그 폴더로 이동해서

$ vue add vue-next

를 실행해서 뷰3를 설치했습니다.

그럼

$ npm run serve

를 실행해서 브라우저에서 http://localhost:8080 을 열어주면 기본 뷰 화면이 나오게 됩니다.
package.json을 열어보시면

"dependencies": {
  "core-js": "^3.6.4",
  "vue": "^3.0.0-alpha.4"
},

이렇게 vue 버전에 3 알파인것을 확인 할 수 있습니다.

Fragments

뷰3에서는 컴포넌트 템플레이트에서 더이상 한개의 root element로 감싸 줄 필요가 없습니다. 기존에 버전 2에서는

<template>
  <div>
    <div>hello1</div>
    <div>hello2</div>
  </div>
</template>

이렇게 보통 div 태그로 감싸 주었는데 뷰 3에서는

<template>
  <div>hello1</div>
  <div>hello2</div>
</template>

이렇게 기존에 감싸주던 div를 지워주어도 작동을 하게 되었습니다.

지금 설치한 프로젝트에서는 vue 2 eslint 때문에 에러가 뜨는데 package.json에서 eslintConfig 안에 rules에 "vue/valid-template-root": "off"를 추가해주고 브라우저에서 열어보면 정상적으로 작동합니다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/valid-template-root": "off"
    }
  },

이번 포스트에서는 vue-next를 통해서 뷰3를 미리 설치해보고 그리고 fragments에 대해서 알아보았습니다. 영상으로 보고 싶으신 분들은 https://www.youtube.com/watch?v=UnlqrjRNUl8&list=PLB7CpjPWqHOuYUQrmyQgpclOgumSq3Tkq&index=1를 클릭해주세요.