vue 프로젝트 실전 총결산 편

이 글 은 소 편 이 얼마 전에 만 든 vue 프로젝트 를 완전한 정 리 를 하고 구체 적 인 내용 은 본 고 를 참고 하 시기 바 랍 니 다.
이번 에는 프로젝트 구축 부터 마지막 서버 까지 상세 하 게 정리 한 셈 이다.
쓸데없는 소리 하지 마.건어물 을 직 거래 하 다.
1.node 환경 이 필요 합 니 다.이번 에는 node 환경의 설 치 를 쓰 지 않 겠 습 니 다.이틀 후에 나 는 node 환경의 설치 수필 을 쓸 것 이다.
2.node 환경 을 맞 춘 후.전체 vue 를 열다.
1.vue 비 계 를 설치한다.

　npm install -g vue-cli

2.비계 로 프로젝트 만 들 기(명령 줄 에 불과)

　vue init webpack-simple (    )

혹시

　vue init webpack (    )

양자 차이(개인 이해):
vue init webpack-simple:가 볍 고 불필요 한 설정 과 가방 이 없 지만 프로젝트 의 정상 적 인 운행 을 보장 할 수 있 습 니 다.
vue init webpack:완전한 것 으로 이해 할 수 있 으 며,비교적 많은 설정 과 가방 을 포함 합 니 다.
3.이번 에는 vue init webpack 전체 버 전 을 사용 합 니 다.
(1)vue init webpack 을 실행 하면 다음 옵션 을 만 날 수 있 습 니 다.

위 선택(필요 에 따라 선택)을 완료 하고 필요 한 의존 도 를 다운로드 한 후.
(2)새로 만 든 프로젝트 에 들 어가 npm install 을 실행 합 니 다.
　　eg: PS E:\vueTest\vueTest2> npm run dev
아래 에 나타 나 면 vue 프로젝트 가 이미 다 되 었 음 을 증명 합 니 다.
　
(3)브 라 우 저 열기,접근http://localhost:8080，
아래 페이지 가 나타 나 면 vue 프로젝트 가 정상적으로 실행 되 었 음 을 설명 합 니 다.틀 이 이미 다 놓 였 다.
　　
(4)뼈 대 를 다 만 들 었 고 지금 은 피 와 살 을 주어 뼈 에 없 게 한다.
이번 에는 axios 로 서버 에 요청 합 니 다.
vuex 는 우리 의 전단 데 이 터 를 관리 합 니 다.
우 리 는 먼저 이 두 개의 의존 패 키 지 를 설치 하고,세트 에 따라 가 야 한다.npm install axios vuex--save
이 곳 에서 제 가 보충 을 하 겠 습 니 다.의존 패 키 지 를 설치 할 때--save-dev 또는--save 에 사용 합 니 다.
설 치 된 의존 패 키 지 는 프로젝트 에서 이 파일 package.json 에서 보 여 줍 니 다.
--save:접속 후 사용 할 것.(실행 후 다음 그림 의 dependencies 에 대응 합 니 다)
--save-de:개발 시 사용 할 가방.(실행 후 다음 그림 의 devDependencies 에 대응)
　　
여기 서 저도 문제 가 있 습 니 다.설 치 된 의존 패 키 지 는 dependencies 에 넣 는 것 입 니까?devDependencies 에 넣 는 것 입 니까?
인터넷 에서 한참 을 찾 았 지만 정확 한 답 을 얻 지 못 하고"개발 환경 에 사용 되 는 가방 은 devDependencies 에 두 고 온라인 에서 사용 되 는 의존 가방 은 dependencies 에 두 었 다"고 얼렁뚱땅 말 했다.그래서 저 는 제 이해 에 따라 넣 었 습 니 다.vue,vuex,axios,vue-router 는 dependencies 에 두 고 다른 의존 가방 은 devDependencies 에 두 었 습 니 다.제 근 거 는 기본 으로 프레임 워 크 를 만 들 때 vue,vue-router 는 dependencies 에 두 었 기 때문에 vue 프로젝트 와 밀접 한 관 계 를 가 진 vuex,xios 도 dependencies 에 두 었 습 니 다.
(5)의존 패키지 가 설치 되 었 습 니 다.지금.경로(router)와 데이터 관리 창고(store)를 설정 합 니 다.
개발 의 규범 과 청결 을 위해 서 나 는 이 두 조각 을 각각 두 개의 폴 더 에 넣 었 다.
　　　　
(6)이제 따로따로 말한다.우선 router(경로)를 정리 합 니 다.
　　
(7)데이터 관리―창고(store)
이 건 의 는 먼저 홈 페이지 를 살 펴 보 자.https://vuex.vuejs.org/zh-cn/
여기 서 나 는 세분 화 된 분류 와 대체적인 절차 도 를 제시 할 것 이다.
이 store 폴 더 의 js 캡 처:actions.js,moutations.js,index.js,types.js,getters.js
　　

index.js 는 actions.js 와 moutations.js 를 관리 합 니 다.
actions.js 는 자바,중의 service 층 에 해당 하 며 인터페이스 에 해당 합 니 다.(자바 에 익숙 하지 않 으 면 actions.js 의 목적 은 책의 목록 이 라 고 생각 할 수 있 습 니 다.프로젝트 를 깔끔 하고 한눈 에 알 수 있 도록 actions.js 를 열람 하고 모든 저장 작업 의 목적 을 파악 합 니 다)
moutations.js 는 자바,dao 층 에 해당 하 며 액세스 데이터 와 관련 이 있 습 니 다.(자바 에 익숙 하지 않 으 면 moutations.js 의 목적 은 데 이 터 를 저장 하고 데 이 터 를 변수 에 저장 하여 저장 하 는 것 이 라 고 생각 합 니 다).
getters.js 는 창고 의 데 이 터 를 얻 는 방법 입 니 다.(모든 데 이 터 를 가 져 오 는 작업 을 함께 하 는 것 이 목적 이다.관리 와 검색 이 편리 하 다.
types.js 는 데 이 터 를 저장 할 때 actions.js 의 방법 과 moutations.js 의 방법 이 일대일 로 대응 한 다 는 것 을 분명히 나타 낸다.이렇게 조리 가 분명 하 다.
actions.js,motations,getters 세 사람의 관 계 를 대체적으로 보 여 주 었 다.
　　
(8)vue 에서 아 날로 그 데이터.
vue 에서 아 날로 그 데이터 의 의미:로 컬 테스트 를 할 때 방법 은 아 날로 그 데 이 터 를 방문 합 니 다.프로젝트 가 출시 되면 호출 방법 을 사용 할 때'.do'요청 을 직접 방문 하여 서버 에 물 어보 고 데이터 베 이 스 를 되 돌려 주 는 데 이 터 를 물 습 니 다.
vue 프로젝트 에서 mock 데이터 만 들 기:static 에서 mock 폴 더 만 들 기 및 config.js 다음 그림
　　
vue 프로젝트 에서 mock 데 이 터 를 어떻게 설정 하고 온라인 후의 요청 을 합 니까?
최근 vue 프로젝트 를 할 때 문제 가 생 겼 습 니 다.데 이 터 를 모 의 할 때 mock 의 json 데 이 터 를 어떻게 설정 하 는 지.
오래된 vue 비계 에 서 는 dev-server.js 를 통 해 mock 데 이 터 를 설정 합 니 다.

그러나 새로운 vue 비 계 는 다음 그림 입 니 다.dev-server.js 가 없습니다.이때 mock 데 이 터 는 어떻게 설정 합 니까?정 답 은 mock 설정 을 webpack.dev.conf.js 에 두 었 습 니 다.

웹 팩.dev.conf,js 를 찾 아 다음 설정 을 진행 합 니 다.


(9).프로젝트 가 완료 되면 포장 명령 은 npm run build 입 니 다.
프로젝트 에서 가방 을 생 성 합 니 다.다음 그림:

(10).생 성 된 항목 을 서버 에 연결 하려 면 경로 문제 에 주의해 야 합 니 다.
프로젝트 의 config 폴 더 아래 index.js 에서 assets PublicPath,서버 경 로 를 설정 합 니 다.(필요 에 따라 설정 하면 기본 값 으로 사용 합 니 다)
　　
지금까지 vue 와 관련 된 문 제 는 대체적으로 정리 되 었 다.