简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Vue 프로젝트에서 프로젝트 구조를 초기화하기 위해 vue-cli 스캐폴딩을 사용하는 방법에 대한 자세한 설명

亚连
풀어 주다： 2018-05-31 17:13:04
원래의
1809명이 탐색했습니다.

이 글은 주로 Vue 프로젝트를 초기화하기 위해 vue-cli 스캐폴딩을 사용하는 프로젝트 구조에 대한 자세한 설명을 소개하고 있습니다.

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

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

  1. vue-cli는 Vue 버전의 변경 사항으로 업데이트되는 성숙한 Vue 프로젝트 아키텍처 디자인입니다.

  2. vue-cli는 로컬 핫 -테스트 서버 로딩

  3. vue-cli는 webpack이나 Browserify 및 기타 빌드 도구를 사용하여 설치할 수 있는 패키지와 온라인 솔루션을 통합합니다.

    4. 다음에는 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 애플리케이션의 항목 파일입니다. 새로운 Vue 인스턴스를 생성하고 이 인스턴스를 루트 노드에 마운트하는 데 사용됩니다. -ins<html> 或者 <body>

'el' 옵션: 페이지에 이미 존재하는 DOM 요소를 Vue 인스턴스의 탑재 대상으로 제공합니다. index.html

'router'에 ID가 'app'인 노드가 있습니다. 옵션: 각 하위 구성 요소가 $router(라우터 인스턴스) 및 $route(현재 활성화된 라우팅 정보 객체)에 액세스할 수 있도록 Vue 루트 인스턴스에 삽입된 라우터 인스턴스를 추가합니다.

'템플릿' 옵션: 문자열 템플릿을 식별자로 사용합니다. Vue 인스턴스의

'컴포넌트' 사용: 루트 컴포넌트

[App.vue]

프로젝트의 루트 컴포넌트. 컴포넌트 트리를 형성하기 위해 다른 하위 컴포넌트를 포함할 수 있습니다

< template> 하나의 하위 노드만 포함할 수 있습니다. 즉, 최상위 p는 하나만 있을 수 있습니다(그림에 표시된 대로 'app'이라는 ID를 가진 p 요소에는 형제 노드가 없습니다)

<script></script>일반적으로 es6에서 작성되며, 기본적으로 전체 세계에 영향을 미치는 스타일을 내보내려면 내보내기 기본값을 사용하세요. 이 구성 요소에서만 작동하므로 < ;/style>

[router/index.js]

라우팅 구성 파일은 구성 요소를 경로에 매핑하는 데 사용됩니다. 렌더링 위치를 알고 계시다면

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

Vue가 다음 표를 통해 배열을 수정할 때 페이지가 렌더링되지 않는 문제 해결 방법

vue2.0 axios 크로스 도메인 렌더링 문제

옵션 오버레이 문제 해결 방법 Layui 방법에서 선택

위 내용은 Vue 프로젝트에서 프로젝트 구조를 초기화하기 위해 vue-cli 스캐폴딩을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue-cli 初始化 脚手架
원천：php.cn
이전 기사：vue와 vue-i18n을 결합하여 백그라운드 데이터에 대한 다국어 전환 방법 구현 다음 기사：vue에서 요청한 데이터 중 특정 항목의 값을 변경하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Vue 3 및 Vuetify 3은 구성 요소의 SCSS/SASS 변수에 액세스합니다. Vue3 구성 요소에서 미리 정의된 변수를 사용하고 싶습니다. <template><divclass="roundedimg-container...
에서 2023-11-17 13:52:29
0
1
293
Vue 프로젝트에 모듈이 정의되지 않았습니다. 공식 문서에 명시된 대로 npmini tvue@latest를 실행하여 새로운 Vue 애플리케이션을 만들었습니다. 그런 다음 Vue 및 Vite 웹 사이트의 가이드...
에서 2023-11-17 12:38:53
0
2
394
양식의 객체 필드 유효성 검사 - Vue 3 + Vee-validate + yes 일부 필드가 개체 내부에 있는 양식이 있습니다. <scriptsetuplang="ts">...constschema:yup.Schema...
에서 2023-11-16 13:56:09
0
1
169
Vue 3는 Props를 기반으로 동적으로 가져옵니다. 아이콘 구성 요소를 생성하기 위해 unplugin-icon을 사용하고 있습니다. 일반적으로 //scriptimportIconCopyfrom'~icons/prime...
에서 2023-11-16 11:40:01
0
1
235
Vue 3 Composition API - 모든 조건이 충족될 때까지 양식 제출 버튼을 비활성화합니다. 모든 입력 필드가 채워지고 오류가 없을 때까지 양식 제출 버튼을 비활성화하고 싶습니다. <button:disabled="disabled"t...
에서 2023-11-13 09:41:53
0
3
438
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！