vue-cli로 초기화되는 Vue 프로젝트의 프로젝트 구조에 대한 간략한 논의-View.js-php.cn

vue-cli로 초기화되는 Vue 프로젝트의 프로젝트 구조에 대한 간략한 논의

Overview

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

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

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

설치

다음으로, vue-cli

# 必须全局安装vue--g vue-cli
$ vue -V

로그인 후 복사

를 설치하여 프로젝트를 생성합니다

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

# 项目创建完之后需要执行npm install安装依赖

$ vue init webpack vuedemo$ npm install

로그인 후 복사

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

[index.html]

Index.html 및 다른 html 파일도 동일하지만 일반적으로 main.js에 정의된 인스턴스는 루트 노드 아래에 마운트되고 모든 마운트 요소는 다음으로 대체되므로 내용이 채워집니다. Vue에서 생성된 DOM이므로 인스턴스를 또는 에 직접 마운트하는 것은 권장되지 않습니다. <html>或者<body>上。

[main.js]

　　是Vue应用的入口文件，用来创建一个新的Vue实例，并将这个实例挂载在根节点下，同时也可以用来引入Vue插件

　　‘el’选项：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标，这里就是index.html中id为 ‘app’ 的节点

　　‘router’选项：将router实例注入到Vue根实例中，使它的每个子组件都可以访问$router (router实例)和$route (当前激活的路由信息对象)

　　‘template’选项：以一个字符串模板作为Vue实例的标识使用。它会替换挂载的元素，也就是用这个组件替换 ’el‘ 选项指定的id为 ’app‘ 的节点

　　‘components’：局部注册组件，在前面通过import引入的是的选项对象，只要有了选项对象，就可以在这里将它注册为一个Vue实例

[App.vue]

　　项目的根组件，可以包含其他的子组件，从而组成组件树，由于使用了vue-loader，它会将这个格式编写的单文件 Vue 组件转换为 JavaScript 模块

　　只能包含一个子节点，也就是说顶层的p只能有一个（如图，id为‘app’的p元素没有兄弟节点），内容将被提取为字符串，将编译并用作 Vue 组件的 template

[main.js]

은 Vue 애플리케이션의 항목 파일입니다. 새 Vue 인스턴스를 생성하고 이 인스턴스를 루트 노드에 마운트하는 데 사용됩니다. 또한 Vue 플러그인을 도입하는 데에도 사용할 수 있습니다.

　　'el' 옵션: 페이지에 이미 존재하는 DOM 요소를 Vue 인스턴스 로드 대상에 대한 링크입니다. index.html

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

　 '템플릿' 옵션: Vue 인스턴스의 식별자로 문자열 템플릿을 사용합니다. 즉, 구성요소를 사용하여 'el' 옵션으로 지정된 'app' ID로 노드를 대체합니다. app>. 옵션 개체가 있는 한 여기에서 Vue 인스턴스로 등록할 수 있습니다[App.vue]

프로젝트의 루트 구성 요소에는 다른 하위 구성 요소가 포함될 수 있습니다. vue-loader를 사용하면 이 형식으로 작성된 단일 파일 Vue 구성 요소를 JavaScript 모듈로 변환합니다

　은 하위 노드를 하나만 포함할 수 있습니다. 이는 최상위 수준 p가 하나만 가질 수 있음을 의미합니다( 그림에서 ID가 'app'인 p 요소에는 형제 노드가 없습니다), 콘텐츠는 문자열로 추출되어 컴파일되어 Vue 구성 요소의 템플릿 옵션으로 사용됩니다 　

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

vue-cli로 초기화되는 Vue 프로젝트의 프로젝트 구조에 대한 간략한 논의