vue-cli는 vue.js 프로젝트의 메소드 인스턴스를 초기화합니다.

패키지된 .vue 파일 구문 분석

프로젝트 개발 중에 구성 요소를 더 잘 관리할 수 있도록 Vue는 단일 파일 구성 요소 시스템을 제공합니다. 이 파일은 세 가지 기본 사용자 정의 태그를 제공합니다. 1. template
2.script
3.style
다양한 컨텐츠 블록을 배치하려면 브라우저가 파일 유형을 직접 인식할 수 없기 때문에 webpack을 사용해야 합니다. 공식에서는 처리를 위한 로더를 제공합니다. vue: vue-loader

ERROR in ./src/Hello.vue

모듈 빌드 실패: 오류: 'vue-template-compiler' 모듈을 찾을 수 없습니다

vue의 실제 개발은 . 그러나 실제 복잡한 요구 사항을 충족할 수는 없습니다. 또한 .vue와 통합하려면 많은 항목을 구성해야 합니다. 이 구성은 매우 번거롭기 때문에 공식에서는 사용되어야 하는 일부 콘텐츠를 구축하는 데 도움이 되는 도구를 제공합니다. 프로젝트의 개발 프로세스인 이 도구: vue-cli, 이 도구를 통해 우리는 vue 기반 프로젝트를 쉽게 만들 수 있습니다. 우리는 이 도구를 --- scaffolding

설치

npm install vue-cli -g(global )

또는
yarn global add vue-cli

위 방법을 통해 vue 스캐폴딩을 설치한 후 명령줄에서 다음 명령을 사용할 수 있습니다. vue (명령에는 -cli가 없습니다.)

vue 사용법

vue init

init: vue 기반 프로젝트 초기화(생성)

vue init webpack hello: webpack 기반 hello라는 vue 프로젝트 빌드(프로젝트 빌드는 Network! Network여야 합니다!)

vue-cli는 대화형 프로젝트입니다. vue 명령을 통해 프로젝트를 빌드하려면 다음과 같은 몇 가지 프로젝트 정보를 입력해야 합니다.

프로젝트 이름: 생성할 프로젝트의 이름(이 명령은 패키지 .json 파일을 생성합니다. 파일의 이름 옵션은 다음과 같습니다. ProjectName은 기본적으로 현재 생성된 프로젝트 디렉터리의 이름을 사용합니다. 사용자 정의할 수도 있습니다(그러나 package.json의 이름 명명 규칙을 준수해야 합니다. 대문자, 공백 또는 밑줄을 사용하지 마십시오. - )

프로젝트 설명: 프로젝트 소개, package.json 파일에도 표시됨, 선택 사항

저자: 작성자, 선택 사항

다음 단계에서 직접 입력

Install vue-router: vue 라우팅 구성 요소 설치 여부 , do 프로젝트를 설치해야 합니다

코드를 린트하려면 ESLint를 사용하세요. 코드 감지를 위해 ESLint 모듈을 사용해야 합니까?

Karma + Mocha로 단위 테스트를 설정합니까?: 테스트(단위 테스트)를 설치하시겠습니까?: 예 엔드투엔드 테스트 설치

위 단계를 완료하세요!

vue-cli를 통해 구성을 완료한 후 다음 단계는 vue에 필요한 종속성 패키지를 설치하는 것입니다. 프로젝트가 설치해야 하는 종속성 패키지는 vue-cli 도구에서 자동으로 생성된 package.json 파일에 설명되어 있습니다.

종속성: 프로젝트의 실제 종속성 사용해야 하는 종속성 패키지

devDependency: 프로젝트 개발 프로세스 중에 사용해야 하는 일부 도구 패키지는 프로젝트의 실제 온라인 코드의 일부가 아닙니다.

종속성 패키지 설치 후

실행에 필요한 항목이 설치되어 있으면 프로젝트를 시작하고 실행할 수 있습니다.

yarn run dev / npm run dev: 테스트 개발 환경 열기

yarn run build: 프로젝트 빌드, 프로젝트 패키징, 패키징된 프로젝트 파일 업로드 가능

처음 실행하는 경우 시작 페이지가 표시되며 아래에서 프로젝트 개발을 진행할 수 있습니다

프로젝트 구조

빌드 디렉터리: 프로젝트 명령을 빌드하는 데 필요한 일부 스크립트 파일 및 구성 파일

• config 디렉터리: vue-cli에 자동으로 설치됩니다. express로 구축된 작은 핫 리로드 웹 서버입니다. config에는 이 서버의 관련 구성이 포함되어 있습니다.

• dist 디렉터리: 프로젝트가 컴파일된 후의 저장소 디렉터리입니다. 온라인으로 구축됨

• node_modules 디렉토리: 프로젝트 종속성 패키지 저장 디렉토리

• src 디렉토리: 프로젝트 소스 코드 저장 디렉토리

• 정적 디렉토리: 정적 리소스 저장 디렉토리

• 프로젝트 개발 과정에서 대부분의 우리 작업은 src 디렉터리에서 완료됩니다

• main.js: 자동 생성된 프로젝트를 위해 Vue 스캐폴딩에 의해 설정된 항목 파일입니다. 이 항목 파일에서는 일부 프로젝트 초기화 작업이 완료됩니다

• Vue 소개

• 필요한 구성 요소 소개

• Vue 인스턴스 만들기

routing

애플리케이션이 복잡해지면 관련된 페이지 수도 늘어나고 로직도 복잡해집니다. 웹사이트를 구성하고 유지하는 데 여러 페이지를 사용한다는 사실이 밝혀졌습니다. , 그러나 사용자 경험이 그다지 좋지 않습니다(페이지가 새로 고쳐지거나 이동하기 때문에). 사용자 경험 문제를 해결하기 위한 가장 좋은 방법은 데이터이지만(페이지가 변경됨) 점프하거나 새로 고칠 필요가 없습니다. .

• ajax를 통해 새로 고침 없이 비동기적으로 데이터를 가져옵니다

• 데이터를 가져온 후 vue를 통해 처리 및 관리하고 페이지를 렌더링합니다

어떤 상황에서 페이지를 렌더링하기 위해 데이터를 가져오나요? 기존 처리 방법: 새 데이터와 페이지를 얻기 위해 URL을 통해 요청을 다시 보냅니다. 어떤 페이지 데이터를 얻을지는 URL에 따라 결정됩니다. 단일 페이지 개발 모드를 사용하는 경우 더 이상 페이지 점프를 사용할 수 없습니다. 얻을 콘텐츠와 렌더링할 페이지를 결정하기 위해 URL의 해시 값이 변경됩니다.

URL의 해시가 뷰에 해당하므로 해시와 뷰 간의 관계를 설정해야 합니다. 해시와 뷰 간의 대응 관계(매핑)를 만들 수 있습니다.
- 해시의 맵(매핑) 관계를 설정합니다. view
- 해시 변경 모니터링
- 해시 값이 변경되면 맵에 따라 해당 구성 요소를 찾아 뷰를 렌더링합니다.

vue는 위 기능을 구현하기 위한 타사 프레임워크를 제공합니다: vue-router

The 위에서 언급한 주소- 뷰 매핑: Routing

관련 권장 사항:

vue-cli

vue-cli로 vue 플러그인 인스턴스 작성

을 사용하여 다중 페이지 애플리케이션을 개발하는 간단한 예 vue-cli

에서 라우팅을 사용하는 방법

위 내용은 vue-cli는 vue.js 프로젝트의 메소드 인스턴스를 초기화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!