vue.js 패밀리 버킷에는 무엇이 포함되어 있나요?

Vue.js 패밀리 버킷에는 스캐폴딩 vue-cli, 라우팅 vue-router, 상태 관리 모드 vuex, axios 및 UI 프레임워크가 포함되어 있습니다. Vue는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크로 표준 HTML, CSS 및 JavaScript를 기반으로 구축되었으며 개발자가 사용자 인터페이스를 효율적으로 개발하는 데 도움이 되는 선언적 및 구성 요소 기반 프로그래밍 모델 세트를 제공합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, vue 버전 3.0, Dell G3 컴퓨터.

Vue.js 패밀리 버킷은 스캐폴딩 vue-cli, 라우팅 vue-router, 상태 관리 모드 vuex, axios 및 UI 프레임워크로 구성됩니다. Vue(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크입니다. 이는 표준 HTML, CSS 및 JavaScript를 기반으로 구축되었으며 개발자가 사용자 인터페이스를 효율적으로 개발할 수 있도록 선언적 및 구성 요소 기반 프로그래밍 모델을 제공합니다.

1. 프로젝트 구성 도구: vue-cli

vue-cli는 스캐폴딩이라고도 하며 공식적으로 Vue.js 개발을 위한 표준 도구로 정의됩니다. Vue-cli는 Vue.js+webpack 프로젝트 템플릿을 자동으로 생성할 수 있는 Vue.js 기반의 신속한 개발을 위한 완벽한 시스템입니다. Vue cli는 새 프로젝트 사용자 정의, 프로토타입 구성, 플러그인 추가 및 웹팩 구성 검사를 위한 강력한 기능을 제공합니다. @vue/cli 3.x 버전은 vue create 명령을 통해 새 프로젝트의 스캐폴딩을 빠르게 생성할 수 있습니다. vue 2.x와 같이 프로젝트를 빌드하기 위해 webpack에 의존할 필요가 없습니다.

scirpt 태그 도입에 비해 vue-cli 스캐폴딩은 다음과 같은 특징을 가지고 있습니다.

1) 풍부한 기능

Babel, TypeScript, ESLint, PostCSS, PWA, 단위 테스트 및 엔드 투 엔드 테스트 지원.

2) 손쉬운 확장

플러그인 시스템을 통해 커뮤니티는 공통 요구 사항에 따라 재사용 가능한 솔루션을 구축하고 공유할 수 있습니다.

3) 꺼내기가 필요하지 않습니다.

Vue CLI는 완전히 구성 가능하며 꺼내기가 필요하지 않습니다. 이렇게 하면 프로젝트를 오랫동안 업데이트된 상태로 유지할 수 있습니다.

4) CLI의 그래픽 인터페이스

지원되는 그래픽 인터페이스를 통해 프로젝트를 생성, 개발 및 관리하세요.

5) 즉시 프로토타입 만들기

단일 Vue 파일을 사용하여 새로운 영감을 즉시 구현하세요.

6) 미래 보장형

최신 브라우저용 기본 ES2015 코드를 쉽게 생성하거나 Vue 구성 요소를 기본 웹 구성 요소로 구축하세요.

Installation

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

2. 라우팅 관리자: vue-router

vue-router는 Vue에서 공식적으로 출시한 라우팅 관리자로, 주로 URL을 관리하고, URL과 구성 요소 간의 대응을 구현하고, 구성 요소를 생성하는 데 사용됩니다. URL을 통해 전환하여 단일 페이지 애플리케이션을 더 쉽게 구축할 수 있습니다. 주로 다음과 같은 기능을 가지고 있습니다:

1) 중첩된 라우팅/뷰 테이블

2) 모듈식, 구성요소 기반 라우팅 구성

3) 라우팅 매개변수, 쿼리, 와일드카드

4) Vue.js 전환 시스템 기반 전환 보기 효과

5) 세분화된 탐색 제어

6) 자동으로 활성화된 CSS 클래스가 있는 링크

7) HTML5 기록 모드 또는 해시 모드, IE9에서 자동으로 저하됨

8) 사용자 정의 스크롤 막대 동작

vue 라우터 설치 코드

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. 상태 관리 모드: vuex

일부 대규모 프로젝트에서는 때로는 많은 수의 구성 요소와 복잡한 데이터 구조를 포함하고 다를 수 있는 단일 페이지를 접하게 됩니다. 구성 요소도 서로의 상태에 영향을 미치며, 구성 요소 트리의 이벤트 흐름이 빠르게 매우 복잡해져서 디버깅이 극도로 어려워질 수 있습니다. 이 문제를 해결하기 위해 Vuex의 상태 관리 모델이 도입되었습니다. Vuex는 주로 플러그인 형태로 Vue.js와 함께 사용됩니다. Vue.js에서 복잡한 작업을 관리합니다.

vuex 설치 방법

npm install vuex --save

4.axios

Axios는 간단히 말해서 get 및 post 요청을 보낼 수 있는 HTTP 라이브러리입니다.

Axios 기능

1) 브라우저에서 XMLHttpRequest 생성

2) node.js에서 http 요청 생성

3) Promise API 지원

4) 요청 및 응답 차단

5) 요청 데이터 및 응답 데이터 변환

6) 요청 취소 가능

7) JSON 데이터 자동 변환

8) 클라이언트는 XSRF에 대한 방어를 지원합니다

설치 방법

npm install axios

또는 직접 도입

npm install axios

5. UI 프레임워크: iview, vant, elementUI

iview는 Vue를 기반으로 하는 고품질 UI 구성 요소 라이브러리 세트입니다(애플릿과 같은 다양한 버전으로 구분됨).

vant는 가볍고 안정적인 모바일 Vue 구성 요소 라이브러리로, Youzan의 오픈 소스인 Vue 2.0을 기반으로 아름답고 쉽게 개발할 수 있도록 설계되었습니다. - Vue 기반의 모바일 사이트를 이용해보세요.

Ant Design Vue는 엔터프라이즈급 백엔드 제품을 개발하고 서비스하는 Ant Design의 Vue 구현입니다.

elementUI는 Vue 2.0 데스크톱 미들 및 백엔드 구성 요소 라이브러리를 기반으로 합니다.

위 내용은 vue.js 패밀리 버킷에는 무엇이 포함되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!