Vue 프로젝트 구축 및 실제 예제 튜토리얼

Vue의 비교적 부드러운 학습 프로세스와 참신한 기술 아이디어로 인해 대다수의 프런트엔드 및 백엔드 개발자가 선호하는 동시에 이해하기 쉬운 API 및 데이터 바인딩 기능도 많은 관심을 받았습니다. 주의. 이 글은 주로 Vue 프로젝트의 구성과 실제 구현에 대해 설명하므로 API와 구문을 너무 많이 다루지는 않습니다. Vue의 초보 사용자가 Vue 프로젝트를 처음부터 구축하는 단계와 방법을 이해할 수 있도록 설계되었습니다.

먼저 Vue 프로젝트를 구축하기 전에 Vue 프로젝트의 분류를 이해해야 합니다. 여기서는 크게 두 가지 범주로 나눕니다: (1) vue.js 파일을 직접 소개합니다. (2) vue 단일 파일 구성 요소를 사용합니다.

위의 두 가지를 누르세요. 클래스 관점에서 vue.js 파일을 직접 도입하는 것은 jQuery를 페이지에 직접 도입하는 것과 같습니다. 이러한 프로젝트는 결함이 많고 일부 기본 API와 제한된 기능만 사용할 수 있습니다. 일반적으로 주니어 사용자와 제한된 기능만 사용할 수 있습니다. 작은 프로젝트. 이 기사에서는 주로 Vue를 사용하지만 파일 구성 요소를 사용하여 구축된 두 번째 유형의 Vue 프로젝트를 설명합니다.

Vue 프로젝트를 구축하는 방법에는 여러 가지가 있습니다. 먼저 해당 구축 도구를 사용해야 합니다. 공식적으로 권장되는 빌드 도구에는 주로 webpack과 browserify가 포함됩니다. 여기에서는 빌드에 webpack을 사용하는 것이 좋습니다. 동시에 빌드 도구 외에도 빌드 방법도 사용해야 합니다. 예를 들어 vue-cli 스캐폴딩을 사용하여 vue 프로젝트의 기본 디렉터리 파일을 자동으로 생성할 수도 있습니다. 처음부터.

vue-cli build

vue-cli 스캐폴딩을 사용하여 vue 프로젝트를 빌드하는 경우 간단한 vue 프로젝트를 생성하려면 다음 5줄의 명령만 입력하면 됩니다(전제 조건은 node.js 설치):

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

이런 종류의 빌드 방법은 모든 프로젝트에 적합하지 않을 수 있습니다. 그리고 자동으로 생성된 파일에 대해 아무것도 모르면 나중에 관리하기가 매우 어렵습니다. 따라서 초보자가 vue-cli를 사용하여 빌드하는 것은 권장하지 않으며, 대신 vue-cli에서 생성된 파일을 참조하여 처음부터 모두가 vue 프로젝트를 빌드하는 것이 좋습니다.

커스텀 빌드

vue-cli 빌드에 비해 커스텀 빌드는 훨씬 더 유연하지만 구성 단계와 원리를 이해해야 하며 이에 따라 요구 사항도 늘어납니다. 커스텀 빌드는 다음 단계로 나누어집니다:

파일/폴더 생성

package.json 파일 생성

webpack 구성 파일 생성

항목 파일 생성

vue 구성 요소 작성

라우팅 구성

package.json 파일

다음 명령을 사용하면 package.json 파일을 빠르게 생성할 수 있습니다.

npm init -y

그런 다음 스크립트 구성 항목을 수정하고, 패키징 및 압축 명령을 추가하고, 종속성을 추가하고 해당 프로젝트 종속성을 추가합니다.

webpack 구성 파일

두 번째로 webpack 구성 파일을 만들어야 합니다. 여기서 다른 프로젝트를 빌드하는 것과 차이점은 vue-loader 로더를 사용하여 vue 단일 파일 구성 요소를 로드해야 하고 babel-loader를 사용하여 변환한다는 것입니다. ES6 구문

항목 파일

여기서 webpack에 구성된 항목 파일 주소의 Entry.js를 작성해야 합니다. 주요 기능은 생성된 vue 인스턴스 앱을 app ID로 DOM 노드에 마운트하는 것입니다.

그런 다음 가장 간단한 vue 구성 요소를 작성해야 합니다. index.vue, views 폴더 아래에 넣으세요

이 글에서는 vue-cli 구축과 커스텀 구축이 각각 적용 가능한 범위와 대상이 있으므로 프로젝트와 자신의 조건에 집중해야 합니다. 최고의 제품을 선택하세요. 맞춤 제작에는 이 글에서 언급되지 않은 많은 기능적 구성이 있습니다. 관심 있는 아동용 신발은 계속해서 자체적으로 탐색할 수 있습니다.

위 내용은 Vue 프로젝트 구축 및 실제 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!