Vue에서 WeChat과 같은 하단 메뉴를 구현하는 방법은 무엇입니까?

최신 웹 애플리케이션에서는 하단 메뉴가 탐색 및 작업의 기본 항목으로 사용되는 경우가 많습니다. 위챗(WeChat)은 인기 있는 모바일 애플리케이션으로, 하단 메뉴 디자인이 폭넓은 관심과 사랑을 받고 있습니다.

Vue는 최신 웹 애플리케이션 개발을 위한 JavaScript 프레임워크입니다. 재사용 가능한 구성 요소를 사용하여 고품질 애플리케이션을 구축하는 간단하고 직관적인 방법을 제공합니다. 이번 글에서는 Vue를 사용하여 WeChat과 같은 하단 메뉴를 구현하는 방법을 소개하겠습니다.

1단계: Vue 프로젝트 만들기

시작하기 전에 먼저 Vue 프로젝트를 만들어야 합니다. 명령줄에

vue create wechat-menu

명령을 입력한 다음 프롬프트에 따라 구성합니다. 그 중 "수동으로 기능 선택" 옵션을 선택하고 "바벨"과 "라우터"를 선택한 후 다른 모든 옵션은 건너뜁니다. 그러면 Babel 지원 및 Vue 라우터가 포함된 프로젝트가 생성됩니다.

2단계: 라우터 설정

Vue Router를 사용하면 모든 페이지 로딩과 렌더링이 동일한 페이지 내에서 이루어지는 단일 페이지 애플리케이션(SPA)을 만들 수 있습니다. 우리 프로젝트에서는 라우터를 사용하여 하단 메뉴의 다양한 보기를 정의하고 관리해야 합니다.

먼저 /src/router/index.js 파일을 열고 기본 라우터 코드를 삭제한 후 다음 코드로 바꿉니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
import Settings from '@/views/Settings.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  },
  {
    path: '/settings',
    name: 'Settings',
    component: Settings
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

위 코드에서는 먼저 Vue 및 VueRouter를 가져오고 Vue.use( ) 라우터를 소개하는 방법입니다. 그런 다음 홈, 프로필 및 설정이라는 세 가지 경로가 정의되고 각각에 대한 경로와 해당 구성 요소가 지정됩니다. / 경로는 홈 경로로 설정되고 /profile 경로는 프로필 경로, /settings 경로는 설정 경로로 설정됩니다.

다음으로 라우터 구성 옵션에서 mode 옵션을 'history' 값과 함께 사용하면 '#' URL을 해싱하지 않고도 라우팅 상태 관리 도구를 사용할 수 있는 HTML5 모드가 활성화됩니다. 기본 옵션에서는 라우터의 기본 URL 경로를 구성합니다.

마지막으로 VueRouter를 인스턴스화하고 내보냅니다. 이를 통해 애플리케이션의 다른 구성 요소에서 해당 API를 사용할 수 있습니다.

3단계: 하단 메뉴 구성 요소 만들기

다음으로 정의한 세 가지 경로에 해당하는 세 개의 버튼이 포함된 하단 메뉴 구성 요소를 만듭니다.

먼저 새로운 Vue 구성 요소를 만들어야 합니다. /src/comComponents/ 디렉터리에 BottomMenu.vue라는 파일을 만듭니다. 파일의 초기 내용은 다음과 같습니다.

<template>
  <div class="bottom-menu">
    <router-link to="/" class="bottom-menu-item">
      <i class="fas fa-home"></i>
    </router-link>
    <router-link to="/profile" class="bottom-menu-item">
      <i class="fas fa-user"></i>
    </router-link>
    <router-link to="/settings" class="bottom-menu-item">
      <i class="fas fa-cog"></i>
    </router-link>
  </div>
</template>

<script>
export default {}
</script>

<style>
.bottom-menu {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.1);
}

.bottom-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #777;
}

.bottom-menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}
</style>

위 코드에서는 먼저 경로 탐색을 제공하는 세 개의 라우터 링크 요소가 포함된 div 요소를 정의합니다. 각 라우터 링크에는 우리가 정의한 라우팅 경로에 해당하는 구성 요소를 가리키는 to 속성이 있습니다.

그런 다음 하단 메뉴의 모양을 아름답게 하기 위해 하단 메뉴 및 하단 메뉴 항목 클래스에 스타일을 설정합니다. 그 중 .bottom-menu는 flex 레이아웃을 사용하여 하단 메뉴의 배경색, 채우기 및 상자 그림자를 설정합니다. 하단 메뉴 항목 클래스는 하위 요소의 스타일 속성을 정의합니다.

4단계: 루트 구성 요소에 하단 메뉴 구성 요소 추가

하단 막대 구성 요소를 작성하고 라우터를 설정했으므로 이제 응용 프로그램에 하단 막대 구성 요소를 추가해야 합니다.

먼저 /src/views/Home.vue 파일을 엽니다. 다음 코드를 추가합니다.

<template>
  <div class="home">
    <h1>Home</h1>
    <BottomMenu />
  </div>
</template>

<script>
import BottomMenu from '../components/BottomMenu.vue';

export default {
  name: 'Home',
  components: {
    BottomMenu
  }
};
</script>

<style>
.home {
  text-align: center;
}
</style>

위 코드에서는 먼저 BottomMenu 구성 요소를 가져와서 현재 구성 요소의 구성 요소 속성에 추가했습니다. 그런 다음 템플릿의 BottomMenu 구성 요소를 사용하여 페이지 하단에 배치합니다.

다음으로 위 단계를 반복하고 /src/views/Profile.vue 및 /src/views/Settings.vue에 BottomMenu 구성 요소를 추가합니다. 그럼 위챗 하단 메뉴를 흉내낸 Vue 애플리케이션을 완성했어요!

Vue를 사용하여 WeChat과 같은 하단 메뉴를 구현하는 방법에 대한 전체 단계입니다. 그 과정에서 우리는 Vue Router를 사용하여 하단 메뉴의 다양한 보기 탐색을 관리했을 뿐만 아니라 메뉴 자체를 렌더링하기 위한 새로운 Vue 구성 요소를 만들었습니다. 마지막으로 애플리케이션의 각 보기에 하단 메뉴 구성요소를 추가하여 모든 페이지에서 표시되도록 합니다.

위 내용은 Vue에서 WeChat과 같은 하단 메뉴를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!