집 > 기사 > 웹 프론트엔드 > vue-cli 스캐폴딩 초기화를 사용하는 방법

vue-cli 스캐폴딩 초기화를 사용하는 방법

php中世界最好的语言원래의: 2018-03-28 14:59:011630검색

이번에는 vue-cli 스캐폴딩 초기화 사용법과 vue-cli 스캐폴딩 사용 시 주의사항에 대해 알려드리겠습니다.

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

vue-cli를 사용하면 다음과 같은 주요 이점이 있습니다.

vue-cli는 성숙한 Vue 프로젝트 아키텍처 설계로, Vue 버전 변경에 따라 업데이트됩니다.
vue-cli는 로컬 핫 테스트 서버 로딩
vue-cli는 webpack이나 Browserify 및 기타 빌드 도구를 사용하여 설치할 수 있는 패키지와 온라인 솔루션을 통합합니다. 프로젝트

다음으로 vue-cli를 사용하여 새 Vue 프로젝트를 만듭니다.

# 必须全局安装vue-cli，否则无法使用vue命令
# 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息
$ npm install -g vue-cli
$ vue -V

생성된 vuedemo 폴더에 포함된 파일은 다음과 같습니다:

[index.html]

index.html 및 기타 html 파일 동일하지만 일반적으로 main.js에 정의된 인스턴스는 루트 노드 아래에 마운트되고 모든 마운트 요소가 DOM으로 대체되므로 콘텐츠가 채워집니다. Vue에서 생성되므로 인스턴스를

에 직접 마운트하는 것은 권장되지 않습니다.

[main.js]

은 Vue 애플리케이션의

항목 파일<html> 或者 <body>이며 이 인스턴스를 루트 노드 아래에 마운트하는 데 사용할 수도 있습니다. Vue 플러그인

'el' 옵션: 페이지에 이미 존재하는 DOM 요소를 Vue 인스턴스의 탑재 대상으로 제공합니다. index.html '에 ID가 'app'인 노드가 있습니다. router' 옵션: 라우터 인스턴스는 Vue 루트 인스턴스에 주입되어 각 하위 구성 요소를 $router(라우터 인스턴스) 및 $route(현재 활성화된 라우팅 정보 개체)에 액세스할 수 있게 만듭니다.

'template' 옵션: 문자열 템플릿을 다음과 같이 사용합니다. Vue 인스턴스 로고는 '컴포넌트'를 사용합니다: 루트 구성 요소

[App.vue]

프로젝트의 루트 구성 요소로, 구성 요소 트리를 형성하기 위해 다른 하위 구성 요소를 포함할 수 있습니다

vue-cli 스캐폴딩 초기화를 사용하는 방법

관련 기사