Vue 오늘 의 첫 번 째 인 스 턴 스 를 모방 하여 상세 하 게 설명 합 니 다.

머리말
vue 도 한 동안 했 습 니 다.얼마 전에 vue 로 이동 단 을 쓰 고 싶 었 습 니 다.게다가 연말 에 도 바 쁘 지 않 았 습 니 다.그래서 며칠 전에 시작 해서 오늘까지 겨우 볼 수 있 었 습 니 다.
순수한 전단 페이지 쓰기 이기 때문에 데이터 측면 에 서 는 mock.js 를 사용 합 니 다.실제 아 날로 그 요청 을 위해 Easy Mock 에서 직접 API 를 생 성 할 수 있 습 니 다.
이 프로젝트 의 Easy Mock 계 정 비밀 번 호 를 직접 로그 인 할 수도 있 습 니 다.
계좌번호:vue-toutiao
비밀번호:123456
인 터 페 이 스 를 수정 하고 싶 으 면 복사 해서 수정 하 십시오.
백 스테이지 인터페이스 도 직접 개발 하고 싶다 면이 블 로그 Vue+Node+Mongodb 에서 완전한 블 로그 프로 세 스 를 개발 하 는 것 을 읽 을 수 있 습 니 다.
기술 창고:
vue + webpack + vuex + axios
구조:

build:webpack 설정

config:프로젝트 설정 매개 변수

src

assets:정적 자원 파일,그림 저장 등

components:상용 구성 요소.예 를 들 면 탄창 등등...

directive:상용 명령 패키지

router:경로 표

store:상태 관리 vuex

styles:스타일 파일

utils:상용 공구 류 패키지

조회 수:보기 페이지

static:정적 파일: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.접속 차단
로그 인 이 필요 한 지 여 부 를 경로 의 beforeach 갈고리 함 수 를 통 해 판단 합 니 다.

//  ：        
{ 
  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 에 설 치 된 animate 속성 을 검사 하여 어떤 전환 애니메이션 을 만 드 는 지 판단 합 니 다.

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 에서 video 의 controls 를 숨 길 수 없 기 때문에 video 를 숨 길 수 있 습 니 다.canvas 를 그 려 서 영상 을 재생 하 는 효 과 를 얻 을 수 있 습 니 다.
5.icon 은 알 리 바 바 벡터 맵 을 사용 합 니 다.
6. mock.js
7. Easy Mock
코드 인 스 턴 스:https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao