웹 팩+vue 로 cnode 커 뮤 니 티 에서 만 든 모 바 일 앱 따라 하기^-^

이전 주소
온라인 미리 보기: http://47.112.16.176
github: https://github.com/153913232a/webpack-vue(사내 들 에 게 별 을 달 아 달라 고 부탁 했다)
 
vue 도 배 운 지 오래 되 었 습 니 다.그래서 뭔 가 를 하려 고 했 습 니 다.마침 cnode 커 뮤 니 티 에서 비교적 완벽 한 api 를 제 공 했 습 니 다.일주일 동안 모 바 일 커 뮤 니 티 를 만 들 었 습 니 다.스타일 은 참고 한 것 은?http://react-china.org/t/webpack-react-react-router-redux-less-flex-css-es6-react-cnode/6332 이 큰 녀석,그 가 사용 하 는 것 은 react 입 니 다.아주 6 으로 썼 습 니 다.시간 이 있 으 면 자세히 볼 수 있 습 니 다.
 
요약:
1.flex.css 모듈 레이아웃 을 사 용 했 습 니 다.가장 큰 느낌 은 css 를 쓰 는 것 입 니 다.css 에서 레이아웃 을 어떻게 쓰 는 지 고려 할 필요 가 없습니다.
2.http 요청 이 좀 많 습 니 다.최적화 해 야 합 니 다.
3.async+await 의 사용 에 익숙 해 졌 습 니 다.이 물건 은 매우 실 용적 이 고 동기 코드 의 실행 을 막 지 않 습 니 다.사실은 await 의 promise 대상 이 고 방법 밖 에 async 가 필요 합 니 다.
4.better-scroll 의 사용 에 익숙 해 졌 습 니 다.이동 단 h5 는 안 드 로 이 드 app ListView 의 미끄럼 효 과 를 가 집 니 다.scroll 안의 한 층 은 absolute 포 지 셔 닝 을 사용 해 야 합 니 다.만약 에 안 된다 면 고도 계산 에 문제 가 있 습 니 다(예 를 들 어 v-show=false 일 때 높이 를 계 산 했 습 니 다.refresh 만 하면 Ok 입 니 다).
5.vuex,브 라 우 저 캐 시 등의 사용 에 익숙 합 니 다.vue 구성 요소 에 서 는$store 를 통 해 호출 되 며,script 은 this.$store 로 호출 되 며,문법 설탕 도 사용 할 수 있 습 니 다.mapGetters,mapMutations 등 을 통 해 호출 될 수 있 습 니 다.
6.vue-router 내장 사용 에 익숙 합 니 다.이 app 에는 두 개의 경로 가 내장 되 어 있 습 니 다.
7.웹 팩 의 설정 과 사용 에 익숙 합 니 다.
8.글씨체 그림 의 사용 에 익숙해 져 자 유 롭 게 스타일 을 바 꿀 수 있어 편리 합 니 다.
 
만난 구덩이:
1. regeneratorRuntime is not defined
이 잘못 은 내 가 vue 에서 async await 타 임 스 를 사용 한 잘못 이다.인터넷 에 서 는 vue 중의 es6 를 es5 로 바 꾸 지 않 았 기 때 문 이 라 고 말 했다.왜냐하면 async await 는 es6 리 이기 때문이다.
해결:설치  babel-polyfill babel-plugin-transform-runtime， .babelrc

"plugins": [
    "transform-runtime"
]

2. Cannot read property '_withTask' of undefined
이것 은 클릭 에 방법 이 적 혀 있 는 것 일 수도 있 지만 methods 에 서 는 정의 가 없습니다.
3.vue-router 에 대한 질문
이것 은 저도 어떻게 묘사 해 야 할 지 모 르 겠 습 니 다.바로 하나의 구성 요소 가 길 을 통 해 하위 구성 요소 로 넘 어 갈 때 렉 이 걸 립 니 다.(빈 페이지 에 아무것도 없 는 것 이 이상 합 니 다)그러나 사실은 하위 구성 요소 가 이미 만 들 어 졌 습 니 다.저도 왜 그런 지 모 르 겠 습 니 다.나중에 저 는 가장 바깥쪽 에 loading 알림 상 자 를 추가 하여 이 문 제 를 해결 하 였 습 니 다.
router.beforeach 에 대한 사용 도 있 습 니 다.
처음에 나 는 이렇게 썼 다.

router.beforeEach((to, from, next) => { //         ，     
  if(to.meta.auth) {
    if(storage.get('user')) {
      next()
    } else {
      next({
        path: '/sigin',
        query: {redirect: to.fullPath}
      })
    }
  } 
})

그리고 길 은 gg 입 니 다.분명 한 것 은 이곳 의 beforeach 가 모든 길 을 막 을 것 이다.그러나 이 안 에는 검증 이 필요 한 경로 만 판단 되 어 다른 길 은 지나 갈 수 없다.
해결:
이렇게

router.beforeEach((to, from, next) => { //         ，     
  if(to.matched.some(res => res.meta.requireAuth)) { //            ，        
    if(storage.get('user')) {
      next()
    } else {
      next({
        path: '/sigin',
        query: {redirect: to.fullPath}
      })
    }
  } else { //             
    next()
  }
})

4.웹 팩 설정 에 대한 질문
질문
devserver 에이전트 문제:

proxy: {
  '/api/*': {
    target: 'https://cnodejs.org',
    pathRewrite: { '^/api': '/api' },
    changeOrigin: true,
    secure: false, //        https     
  }
}

이렇게 쓰 면 ok 이 야.즉/api/v1/topics 상대 경로 에이전트https://cnodejs.org/api/v1/api/v1/topics
포장 문제:devserver 를 사용 할 때 정상 입 니 다.build 후 서버 에 올 렸 을 때 스타일 이 모두 어 지 러 워 졌 습 니 다.그 다음 에 구성 요소 의 스타일 이 마지막 css 파일 에 포장 되 지 않 았 고 자신 이 쓴 공공 스타일 도 포장 되 지 않 았 으 며 제3자 라 이브 러 리 스타일 만 있 었 습 니 다.예 를 들 어 element-ui,flex.css 등 이 이상 합 니 다.나중에 인터넷 에서 말 한 것 에 따라 main.js 에 있 는 파일 의 순 서 를 조정 한 후에 도 별 쓸모 가 없 었 다.마지막 으로 저 는 제3자 라 이브 러 리 의 css 와 자신 이 쓴 css 를 두 개의 다른 파일 에 포장 합 니 다.구체 적 으로 코드 에 있 는 webpack.config.js 파일 을 볼 수 있 습 니 다.
컴 파일 속도 문제:내 가 가장 느 낀 것 은 아마도 내 가 맞 춘 웹 팩 컴 파일 이 정말 느 린 것 일 것 이다...매번 스타일 을 고치 거나 어디 를 조금 움 직 일 때마다 몇 십 초 를 다시 컴 파일 해 야 하 는데 저 는 강박 증 이 있어 서...
5.activated 생명주기 함수 사용
맨 바깥쪽 에 keep-alive 를 넣 었 기 때문에 경로 에서 push 를 당 합 니 다. back 후 구성 요소 가 소각 되 지 않 기 때문에 문제 가 발생 했 습 니 다.실제 적 으로 하나의 구성 요소 에 들 어 갈 때마다 created 를 실행 하여 데 이 터 를 다시 가 져 오 려 고 할 수도 있 습 니 다(예 를 들 어 첫 페이지 에서 상세 페이지 로 이동).keep-alive 를 제거 할 수 있 지만 다른 구성 요소 에 대한 효율 은 높 지 않 습 니 다.vue 는 activated 함 수 를 제공 합 니 다.경로 가 들 어 올 때마다 이 갈 고 리 를 촉발 합 니 다.그러면 이 함수 에서 데 이 터 를 얻 을 수 있 습 니 다.이 함 수 는 제 가 쓴 구성 요 소 를 관통 시 킬 수 있 습 니 다.
어디 에 문제 가 있 으 면 여러분 이 지적 해 주 셨 으 면 좋 겠 습 니 다!!