Vue 프로젝트 - 코드 구조
webpack
템플릿vue-cli
가 설치되어 있으면 프로젝트 루트가 있는 디렉터리에서 아래 명령을 실행하십시오.vue init webpack my-project
설치
vue-cli
가 없으면 위 명령을 실행하기 전에 아래 명령을 실행할 수 있습니다.npm install --global vue-cli
기본 코드 구조
README.md
- 프로젝트 설명 파일package.json
- 이 프로젝트에 필요한 각종 모듈과 프로젝트의 설정 정보(예를 들어 이름, 버전, 허가증 등 메타데이터)를 정의했다.package-lock.json
---npm에 자동으로 node 수정modules 트리나 그 어떠한 조작으로 패키지를 생성합니다.jsonLICENSE
---소스 오픈 프로토콜index.html
---프로젝트 기본 첫 페이지 템플릿.postcssrc.js
---postcss에 대한 설정 항목.gitignore
---git 제출 무시 파일 목록.eslintrc.js
---안에 일부 코드의 규범이 설정되어 있습니다. 규범에 따라 쓰지 않으면 오류를 알릴 수 있습니다..eslintignore
---eslint 문법에 따라 코드를 쓸 필요가 없는 파일 목록을 지정.editorconfig
---편집기의 일부 설정 항목.babelrc
---문법 해석기를 지정하여 우리의 코드를 브라우저가 식별하는 문법static
---정적 자원 파일 저장 위치node_modules
---항목에 의존하는 일부 제3자 패키지로 변환합니다.main.js
---전체 프로젝트의 입구 파일App.vue
---루트 구성 요소router/index.js
---루트 관리 프로필components
---프로젝트 중의 일부 구성 요소assets/
---프로젝트에 사용된 이미지 자원config/
---프로젝트의 구성 파일, 기초 정보index.js
에 놓고, 개발 환경 설정 정보dev.env.js
,온라인 환경 설정 정보prod.env.js
build/
---프로젝트 패키지용 설정 항목구조조정: 첫째,
/compontents
디렉터리를 삭제하고 디렉터리 구조/pages
를 추가한 다음에 한 페이지를 개발할 때, 예를 들어 home
페이지는 /pages/home/Home.vue
와 /pages/home/compontents
를 만들어서 개발한다. compontents
디렉터리는 home
페이지의 구성 요소, 예를 들어 Header.vue
등이다.2.
/src/common
디렉터리를 만들고 그 안에 공공 구성 요소를 넣는다. 예를 들어 갤러리 구성 요소는 /src/common/gallary/Gallary.vue
와 /src/common/gallary/compontents
를 만들어서 개발한다. compontents
디렉터리에 놓인 것은 gallary
의 구성 요소이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.