Vue cli 구축 및 프로젝트 패키지 및 문제 해결

1.먼저 node 를 설치 하고 짝수 버 전 을 추천 합 니 다.자,다음 검사:node-v;버 전이 좋 으 면 설치 에 성공 하 는 것 입 니 다.win 10 홈 버 전의 msi 버 전이 나 올 때 열 수 없고 설치 하 는 것 은 커 녕 자체 바 이 두 를 사용 할 수 있 습 니 다.
2.nmp install vue-cli -g; ----->>vue -V;버 전 번호 가 나 오 면 설치 에 성 공 했 습 니 다.
3.cd 에서 지정 한 디 렉 터 리 로 가기;vue init webpack 프로젝트 이름;일부 힌트 정 보 는 일일이 말 하지 않 는 다.설치 에 성공 하면 알림 이 있 습 니 다.보통 그의 알림 절차 에 따라 cd 프로젝트 폴 더,
npm install(이것 은 packjson.json 을 설치 하 는 의존 입 니 다.매우 중요 합 니 다)마지막 으로 npm run dev 를 실행 합 니 다.8080 포트 에서 웹 페이지 를 자동 으로 열 수 있 습 니 다.그러면 환경 이 성공 적 입 니 다.
4.아주 중요 한 파일 몇 개 를 소개 합 니 다.
config 디 렉 터 리 의 index.js 는 설정,nodemodules 아래 는 모두 모듈 에 의존 할 폴 더 입 니 다.src 는 로 컬 자원 입 니 다.예 를 들 어 우리 가 작성 할 파일;그 중에서 main.js 는 입구 파일 입 니 다.
5.vue 파일 의 모듈 화 도입 을 소개 합 니 다.기억력 이 썩 은 붓 보다 못 합 니 다.
프로젝트 디 렉 터 리 부분:

예 를 들 어 App.vue 에 다른 모듈 을 도입 해 야 합 니 다.
importcomponenta@/coponents/coponenta//아래 그림 ruter-view 탭 은 표시 만 표시 합 니 다.구성 요소 가 있 으 면 표시 할 수 있 는 것 이 아니 라 router-view 가 필요 합 니 다.현재 app.vue 는 기본 루트 모듈 입 니 다.

바나나 에 서 는 이렇게 해 야 합 니 다.<하나의 표준 vue 파일 은 아래 세 가지 큰 탭 을 포함해 야 합 니 다>그 중에서 name 속성 이 없어 서 는 안 됩 니 다.

주의:이 안에 있 는 변 수 는=new Vue({})와 같은 것 을 설명 할 필요 가 없습니다.이 파일 자체 가 하나의 인 스 턴 스 를 대표 합 니 다.export default 에 서 는 vue 글자 의 대상 에 대한 설명 이 라 고 생각 할 수 있 습 니 다.
경로 전송 매개 변수:(다음은 main.js)여기 구덩이 가 있 습 니 다.

웹 팩 vue-cli 로 프로젝트 를 자동 으로 구축 한 후,루트 모듈 이 main.js 아래 에 있 는 지,아니면 router 파일 아래 에 있 는 index.js 에 있 는 지 주의 하 십시오.
쓸데없는 소리 하지 마 세 요.여기 서 관건 은 루트 를 정확하게 도입 하 는 것 입 니 다.루트 를 정확하게 설정 하 는 것 입 니 다.루트 마다 name 속성 을 주어 루트 를 편리 하 게 사용 할 수 있 습 니 다.루트 에서 루트 를 전달 하 는 중 path 의 마지막 위조 번 호 는 쓰 지 않 아 도 됩 니 다.전 제 는(다음은 구성 요소 componenta)입 니 다.
에서 params:{}이 대상 에 쓰 여 있 습 니 다.쓰 는 것 과 쓰 지 않 는 것 의 차 이 는 url 주소 표시 줄 에 쓰 지 않 거나 표시 하지 않 는 것 입 니 다.하지만 하위 구성 요소 에서$router.params 를 사용 하면 찾 을 수 있 습 니 다.

다음은 Apple 하위 구성 요소 입 니 다.{$route.params.color}도 추출 할 수 있 습 니 다.

어떻게 프로젝트 에서 세 번 째 라 이브 러 리 를 사용 합 니까?
예 를 들 어 jquery 를 사용 하면 먼저 npm install 입 니 다[email protected] ;
main.js(입구 파일)import jquery from'jquery';그리고 한 구성 요소 에서 사용 할 때 import jquery from"jquery";이렇게 jquery 는 전역 변수 입 니 다.
바 이 두 의 echarts 라 이브 러 리 사용:main.js 에서 도입:

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

사용 할 때 바로 this.$echarts 입 니 다.this 는 vue 인 스 턴 스 를 말 합 니 다.
프로젝트 완료 후 npm run build 로 프로젝트 를 포장 할 수 있 습 니 다.config 폴 더 에 설 정 된 index.js 의 build 대상 에 포장 하기;이 책 에서 미리 볼 필요 가 있 으 면 assets PublicPath:'./'를 상대 경로 로 변경 합 니 다.css 파일 에서 background 상대 경 로 를 참조 하면 포장 후 미리 보기 한 후에 자원 을 찾 을 수 없 는 상황 이 발생 합 니 다.build 폴 더 의 utils.js 에서:이 publicPath 속성 을 추가 할 수 있 습 니 다.

다음은 History 모드 를 구체 적 으로 말씀 드 리 겠 습 니 다.
 1、왜 열 어 요?
우선,당신 의 사이트 홈 페이지,도 메 인 이름 뒤에 큰\#,너무 못 생 겼 어 요!그의 아름 답 고 멋 진 프로그램 을 개발 하 는 왕 과 는 전혀 어 울 리 지 않 는 다.
그 다음으로 홈 페이지 에 서 는"history 모드 는 history.pushstate API 를 충분히 이용 하여 URL 전환 을 완성 하고 페이지 를 다시 불 러 올 필요 가 없다"고 크게 말 했다.
어떻게 이해 하지?흔히 볼 수 있 는 장면 을 들 어 보면 핸드폰 애플 리 케 이 션 을 개발 했다 면 홈 페이지 에서 뉴스 목록 을 클릭 하 세 요.이때 뉴스 를 보고 홈 페이지 로 돌아 가 고 싶 습 니 다.예전 의 생각 대로 라면 href 가 홈 페이지 를 다시 여 는 것 입 니 다.그리고 첫 페이지 에 js 를 다시 불 러 오고 서버 에 뉴스 목록 을 요청 하 는 등 초기 화 된 작업 을 다시 해 야 합 니 다.사용자 에 게 있어 이 과정 이 느 리 고 비용 이 들 며 사용자 체험 은 사실 좋 지 않다.
html 의 history 모드 는 뉴스 상세 페이지 에서 첫 페이지 로 넘 어 갈 수 있 습 니 다.데이터 초기 화 를 다시 할 필요 가 없습니다.물론 vuex 에 맞 춰 진행 해 야 할 것 같 습 니 다.
 2、어디서 열 어 요?
라 우 터 를 실례 화 할 때 설정 을 켜 면 됩 니 다:

const routers = new VueRouter({
 routes: router,
 mode: 'history'

})

상술 한 것 이 바로 현재 직면 하고 있 는 몇 가지 기본 적 인 문제 이다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.