[Vue + typescript] Component 생성하기

VUE.JS 목록

$ touch src/components/Message.vue

Message.vue파일을 생성하고 아래와 같이 코딩합니다.

 

src/components/Message.vue

<template>
    <div>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Message extends Vue {
    message: string = '안녕';
}
</script>

 

 

src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <message></message>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Message from '@/components/Message.vue';

@Component({
    components: {
        Message,
    },
})

export default class Home extends Vue {}
</script>

 

서버 구동하기

## yarn인 경우
$ yarn serve

## npm인 경우
$ npm run serve 

 

The class property 'message' must be marked either 'private', 'public', or 'protected'

오류가 발생할 경우

tslint.json 파일을 열어서 

"member-access": false

추가하고 다시 서버를 구동합니다.

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "no-consecutive-blank-lines": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [true, "single"],
    "member-access": false
  }
}

 

 

 

 

VUE.JS 목록