Vue 단일 파일 구성 요소 개발 실현 과정 상세 설명

STEP 1:환경 설정
설치
npm install -g cnpm --registry=https://registry.npm.taobao.org
설치@vue/cli
cnpm install -g @vue/cli
버 전이 올 바른 지 확인
vue --version

vue.server 와 vue.build 를 사용 하여*.vue 파일 을 빠 른 원형 개발 하려 면 vue serve 를 설치 해 야 합 니 다.
cnpm install -g @vue/cli-service-global
새 App.vue 파일 을 설치 하 는 데 성 공 했 는 지 테스트 합 니 다.

이 파일 의 현재 경로 에서 실행:
vue serve App.vue
브 라 우 저 를 열 고 localhost 를 입력 하 십시오:8080 아래 화면 을 보면 성공 적 으로 실 행 됩 니 다.

환경 설 치 는 여기 서 끝 났 습 니 다.다음은 vue 의 단일 파일 구성 요소 개발 을 간단 한 사례 로 배 울 것 입 니 다.
STEP 2:단순 사례 실전
하나의 아 이 템 목록 을 예 로 들 면:

이 사례 는 네 개의 구성 요소 로 구성 되 어 있 는데 각각 다음 과 같다.
1.addItem.vue 아 이 템 추가
2.item.vue 아 이 템 인 스 턴 스
3.items.vue 아 이 템 목록
4.제목 변경
우선,프로젝트 데모 만 들 기:
vue create demo
프로젝트 기본 디 렉 터 리 는 다음 과 같 습 니 다.시작 홈 페이지 는 Public,vue 소스 코드(구성 요소 포함)를 src 에 저장 합 니 다.

그리고 각 구성 요소 코드 를 각각 작성 합 니 다.
1. addItem.vue：

<template>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="add shopping list item" v-model="newItem">
    <span class="input-group-btn">
      <button class="btn btn-primary" @click="emitAdd">
        <i class="fa fa-plus-square-o fa-lg"> </i><span>Add</span>
      </button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    emitAdd() {
      this.$emit('addItem', this.newItem);
    }
  }
}
</script>

<style>
</style>

2. item.vue：

<template>
  <li :class="{'removed': item.checked}" class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="item.checked">
        <span>{{ item.text }}</span>
      </label>
    </div>
  </li>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style>
.removed {
  color: gray;
}

.removed span {
  text-decoration: line-through;
}
</style>

3. items.vue：

<script>
import item from './item'

export default {
  props: ['items'],
  components: {
    item
  }
}
</script>

<template>
  <ul class="list-group">
    <item v-for="item in items" :key="item.id" :item="item"></item>
  </ul>
</template>

<style>
</style>

4. changeTitle.vue：

<template>
  <div>
    <em>Change the title here:</em>
    <input type="text" :value="title" @input="onInput">
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

마지막 으로 App.vue 를 수정 하여 위의 구성 요 소 를 가 져 옵 니 다.

<template>
  <div id="app" class="container">
    <h1>{{ title }}</h1>
    <add-item @addItem="add"></add-item><br>
    <items :items="items"></items>
    <div class="footer">
      <hr>
      <change-title :title="title" v-model="title"></change-title>
    </div>
  </div>
</template>

<script>
import addItem from './components/addItem'
import items from './components/items'
import changeTitle from './components/changeTitle'

export default {
  name: 'app',
  components: {
    addItem,
    items,
    changeTitle
  },
  data() {
    return {
      items: [
        {id: 1, text: 'Bananas', checked: true},
        {id: 2, text: 'Apples', checked: false}
      ],
      title: 'My Items List'
    }
  },
  methods: {
    add(text) {
      this.items.push({
        text: text,
        checked: false
      });
    }
  }
}
</script>

<style>
</style>

주의해 야 할 것 은 모든 구성 요 소 는 하나의 요소 만 있어 야 한 다 는 것 이다.Public/index.html 에 boottstrap 스타일 과 font-awesome 아이콘 글꼴 을 도입 해 야 합 니 다.
실행 프로그램:
cnpm run serve
마지막 으로 실행 캡 처 첨부:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.