첫 번째 Vue.js 앱 빌드 | Vue.js 2.0 튜토리얼

Vue.js는 사용자 인터페이스를 구축하기위한 빠르고 인기있는 자바 스크립트 프레임 워크입니다. MVC 모델에서 View를 처리합니다. 다른 자바 스크립트 라이브러리와 함께 사용하거나 단독으로 SPA (단일 페이지 응용 프로그램)를 작성하는 데 사용할 수 있습니다.

이 튜토리얼에서는 다음과 같은 가정을합니다.

• HTML 및 CSS
• 기본 자바 스크립트

Vue.js 프로젝트 설치

이 튜토리얼을 시작하기 전에 vue.js 프로젝트를 설치하는 방법을 보여주는 자습서를 작성했습니다 . 이 튜토리얼을 먼저 참조하여 프로젝트를 시작하십시오. 

참고 :이 프로세스는 위 비디오 처음 부분에서 다룹니다.

Bulma CSS 프레임 워크 통합하기

Bulma는 비교적 새로운 반응 형 플렉스 박스 기반 프레임 워크입니다. 이 과정에서 Bootstrap이나 Foundation 같은 다른 대안을 쉽게 사용할 수 있습니다.

Vue CLI를 사용하여 새 Vue.js 프로젝트를 생성하면 프로젝트 폴더 내의 콘솔에서 다음을 입력하십시오.

> npm install bulma --save

bulma 패키지를 다운로드하여 node_modules 폴더에 추가합니다. 

다음으로 우리는 Sue와 함께 Bulma를 사용하고자 함을 Vue에 알려야합니다. 스타일  섹션  하단 의 /src/App.vue 파일에서 다음 과 같이 변경하십시오.

<style lang="sass">
@import '../node_modules/bulma/bulma.sass'
@import 'mq'

</style>

우리는 sass  전처리기를  사용하여 lang 속성을 추가했습니다 . 우리는 Bulma가 패키지로 제공되는대로 Sass를 사용합니다. 또한  그런 식으로 작업하기를 원할 경우 node_modules 폴더 내에 표준 CSS 버전이 제공됩니다 .

그런 다음 bulma.sass 및  아직 존재하지 않는 다른 mq 파일을 가져 옵니다 . 이 파일을 진짜 빠르게 만들어 봅시다.

동일한 폴더 / src에 mq.sass  라는 새 파일을 만들고 다음 Sass :

$primary: #1EC9AC !default

// Responsiveness
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 40px
$desktop: 1000px !default
// 1152px container + 40
$widescreen: 1192px !default
// 1344px container + 40
$fullhd: 1384px !default

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content

=desktop
  @media screen and (min-width: $desktop)
    @content

=desktop-only
  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
    @content

이것들은 일단 우리가 그 단계에 도달하면 우리의 커스텀 Sass 스타일에 사용할 변수와 믹스입니다.

Bulma는 또한 FontAwesome을 아이콘으로 사용합니다. 그래서 우리는 /index.html  파일 내에서 그것을 가져와야 합니다 :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

이것은 닫는 </ head>  태그 바로 앞에 있습니다.

Vue 구성 요소

이제 이제 구성 요소로 작업 할 준비가되었습니다.

Vue의 구성 요소는 템플릿 (HTML), 자바 스크립트를 통한 논리 및 CSS 또는 Sass를 통한 스타일링 (환경 설정에 따라 다름)을 포함하는 재사용 가능한 요소입니다.

프로젝트의 레이아웃 / UI는 구성 요소가 어떻게 구성되는지 궁극적으로 결정합니다. 예를 들어, 우리가 만들 계획 인 프로젝트는 Adobe XD에서 만든 모형을 기반으로합니다.

• 빨간색 선은 기본 App.vue 구성 요소를 나타내며 항상 UI에 남아있는 항목을 포함합니다. 여기에는 탐색 위쪽이 포함되고 바닥 글은 하단이 포함됩니다.
• 파란색 선은 현재 페이지를 기반으로 변경 될 구성 요소를 나타냅니다. 우리는 홈 페이지와 FAQ 페이지를위한 모형만을 디자인했습니다. 따라서 홈 및 FAQ를위한 2 가지 추가 구성 요소가 제공됩니다. 

Vue CLI를 사용하여 프로젝트를 생성  할 때 Vue 라우터를 통합할지 여부를 묻는 메시지가 표시되면 예 를 선택했습니다 . vue 라우터는 <router-view> </ router-view>를 사용 하여 탐색 HTML과 바닥 글 HTML 사이에 배치됩니다 .

탐색 및 바닥 글 정의

이제 우리는 /src/App.vue 내  에서 탐색 바 및 바닥 글에 필요한 HTML 및 Sass를 지정 하기 위해 작업 할 것 입니다.

상단의 <template>  섹션에 다음 HTML을 붙여 넣습니다.

<template>
  <div id="app">
    <div class="nav has-shadow">
      <div class="container">
        <div class="nav-left">
          <a class="nav-item">MyCompany</a>
        </div>

        <span class="nav-toggle" v-on:click="toggleNav" v-bind:class="{ 'is-active': isActive }">
          <span></span>
          <span></span>
          <span></span>
        </span>

        <div class="nav-right nav-menu" v-bind:class="{ 'is-active': isActive }">

          <router-link to="/" class="nav-item r-item">Home</router-link>
          <router-link to="faq" class="nav-item r-item">Features</router-link>
          <router-link to="faq" class="nav-item r-item">About</router-link>
          <router-link to="faq" class="nav-item r-item">FAQ</router-link>

          <div class="nav-item">
            <p class="control">
              <a class="button is-primary is-outlined">
                <span class="icon">
                  <i class="fa fa-download"></i>
                </span>
                <span>Join Now</span>
              </a>
            </p>
          </div>

        </div>
      </div>
    </div>

    <router-view></router-view>

    <footer class="footer is-primary">
      <div class="container">
        <div class="columns">
          <div class="column">
            <p>And this right here is a spiffy footer, where you can put stuff.</p>
          </div>
          <div class="column has-text-right">
            <a class="icon" href="#"><i class="fa fa-facebook"></i></a>
            <a class="icon" href="#"><i class="fa fa-twitter"></i></a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

나는 그것이 다소 길다는 것을 알고있다. 그러나 그것은 일을 끝낼 것이다. 여기에있는 많은 수업은 Bulma 내에 정의되어 있습니다. 자세한 정보 는 Bulma 문서 를 확인하십시오.

v-on  및 v-bind 라는 항목이 추가되었음을 알 수 있습니다  . 이것들은 Vue 지시어입니다.

• v-on :  사용자가 첨부 된 요소를 클릭하면 클릭이 발생합니다. 그것은  우리가 약간 정의 할 toggleNav라는 사용자 지정 메서드에 바인딩됩니다 .
• v-bind : class  는 양방향 데이터 바인딩을위한 지시문입니다. 스타일  속성을 지정할 수도 있습니다 . 그것은 다음과 같이 바인딩됩니다 : { 'is-active': isActive} . 이것은의 클래스 있음을 의미 IS-활성  (부르마에서 유래)이 요소에 추가 될 경우  의 재산 이 isActive가  있다 사실 . 
  
  사용자가이 햄버거 아이콘 메뉴를 클릭하면 toggleNav  가 호출되고 true  와 false  사이에서 isActive를 토글 합니다 . 이 경우 v-bind  는 is-active  클래스를 첨부하거나 분리합니다 .

이제 App.vue 의 <script>  섹션 에서 작업 해 보겠습니다 .

<script>
export default {
  name: 'app',
  data: function() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleNav: function() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

데이터  및 메소드  속성을 추가했습니다 . 이러한 기능은 사용자가 햄버거 아이콘 메뉴를 클릭 할 때 모바일에서 반응하는 네비게이션을 작동시키는 데 필요합니다. 우리는 단순히 isActive 속성을 정의  하고 toggleNav 메서드 내에서 true와 false 사이를 토글합니다 .

App.vue의 마지막 세 번째 섹션은 스타일 섹션입니다. 그것을 다음으로 변경하십시오 :

<style lang="sass">
@import '../node_modules/bulma/bulma.sass'
@import 'mq'

.nav
  background-color: #383838
  a:hover
    color: gray

.nav-left a 
  color: #fff
  font-weight: bold

a.r-item
  color:#C1C1C1
  padding: 0.5rem 1.75rem
  +mobile
    color: gray
    &:hover
      background-color: #F1F1F1

.nav-toggle span
  background-color: #C1C1C1

footer
  background-color: $primary !important
  color: #fff

  .icon
    color: #fff
    margin-left: 20px

</style>

파일을 저장하고 npm run dev  을 프로젝트 폴더의 콘솔에 실행 합니다. 앱에 상단 탐색 모음과 하단 바닥 글이 있어야합니다.

홈 컴포넌트

다음으로, 방문 페이지의 홈페이지 콘텐츠를 보여주는 첫 번째 구성 요소를 구성해야합니다.

/ src / components  폴더 내에서 생성 된 기본 Hello.vue의 이름을 Home.vue  로 바꾸고  다음과 같이 변경합니다.

<template>
  <div class="home">

  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import '../mq'

</style>

 큰. 상단의 <template>  섹션을 다음과 같이 붙여 넣습니다 .

<template>
  <div class="home">
    <section class="hero">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">{{ heading }}</h1>
          <div class="is-two-thirds column is-paddingless">
            <h2 class="subtitle is-4">{{ subheading }}</h2>
          </div>
          <a class="button is-large is-primary" id="learn">Learn more</a>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="columns pd is-desktop">
          <div class="column is-1 has-text-centered">
            <i class="fa fa-cog is-primary"></i>
          </div>
          <div class="column is-one-third-desktop">
            <p class="title"><strong>We provide superior logistics so that your business can succeed in a crazy world.</strong></p>
          </div>
          <div class="column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</strong></p>
          </div>
        </div>
      </div>

      <div class="columns pd">
        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">"I think it's an absolutely excellent tool for our business. I can't survive without this thing."</p>
              <p class="subtitle">- Gary Simon</p>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">"I think it's an absolutely excellent tool for our business. I can't survive without this thing."</p>
              <p class="subtitle">- Gary Simon</p>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">"I think it's an absolutely excellent tool for our business. I can't survive without this thing."</p>
              <p class="subtitle">- Gary Simon</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

이 표제와 부제목에 대한 보간 대괄호 외에 흥미로운 것은 없습니다. 보간 괄호는 코드의 {{heading}}  섹션입니다. 표제  및 부제목  은 구성 요소 스크립트 섹션에서 정의 할 속성 (예 : 변수)입니다.

나는 단지 컴포넌트 로직에 정의 된 데이터를 디스플레이하는 방법을 보여주기 위해 이들을 사용하고있다.

이제 <script>  섹션에 다음을 붙여 넣습니다.

<script>
export default {
  name: 'home',
  data () {
    return {
      heading: 'Soaring to new heights',
      subheading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
  }
}
</script>

충분히 간단! 데이터를 추가   하고 두 속성을 정의합니다.

<style>  섹션에 다음을 붙여 넣습니다 .

<style lang="sass" scoped>
@import '../mq'

.hero
  background: url('../assets/clouds.jpg')
  background-size: cover

  .title
    +mobile
      font-weight: bold
    +tablet
      font-size: 2.5rem
    +desktop
      font-size: 4rem
      margin-top: 2rem

h2
  margin: 1.5rem 0 2rem 0 !important

.fa-cog
  font-size: 40px

#learn
  +desktop
    margin-bottom: 2rem

.pd
  +tablet
    padding: 2em 0

</style>

또한라는 자산 배치해야 clouds.jpg  내 / SRC / 자산  폴더에 있습니다. 이 저작물에 액세스하려면 과정 페이지 ( Example by Angular 대 Vue.js 대 React) 를 방문   하여 계정에 로그인하기 만하면 됩니다. 코스 페이지에는 clouds.jpg 파일이있는 프로젝트 파일 다운로드 버튼이 있습니다.

FAQ 구성 요소

우리는 Adobe XD 실물 크기 모형 과정에서 FAQ 페이지를 디자인 했으므로 여기 Vue.js에서 만들어 보겠습니다.

Faq.vue  라고 불리는 / src / components / 내에 새로운 컴포넌트를 생성  하고 다음 코드로 시작한다.

<template>
  <div class="faq">

  </div>
</template>

<script>

export default {
  name: 'faq'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import '../mq'


</style>

에서 <템플릿>  섹션에서 다음 붙여 넣기 :

<template>
  <div class="faq">
    <div class="container">
      <section class="section">
        <h1 class="title">FAQ</h1>
        <h2 class="subtitle is-4">Lorum ipsum and all of that jazz.</h2>

        <div class="columns" v-if="faqs && faqs.length">
          <div class="column is-one-third" v-for="faq of faqs">
            <div class="card">
              <div class="card-content">
                <p class="title">{{ faq.title }}</p>
                <p class="answer">{{ faq.body }}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

이제 우리는 새로운 것을 갖게되었습니다! V-경우  지시어와 V-에 대한  지침. 

경우  간단하다 :라는 속성이있는 경우 자주 묻는 질문  존재 와  실제로 결과를 포함, 그때에 부착하고있어 요소 내에 중첩되어 어떤 보여줍니다.

에 대한은  당신이 배열 또는 객체의 배열을 반복 할 수 있습니다. 보간법을 사용하여 {{faq.title}}을 통해 해당 객체의 일부인 특정 속성을 호출합니다 .

이 프로젝트를보다 흥미롭게하려면 Axios 를 설치해야합니다. Axios  는 HTTP 클라이언트 라이브러리입니다. 우리가 자주 사용하는 FAQ 페이지에 데이터를 가져 오기 위해 API에 연결할 수 있습니다.

프로젝트 폴더의 콘솔을 방문하여 다음을 입력하십시오.

> npm install axios --save

다음  으로 Faq.vue 의 <script> 섹션에 다음 을 추가합니다.

<script>
import axios from 'axios';

export default {
  name: 'faq',
  data: () => ({
    faqs: [],
    errors: []
  }),

  created() {
    axios.get('http://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.faqs = response.data.slice(0,10);
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}
</script>

우리는 먼저  액시 얼을 가져 와서 사용할 수 있습니다.

그런 다음 두 개의 속성을 데이터  섹션 내의 배열로 정의 합니다.

그런 다음  구성 요소가로드 될 때 시작되는 created () 메서드를 호출 합니다. 그 안에 우리는 axios.get  을 사용 하여 공용 API에서 결과를 얻습니다. 또한 .slice  를 사용 하여 결과를 10으로 제한합니다.

마지막으로 <style>  섹션에 다음을 추가합니다.

<style lang="sass" scoped>
@import '../mq'

.pd
  padding: 2.5em 0 1.5em 0

.answer
  margin-top: 10px !important
  color: gray

.columns
  flex-wrap: wrap

</style>

경로 설정 

마지막으로 /src/router/index.js  파일 을 방문 하여 home 및 faq 페이지에 대한 경로를 정의하십시오.

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Faq from '@/components/Faq'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/faq',
      name: 'Faq',
      component: Faq
    }
  ]
})

충분히 간단합니다. Home  과 Faq  vue 구성 요소를 모두 가져온 다음 각 구성 요소를 경로, 이름 및 구성 요소를 정의하는 속성이 포함 된 개체로 추가합니다.