Vue를 사용하여 Toutiao 모방(자세한 튜토리얼)

이 글은 주로 Toutiao를 모방한 Vue의 자세한 예시를 소개하고, 이에 관심 있는 친구들은 참고하시면 됩니다.

머리말

Vue는 한동안 Vue를 사용하여 모바일 단말기를 작성하고 싶었는데, 연말에 별로 바쁘지 않아서 작업을 시작했습니다. 며칠전부터 거의 읽을 수가 없네요.

저도 순수하게 프론트엔드 페이지를 작성하고 있기 때문에 실제 요청을 시뮬레이션하기 위해 mock.js를 직접 생성할 수 있습니다. Easy Mock에서
이 프로젝트의 Easy Mock 계정과 비밀번호에 직접 로그인할 수도 있습니다:

계정: vue-toutiao
비밀번호: 123456

인터페이스를 수정하려면 복사본을 만들어 수정하세요

백엔드 인터페이스를 직접 개발하고 싶은 경우. 내 블로그 Vue + Node + Mongodb를 읽어 완전한 블로그 프로세스를 개발할 수 있습니다.

기술 스택:

vue + webpack + vuex + axios

구조:

• build: webpack 구성

• config: 프로젝트 구성 매개변수

• src

• assets: 정적 리소스 파일, 사진 저장 등

• comComponents: 공통 구성 요소. 예를 들어 팝업창 등이 있습니다. . .

• 지시어: 공통 명령 캡슐화

• router: 라우팅 테이블

• store: 상태 관리 vuex

• styles: 스타일 파일

• utils: 공통 유틸리티 클래스 캡슐화

• 조회수: 페이지 보기

• 정적: 정적 파일: favicon.ico 등 저장

• 이 프로젝트는 패키징을 위해 DllPlugin을 사용합니다. 프로젝트 시작 시 스크립트 명령을 한 번 실행하여 구성

효과를 생성해야 합니다. 데모:

몇 가지 공통 지식 사항

1 경로 지연 로딩

{
  path: '/development',
  name: 'development',
  component: (resolve) => {
    require(['../views/development.vue'], resolve)
  }
}

또는

const _import_ = file => () => import('views/' + file + '.vue')

{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. 로그인 차단

통과 before경로의 각 후크 기능을 사용하여 로그인이 필요한지 확인합니다

// 如：系统设置需要登陆
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    login: true
  },
  component: _import_('System/index')
}

router.beforeEach((to, from, next) => {
  if (to.meta.login) { //判断前往的界面是否需要登陆
    if (store.state.user.user.name) { // 是否已经登陆
      next()
    }else{
      Vue.prototype.$alert('请先登录!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. 애니메이션 전환

라우터에 설정된 애니메이션 속성을 감지하여 어떤 종류의 전환 애니메이션을 수행하는지 확인합니다

Router.prototype.animate = 0

// 获取每个路由meta上面的slide 来判断它做什么动画
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    slide: 1 
  },
  component: _import_('System/index')
}


watch: {
  $route (to, from) {
    /*
    0: 不做动画
    1: 左切换
    2: 右切换
    3: 上切换
    4: 下切换
    ...
     */
    let animate = this.$router.animate || to.meta.slide
    if (!animate) {
      this.animate = '' 
    }else{
      this.animate = animate === 1 ? 'slide-left' :
        animate === 2 ? 'slide-right' :
        animate === 3 ? 'slide-top' :
        animate === 4 ? 'slide-bottom' : ''
    }
    this.$router.animate = 0
  }
}

4. 재생

IOS에서는 동영상 컨트롤을 숨길 수 없기 때문에 캔버스를 그려서 동영상을 숨기고 동영상을 재생하는 효과를 얻을 수 있습니다

5 아이콘은 Alibaba 벡터 그래픽

6을 사용합니다.

7. Easy Mock

위 내용은 나중에 도움이 되길 바랍니다.

관련 기사:

vue에서 객체 속성이 변경될 때 뷰가 업데이트되지 않는 문제를 처리하는 방법은 무엇입니까?

vue2.0의 다양한 화면 적응에 대한 px 및 rem 변환 문제

Vue에서 진행 표시줄을 사용하여 파일 드래그 및 업로드 기능을 구현하는 방법

위 내용은 Vue를 사용하여 Toutiao 모방(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!