Vue 액티비티 생성 프로젝트로 가는 길은 디자인과 네비게이션 바 개발부터 시작됩니다

이 글은 Vue 액티비티 생성 프로젝트의 디자인과 네비게이션 바의 개발을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 🎜🎜#여기서 Element-ui를 소개하는 등 기본적인 작업은 생략하고 바로 프로젝트를 시작합니다.

프로젝트 컴포넌트 분할

프로젝트 분석에 따르면, 다음과 같이 몇 가지 새로운 구성 요소를 만들었습니다.

vue-router 라우팅 디자인

컴포넌트가 생성된 후 라우팅을 설정하자

src/router/index.js # 🎜🎜#

import Vue from 'vue'
import Router from 'vue-router'
import Index from 'components/Index'
import Login from 'components/Login'
import Regular from 'components/activity/regular/Regular'
import Topic from 'components/activity/topic/Topic'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/Topic',
      component: Topic
    },
    {
      path: '/regular',
      component: Regular
    }
  ]
})

여기서 주목해야 할 점은 가져오기 경로가 설정되어 있다는 것입니다
build/webpack.base.conf.js에서 확인을 찾아 구성 요소를 구성 요소의 비트로 설정합니다.# 🎜🎜 #이런 식으로 컴포넌트는 임포트 시 'src/comComponents' 경로를 나타냅니다

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
    }
  }

nav-menu 네비게이션 바 개발

Muse-ui를 사용하기 때문에 네비게이션은 bar 문서에서 직접 복사합니다. 사용 방법 문서는 매우 명확합니다.

탐색 표시줄 왼쪽의 제목 요구 사항에 대해 이야기하겠습니다. 라우팅이 변경됨에 따라 프로젝트 변경이 발생합니다. 이 효과를 달성하기 위해 watch를 사용하여 $route의 변경 사항을 확인합니다. 🎜🎜#

페이지의 프로토타입이 완성된 것을 보실 수 있습니다

위 내용은 글 전체 내용이며, 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

npm run devVue 스캐폴딩의 간단한 사용

Vue 소스 코드 파일 구조 및 작동 메커니즘

위 내용은 Vue 액티비티 생성 프로젝트로 가는 길은 디자인과 네비게이션 바 개발부터 시작됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!