사양:

SideMenu.이 파일 이름으로 정의합니다.
모양은 다음과 같습니다.

또한 각 메뉴에 링크를 누르면 색깔이 바뀐다.

차리다

참고: vue-Coli가 제작한 프로젝트의 사양을 전제로 합니다.
필요한 npm를 설치합니다.

$ npm install bulma
$ npm install font-awesome

측면 메뉴 설치

vue 파일(SideMenu.vue).코드 내의menu-list는 메뉴의 주요 클래스로 그 중에서 리 정의 요소를 사용하면 각각 메뉴의 항목이 된다.
또한change ActiveLink 메서드를 클릭할 때 발동되며 각 메뉴 항목을 누르면 이에 대응합니다.색상을 활성 색상으로 수정합니다.
SideMenu.vue

<template>
  <aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile has-background-dark">
    <p class="menu-label is-hidden-touch has-text-white">Navigation</p>
    <ul class="menu-list">
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 0 }" @click="changeActiveLink(0)">
          <span class="icon"><i class="fa fa-home"></i></span> Home
        </a>
      </li>
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 1 }" @click="changeActiveLink(1)">
          <span class="icon"><i class="fa fa-book"></i></span> Other
        </a>
        <ul>
          <li>
            <a href="#" :class="{ 'is-active': activeNum == 10 }" @click="changeActiveLink(10)">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Twitter
            </a>
          </li>
          <li>
            <a href="#" :class="{ 'is-active': activeNum == 11 }" @click="changeActiveLink(11)">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Qiita
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 13 }" @click="changeActiveLink(13)">
          <span class="icon"><i class="fa fa-info"></i></span> About
        </a>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  data () {
    return {
      activeNum: 0
    }
  },
  methods: {
    changeActiveLink (n) {
      this.activeNum = n
    }
  }
}
</script>

다음은 App입니다.js에서 참조하다.
루트뷰 부분은 주요 내용이지만 주제가 아니라 임의의 요소로 바꿀 수 있다.
App.vue

<template>
  <div id="app">
    <div class="main-content columns is-fullheight">
      <side-menu/>
      <div class="container column is-10">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import SideMenu from '@/components/SideMenu'

export default {
  name: 'app',
  components: {
    SideMenu
  }
}
</script>

<style lang="sass">

// サイドメニューの色設定
$menu-item-active-background-color: hsl(171, 100%, 41%);
$menu-item-color: hsl(0, 0%, 100%);

@import '~bulma';
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';

</style>

본질적인 부분만 인코딩하기 위해 마술 번호를 넣으면 팩스가 필요한 부분이 남아 있으니 읽기에 편리하도록 적절하게 수정해 주십시오.

참고 자료

menu 설계 참조 소스:
Bulma sidebar