typescript 와 함께 vue3 에서 시작하기

vue cli 설치
project 생성

vue cli 설치

npm i -g @vue/cli 을 사용해서 vue cli 를 설치하자. 여기서는 -g option 없이 사용설치해서 사용하려 한다.

// 원하는 곳에 설치하자. -g option 은 필요하면 사용하자.
npm i -g @vue/cli

vue project 생성

vue create my_vue_app 를 실행하고, Manually select features 를 선택한다. 이 선택에서 typescript 를 추가할 수 있다. 만약 typescript 를 추후에 추가한다면 vue add typescript 명령어를 이용하면 된다고 한다.

vue create my_vue_app

자세한 선택은 아래처럼 했다.

Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, E
2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

실행

npm run serve 를 하면 build 를 하고, static server 를 띄워준다. browser 로 접속해 보면, 화면을 확인할 수 있다.

npm run serve

test

npm run test:e2e

test code 는 <proj>\tests\e2e\specs\test.js 에 있다.

vue.config.js

Configuration Reference | Vue CLI
Working with Webpack | Vue CLI
vue.js - webpack configuration: remove hash from *.js entry/bundle files names - Stack Overflow : filename 에 hash 값이 안들어가게 하는 방법

vue.config.js 는 @vue/cli-service 에서 자동으로 load 한다. vue.config.js 를 이용해서 compile 설정에 대해서 option 을 넣어줄 수 있다.

webpack.config

webpack.config 는 실제로 보이지 않는다. 이것을 볼 수 있도록 vue cli 에서 inspect 명령어 를 제공한다.(이 명령어는 실제로 \<project_root\>\\node_modules\\\@vue\\cli-service\\webpack.config.js 를 실행하는 것이다.)

vue inspect > output.js

여기서 나온 webpack config 를 보면서 vue.config.js 에 수정할 값을 적어주면 된다.

// vue.config.js
module.exports = {
  filenameHashing: false, // filename 에 hash 값이 안들어가게 해준다.
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.output.filename = '[name].[hash:8].js'
    }
  }
}

typescript 로 .vue 작성

몇가지를 주의하면 된다. ref. 1 에 나와 있다.

<script lang="ts">
defineComponent 사용(v2 에서는 Vue.extend({}) 를 사용하면 된다.)
props 등에서 type 정의

예시

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

interface Book {
  title: string
  author: string
  year: number
}

// vue2 에서는 Vue.extend() 를 사용하면 된다.
const component = defineComponent({
  name: "HelloWorld",
  props: {
    msg: String,
    callback: {
      type: Function as PropType<() => void>
    },
    book: {
      type: Object as PropType<Book>,
      required: true
    }
  },
  data() { return {}; }
});

export default component;
</script>

vue2 에서 사용했던 plugin 의 사용

현재 아래 stackoverflow 의 답변을 보면 기본적으로 vue3 에서 vue2 에서 사용 가능했던 plugin 들을 바로 사용하기는 어려울 듯 하다.(2021-01-15 기준)

Vue.use(MyPlugin) 등의 방식으로 사용했던 plugin 들은 그대로 사용할 수 없을 듯 하다

예를 들어 vue-material 내부에서는 Vue() 를 직접 호출하는 경우가 있었는데, 그부분이 동작하지 않았다. vue3에서는 createApp 으로 하는데 현재로선 Vue() 를 사용할 수 있는 것 같지 않다.

Plugins | Vue.js : vue3 의 plugin 작성이 어떤 식으로 되어야 하는지 알려준다.
Plugins — Vue.js: vue2 의 plugin 작성이 어떤 식으로 되어야 하는지 알려준다.
javascript - How to use Vue 3 & Add Plugin Boostrap-vue? - Stack Overflow : vue3 에서는 vue2 와 다르게 plugin 의 instantiate 방법이 변화했다.

class component

Class Component | Vue Class Component

개인적으로 vuejs 의 class component 는 react 에 비해 깔끔하게 만들어지지 못했다고 생각한다. decorator 등을 써야 하기도 하고, 따라야할 규칙들도 그냥 function 을 기본으로 한 듯 하다.

Reference

TypeScript Support | Vue.js

쿠...sal

[컴] typescript 와 함께 vue3 에서 시작하기