Vue 2.0 사용 과정 에서 흔히 볼 수 있 는 문제 요약 학습

4741 단어 vue.js문제.
최근 에 Vue 를 공부 하고 있 는데 오늘 마침 학습 노트 를 써 서 예전 에 겪 었 던 잘못 을 정리 해 보 세 요.
Vue 의 현재 개발 모델 은 주로 두 가지 가 있 습 니 다.
1.직접 페이지 급 개발,script 직접 Vue 도입
2.공정 성 개발,웹 팩+loader 또는 비계 도구 Vue-cli 를 직접 사용 하여 안의 파일 을 모두 설정 하 였 습 니 다.
웹 팩 은 다 중 파일 입 구 를 설정 하고 다 중 페이지 개발 을 할 수 있 습 니 다.
두 번 째 Vue 개발 은 웹 팩 과 결합 하여 파일 을 포장 하면 매우 클 것 입 니 다.이 문 제 를 어떻게 해결 합 니까?
1.webpack 코드 분할:code-spliting
2.공공 추출(예:css,js 추출)
3.프 리 렌 더 링:prerender-spa-plugin 플러그 인 사용
4.백 스테이지--압축 을 켜 면 gzip(유용 할 것 이다)
5.비동기 로 딩 구성 요소:require.ensure
Vue 자주 발생 하 는 오류 해결 방법:
1.[Vue-warn]: Missing required prop: "to"  (found in component )
이 오 류 는에 to 가 하나 빠 졌 거나 잘못 썼 습 니 다.올 바른 쓰기 방법 은또한 경로 가 문자열 연결 을 할 때 to 는 속성 으로 연결 해 야 합 니 다.
2.포트 충돌 오류:포트 변경 필요
물론 현재 vue 2.0 의 웹 팩 은 포트 번호 에 따라 스스로 고 칠 것 입 니 다.8080 에서 뒤로 점점 증가 하고 포트 번호 충돌 이 발생 하지 않 습 니 다.vue 1.0 에 서 는 자주 발생 합 니 다.
3.[Vue-warn]:Unknown custom element: - did you register the component correctiy?
오류 1:도 입 된 vue-router 에 use()가 없습니다.

　　import Vue from 'vue'
　　import VueRouter from 'vue-router'
　　Vue.use(VueRouter);
오류 2:루트 실례 를 생 성 한 후,루트 를 Vue 실례 에 걸 지 않 았 습 니 다

const router=new VueRouter({
　　mode:'history',//      ，  history  ,     /#/home
　　scrollBehavior:()=>({ //         ，                  
 　　　　y:0
　　}),
　　//        
 　　routes
 });
 new Vue({
　　/* 4.    vue  */
　　router,
　　el: '#app',
　　render: h => h(App)
 });
4.Uncaught TypeError: _vuex2.default.store is not a constructor
이 신문 이 틀린 것 은vuex 2.default.store 는 구조 함수 가 아 닙 니 다.vuex 를 사용 할 때 사용 해 야 할 actions,mutations 모듈 을 최종 적 으로 내 보 냅 니 다.내 보 낼 때 new Vuex.Store 의 Store 소문 자 입 니 다.여 기 는 반드시 대문자 로 써 야 합 니 다.이것 은 우리 가 구조 함수(클래스)를 사용 할 때 이니셜 을 대문자 로 써 야 하 는 것 과 같 습 니 다.

 　　import mutations from './mutations.js'
　　import actions from './actions.js'

　　export default new Vuex.Store({ //Vue.Stroe()     
 　　　　modules:{ //    mutations        
 　　　　　　mutations
　　　　},
　　　　　　actions
　　　　});
5. Moudel not found:Error:Can't resolve "style" in 'D:\vue-demo'
vue 1.0 에서 webpack.config.js 에서 css 파일 을 설정 할 때

 　　module:{
　　　　loaders:[
　　　　　　{
　　　　　　　　test:/\.css$/,
　　　　　　　　loader:'style!css'
　　　　　　}
　　　　]
　　}
vue 2.0 에서 webpack.config.js 에서 css 파일 을 설정 할 때,vue 1.0 과 같이 간략하게 쓸 수 없습니다.

 　　module:{
　　　　rules:[ //     rules
　　　　　　{
　　　　　　　　test:/\.css$/,
　　　　　　　　loader:'style-loader!css-loader' //       ，   vue1.0    
 　　　　　　}
　　　　]
　　}
6.구성 요소 간 통신 이 1.0 에서 2.0 으로 넘 어 갈 때 발생 하 는 오류:
vue 1.0 부자 구성 요소 의 통신 실현-->props 속성 을 통 해-->그리고 하위 구성 요 소 는 부모 구성 요소 의 데 이 터 를 sync 로 동기 화 할 수 있 습 니 다.
vue 2.0 에서 부모 급 데 이 터 를 직접 변경 할 수 없 으 며,이 방법 을.sync 에서 제거 합 니 다.
하위 구성 요소 가 부모 구성 요소 의 데 이 터 를 변경 하려 고 할 때 오류 가 발생 합 니 다. 
해결 방법:
1.$emit()―단일 이벤트 관리
자주 발생 하 는 문 제 는$emit()나$on()을 찾 을 수 없다 는 것 입 니 다.이 때 는 파일 Store.js 를 따로 준비 해 야 합 니 다.
파일 에 필요:var oEvent=new Vue();
이 파일 의 데 이 터 는 반드시 안내 해 야 사용 할 수 있 습 니 다:export default oEvent
2.대상 간 인용:(추천)
vue 1.0 전송 데이터:msg:'welcome'-->하위 레벨 전송
vue 2.0 은 데 이 터 를 대상 json 의 형식 으로 직접 정의 합 니 다.이렇게 하위 급 에 전 달 된 데 이 터 는 대상 의 속성,즉 msg.title 입 니 다.
이 단계 에서 부모 급 데 이 터 를 수정 합 니 다.수 정 된 것 도 이 대상 의 속성 msg.title 입 니 다.

　msg:{
　 　　title:'welcome'
　　 　}
 msg.title
7.vuex 로 구성 요소 상 태 를 관리 합 니 다.(증가/감소,표시/숨 기기)
8.axios 는 현재 사용 할 수 없습니다.왜냐하면 axios 에는 설치 방법 이 없 기 때 문 입 니 다. 
axios 를 사용 할 때 이렇게 사용 할 수 있 습 니 다:
1.axios 파일 가 져 오기

import axios from 'axios'
2.다른 구성 요소 에 서 는 this.$https.get/post 를 통 해 axios 를 Vue 인 스 턴 스 위 에 올 려 놓 습 니 다.
main.js 에 Vue.prototype.$http=axios
다른 구성 요 소 는 직접 사용 할 수 있 습 니 다:

 　　this.$http.get('data.txt').then((res)=>{
　　　　console.log(res.data);
　　}).catch((err)=>{
　　　　console.log(err);
　　});
10.element.ui 헤더 클릭 이벤트
element.ui 를 사용 한 후@click=""헤더 등 요소 에 클릭 이 벤트 를 추가 할 수 없습니다.정확 한 작성 방법 은@click.native="입 니 다.
11.webpack 2.0 플러그 인의 설정 은 plugins 에 넣 어 설정 해 야 합 니 다.rules 에 넣 어 설정 할 수 없습니다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
vue 에서 jQuery 와 Bootstrap 를 어떻게 도입 합 니까?
php ip 주소 마스크 연산 처리 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage