Vue 프로젝트 - 코드 구조

1917 단어
생성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.jsbuild/---프로젝트 패키지용 설정 항목
구조조정: 첫째, /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의 구성 요소이다.

좋은 웹페이지 즐겨찾기