Vue2.0에서 Vue 스캐폴딩을 구축하는 방법

이 글은 주로 Vue2.0을 사용하여 Vue 스캐폴딩을 구축하는 방법을 소개합니다. 이제 이를 여러분과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Introduction
Vue.js는 사용자 인터페이스 프레임 구축.
Vue는 뷰 레이어에만 초점을 맞추고 상향식 증분 개발 설계를 채택합니다.
Vue의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 구현하는 것입니다.

읽기 전에 알아야 할 사항
htnl
css
javascript
node.js 환경(npm 패키지 관리 도구)
webpack 패키징 도구
node.js 설치

컴퓨터에서 win+R 열기 다음 인터페이스 열기

노드에서 공식 웹사이트에서 노드를 다운로드하고 설치하세요. 설치 단계는 매우 간단합니다. 끝까지 "다음"만 하면 됩니다.
설치가 완료되면 명령줄 도구를 열고 아래와 같이 node -v 명령을 입력합니다. 해당 버전 번호가 나타나면 설치가 성공한 것입니다.

우리에게 필요한 npm 패키지 관리자는 node에 통합되어 있습니다. 따라서 npm -v를 직접 입력하면 아래와 같이 npm 버전 정보가 표시됩니다.

여기에는 노드 환경이 설치되어 있고 npm 패키지 관리 도구도 사용 가능합니다. 하지만 npm의 일부 리소스가 차단되어 있기 때문에 더 빠르고 안정적이기 위해서는 Taobao의 npm 이미지로 전환해야 합니다. -cnpm.

cnpm 설치
클릭하시면 자세한 설정방법이 나와 있는 타오바오 cnpm 홈페이지로 들어가실 수 있습니다.
또는 명령줄에 직접 입력하세요:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
그런 다음 설치가 완료될 때까지 기다립니다.

npm 버전과 여전히 다른 현재 cnpm 버전을 보려면 cnpm -v를 입력하세요.

cnpm을 사용하는 방법은 npm이 필요한 곳에서 cnpm으로 직접 교체하는 것입니다.

vue 설치
vue.js로 대규모 애플리케이션을 구축할 때는 npm 설치가 잘 작동하는 npm 설치를 사용하는 것이 좋습니다. webpack이나 browserify 모듈 번들러와 함께 사용됩니다. vue.js는 단일 파일 구성 요소를 개발하기 위한 지원 도구도 제공합니다.

$ cnpm install vue

vue-cli 스캐폴딩 구성 도구 설치
vue-cli는 대규모 단일 페이지 애플리케이션을 빠르게 구축하는 데 사용할 수 있는 공식 명령줄 도구를 제공합니다. 이 도구는 즉시 사용 가능한 빌드 도구 구성을 제공하여 현대적인 프런트 엔드 개발 프로세스를 제공합니다. 핫 리로딩, 저장 시 정적 검사 및 프로덕션 준비 빌드 구성을 사용하여 프로젝트를 생성하고 시작하는 데 몇 분 밖에 걸리지 않습니다.

Install vue-cli global

$ cnpm install --global vue-cli
Create A webpack 템플릿을 기반으로 한 새 프로젝트
프로젝트를 생성하려면 먼저 디렉터리를 선택한 다음 명령줄에서 해당 디렉터리를 선택한 디렉터리로 변경해야 합니다. 다음을 사용할 수 있습니다:

my-project를 사용하여 프로젝트 이름을 사용자 정의

$ vue init webpack my-project
를 사용하여 프로젝트를 초기화하거나

$ vue init webpack-simple my-project
를 사용하여 간단한 프로젝트를 초기화

초기화 명령을 실행할 때 사용자에게 프로젝트 이름, 설명, 작성자 및 기타 정보와 같은 몇 가지 기본 옵션을 입력하라는 메시지가 표시됩니다. 입력을 채우지 않으려면 Enter를 눌러 기본값으로 설정하세요.

프로젝트 이름은 대문자로 표기할 수 없습니다. 그렇지 않으면 오류가 보고됩니다.

프로젝트 이름(my-project) # 프로젝트 이름(내 프로젝트)

프로젝트 설명(A Vue.js 프로젝트) # 프로젝트 설명 A Vue.js 프로젝트

Author 작성자(본인 이름)

vue-router를 설치하시겠습니까? (Y/n) # 향후 스파가 될 Vue 라우팅을 설치하시겠습니까(단, 페이지 애플리케이션에 필요한 모듈)

ESLint를 사용하여 코드를 린트하시겠습니까?(Y/n) # ESLint를 사용하여 코드를 린트하시겠습니까? 암호? (Y [ 예 ] / N [ 아니오 ])

ESLint 사전 설정 선택(화살표 키 사용) # 사전 설정 ESLint 선택(화살표 키 사용)

Karma + Mocha로 단위 테스트 설정(Y/n) # 단위 설정 Karma + Mocha를 테스트하시나요? (Y/N)

Nightwatch로 e2e 테스트를 설정하시겠습니까? (Y/n) # 엔드투엔드 테스트를 설정하시겠습니까, Nightwatch? (Y/N)

물론 개인 상황에 따라 다릅니다. 여기서는 모두 선택했습니다.

그래서 그 전에 프로젝트의 종속성 문제를 해결하려면 다음 명령을 사용하여 프로젝트의 종속성을 설치해야 합니다.

$ cnpm install
아래와 같은 상황이 나타나면 종속성이 성공적으로 해결되었음을 의미합니다.

프로젝트 실행
$ npm run dev

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장사항:

vue

Vue2.0 사용자 정의 지침과 인스턴스 속성 및 메서드의 메서드 클로저 캐싱 문제를 해결하는 방법

위 내용은 Vue2.0에서 Vue 스캐폴딩을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!