Vue2 + VueRouter 2 + Webpack + Axios 구축 프로젝트 실전 2017 재 제판 (3) 프로젝트 의 모든 파일 인식
6865 단어 vuejsFungLeo 의 전단 노트입문 강좌
에서 우 리 는 설치
nodejs 시스템 환경 과 vue-cli 비계 도 구 를 통 해 명령 을 실행 한 후에 초기 프로젝트 를 달 렸 다.하지만 우리 의 프로젝트 코드 는 아직 하나 도 보지 못 했다.그래서 이 장 에서 우 리 는 모든 서 류 를 알 아 보 자.
초기 파일 분석
├── README.md //
├── node_modules //
├── build // ，
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config //
│ ├── dev.env.js //
│ ├── index.js //
│ └── prod.env.js //
├── index.html //
├── package-lock.json // npm5 ，
├── package.json //
├── src //
│ ├── App.vue // APP
│ ├── assets // ，
│ │ └── logo.png
│ ├── components //
│ │ └── Hello.vue // ，
│ ├── main.js //
│ └── router //
│ └── index.js //
└── static // 좋아, 위 와 같이 우리
vue 가 초기 화 된 후에 얻 은 프로젝트 의 완전한 구조 이다.다른 대부분의 서 류 는 우리 가 상관 할 필요 가 없다.만약 관여 하려 고 한다 면, 나 는 뒤의 장절 에서 도 상세 하 게 설명 할 것 이다.우리 의 절대 다수의 조작 은 바로
src 이 목록 아래 에 있다.기본 적 인 src 구 조 는 비교적 간단 하 므 로 우 리 는 다시 정리 해 야 한다.또한
static 자원 디 렉 터 리 는 서로 다른 자원 을 배치 하 는 데 따라 서로 다른 하위 폴 더 를 구축 해 야 합 니 다.src 디 렉 터 리 를 설정 합 니 다.
우선 이 파일 들 의 내용 에 관여 하지 말고, 우 리 는 먼저 이 빈 파일 들 을 여기에 세 웁 시다.그리고 우 리 는 뒤에서 그것 을 보완 했다.
우리 의 이 항목 은 두 페이지 를 만 드 는 것 입 니 다. 하 나 는
cnodejs 의 목록 페이지 이 고 하 나 는 상세 한 페이지 입 니 다.그래서 나 는 프로젝트 폴 더 를 다음 과 같은 구조 로 정리 했다.
├── App.vue // APP
├── api //
│ └── index.js //
├── components // ，
├── config //
│ └── index.js //
├── frame //
│ └── frame.vue //
├── main.js //
├── page //
│ ├── content.vue // cnodejs
│ └── index.vue // cnodejs
├── router //
│ └── index.js //
├── style // scss
│ ├── base //
│ │ ├── _base.scss //
│ │ ├── _color.scss //
│ │ ├── _mixin.scss // scss
│ │ └── _reset.scss //
│ ├── scss //
│ │ ├── _content.scss //
│ │ └── _index.scss //
│ └── style.scss //
└── utils //
└── index.js // 우 리 는 기본 적 인 파일 을 삭 제 했 기 때문에 이 때 프로젝트 는 반드시 잘못 보 고 된 것 입 니 다. 먼저 그 를 상관 하지 않 고 우 리 는 우리 의 수요 에 따라 위 와 같은 프로젝트 구 조 를 새로 만 듭 니 다.이것들 은 모두
src 목록 안의 구조 이다.static 디 렉 터 리 를 설정 합 니 다.
이 디 렉 터 리 는 비교적 간단 합 니 다. 왜냐하면 이 프로젝트 는 우리 의 자원 이 많 지 않 기 때 문 입 니 다. 그러나 나의 이 일련의 박문 이 대부분의 프로젝트 의 개발 에 적합 하도록 보통 저 는 다음 과 같이 만 들 었 습 니 다.
├── css //
├── font //
├── image // ， ，
└── js // JS ， jquery당신 은 이상 할 수도 있 습 니 다. 우 리 는 스타일 과
JS 을 모두 안에 쓰 지 않 았 습 니까? 왜 여기에 두 어야 합 니까?src 목록 에 넣 었 다 면 포장 할 때마다 포장 해 야 하기 때문이다.이번 에는 우리 의 포장 항목 의 시간 을 늘 립 니 다.그리고 일부 지역 에 놓 인 파일 은 우 리 는 일반적으로 수정 하지 않 고 npm 설치 할 필요 도 없 으 며 직접 인용 하면 된다.당신 은 자신의 상황 에 따라 포장 하지 않 고 직접 인용 할 수 있 는 파일 을 추출 하여 자원 디 렉 터 리 에 넣 고 직접 호출 할 수 있 습 니 다. 그러면 우리 프로젝트 의 포장 효율 을 크게 향상 시 킬 수 있 습 니 다.자, 이렇게 하 자. 우리 의 파일 구조 가 다 되 었 으 니 다음 장 에 코드 를 쓰기 시작 하 자.
만약 에 글 이 제 가 학식 이 얕 아서 심각 한 오류 가 있 는 것 을 발견 하 게 된다 면 반드시 평론 에서 지적 해 주 십시오. 저 는 첫 번 째 시간 에 제 박문 을 수정 하여 남 의 자식 을 그 르 치지 않도록 하 겠 습 니 다.
본 고 는 FungLeo 가 창작 한 것 으로 전 재 를 허용 하지만 전 재 는 반드시 첫 번 째 링크 를 유지 해 야 한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[axios] post, get, delete에 객체 전달하기DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주면 된다. Axios - delete 요청 시 body에 데이터 넣는 법 출처 :...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
