Vue 개발 소개 (2) | Vue 제품군 버킷에 대해 이야기하세요 ~

이름에서 알 수 있듯이 Family bucket은 결합하여 완전하고 강력한 Vue 프로젝트로 개발할 수있는 시리즈입니다.

머리말:

*Vue의 두 가지 핵심 아이디어 : 구성 요소 화 및 데이터 기반.

• 구성 요소 화 : 전체를 개별 재사용 가능한 개인으로 분할
• 데이터 기반 : 데이터 변경을 통해 bom 디스플레이에 직접 영향을 미치고 DOM 작업을 피합니다.

Vue 제품군 버킷 소개

Vue 제품군 버킷 : vue (프로그레시브 js 프레임 워크), vuex (상태 관리), vue-router (라우팅), vue-resource, axios, UI 프레임 워크 (iview, vant, elementUI 등) 등.

Vue에는 vue-router, vuex, vue-resource를 포함한 유명한 패밀리 버킷 시리즈가 있습니다. 빌드 도구 vue-cli, sass 스타일과 함께 사용하면 전체 vue 프로젝트의 핵심 구성 요소입니다.

요약하면 : 1. 프로젝트 구축 도구, 2. 라우팅, 3. 상태 관리, 4. HTTP 요청 도구.

Vue

Vue.js 공식 문서 : https://cn.vuejs.org/

1. 점진적 프레임 워크

Vue.js는 사용자 인터페이스를 구축하기위한 진보적 인 프레임 워크입니다. Vue는 상향식 점진적 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 사용하기 쉬울뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합 할 수있는 뷰 레이어에만 중점을 둡니다. 반면에 최신 도구 체인 및 다양한 지원 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션을위한 드라이버도 제공 할 수 있습니다.
점진적 성능 : 선언적 렌더링 — 구성 요소 시스템 — 클라이언트 라우팅 — 빅 데이터 상태 관리 — 빌드 도구

2. 두 가지 핵심 포인트

• 반응 형 데이터 바인딩
  데이터가 변경되면 뷰가 자동으로 업데이트됩니다. 즉, 양방향 데이터 동기화입니다. 원칙은 ES6의 Object.definedProperty에있는 setter / getter 프록시 데이터를 사용하여 데이터 작업을 모니터링합니다.
• 결합 된 뷰 컴포넌트
  , 즉 페이지는 마지막으로 트리 데이터 구조로 설계된 컴포넌트 트리에 매핑되어 유지 관리 및 재사용이 편리합니다.

3. 가상 DOM
은 실제 DOM에 해당하는 데이터 구조를 사용하여 메모리에서 생성되며, 메모리에서 생성되는이 구조를 가상 DOM이라고합니다. 데이터가 변경되면 구성 요소를 다시 렌더링하는 최소 비용을 지능적으로 계산하고이를 DOM 작업에 적용 할 수 있습니다.

4 、 MVVM

MVVM은 Model-View-ViewModel의 약자로 Front-end 개발을 기반으로 한 아키텍처 모델입니다. 핵심은 View와 ViewModel에 양방향 데이터 바인딩을 제공하여 ViewModel의 상태 변경이 View로 자동 전송되도록하는 것입니다. 데이터 양방향 바인딩.

M : 모델 (데이터 계층, 데이터 (프론트 엔드는 js))
V : 뷰 (즉, DOM 계층 또는 사용자 인터페이스)
VM : ViewModel (데이터 및 인터페이스 중간 계층, Vue를 의미)

5. Statement 표현

Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 데이터를 DOM에 선언적으로 렌더링 할 수있는 시스템입니다.

vuex

공식 문서 : http://vuex.vuejs.org

Vuex는 Vue.js 애플리케이션을 위해 특별히 개발 된 상태 관리 모드입니다. 중앙 집중식 스토리지를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록합니다. Vuex는 주로 상태, 동작, 돌연변이, 게터, 머들의 다섯 부분으로 구성됩니다.
사용 프로세스는 다음과 같습니다. mudle 외에도 구성 요소는 테이트, 작업, 변형 및 게터의 네 부분을 직접 호출 할 수 있습니다.

1, 상태

vue 객체와 유사한 데이터는 데이터 및 상태를 저장하는 데 사용됩니다. 저장된 데이터는 반응하며 데이터가 변경되면 데이터 종속 구성 요소도 그에 따라 변경됩니다. 전역 상태 및 게터는 mapState를 통해 현재 구성 요소의 계산 된 속성에 매핑 될 수 있습니다.

상태 가져 오기 :

// 方式一:
store.getters['getRateUserInfo']

//方式二:
...mapGetters({
    
    
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

2 、 액션

작업은 store.dispatch 메서드에 의해 트리거됩니다. 작업은 비동기 호출 (api 호출 가능)을 지원하고 변형은 작업의 동기화 만 지원하며 작업은 상태를 직접 변경하는 대신 변형을 제출합니다.

3, 돌연변이

각 변형에는 문자열 이벤트 유형 (유형)과 콜백 함수 (핸들러)가 있습니다. 이 콜백 함수는 실제로 상태를 변경하고 상태를 첫 번째 매개 변수로 받아들이는 곳입니다.

4, getters

Vuex를 사용하면 상점에서 "getter"를 정의 할 수 있습니다 (상점의 계산 된 속성으로 간주 될 수 있음). 계산 된 속성과 마찬가지로 getter의 반환 값은 종속성에 따라 캐시되고 종속 값이 변경 될 때만 다시 계산됩니다.
mapGetters 도우미 함수는 저장소의 게터를 로컬 계산 된 속성에 매핑합니다.

Vuex 핵심 프로세스

Vue-cli

Vue-cli 공식 문서 : https://cli.vuejs.org/

Vue-cli는이 단일 페이지 애플리케이션을 빠르게 구축 할 수있는 스캐 폴딩이며 @ vue / cli 스캐 폴딩을 제공합니다. 풍부한 공식 플러그인 컬렉션은 프런트 엔드 생태계에서 최고의 도구를 통합합니다. Vue.js 프로젝트를 만들고 관리하기위한 완전한 그래픽 사용자 인터페이스입니다.

설치:

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack yourproject

# 安装依赖
$ cd yourproject
$ npm install
$ npm run dev

1. 명령 줄 인터페이스

CLI (@ vue / cli)는 전역 적으로 설치된 npm 패키지이며 vue는 터미널에서 명령을 제공합니다. vue create 또는 vue serve를 통해 새로운 프로젝트를 신속하게 구축하여 새로운 아이디어의 프로토 타입을 빠르게 만들 수있는 기능을 제공합니다. 그래픽 사용자 인터페이스를 사용하여 프로젝트 뷰 UI를 관리 할 수도 있습니다. 이 가이드의 다음 몇 섹션에서는 수행 할 수있는 작업을 단계별로 소개합니다.

2. CLI 서비스

CLI 서비스 (@ vue / cli-service)는 개발 종속성입니다. @ vue / cli가 생성 된 각 프로젝트에 로컬로 설치되는 npm 패키지입니다. CLI 서비스는 webpack 및 webpack-dev-server를 기반으로 구축되었습니다.

CLI 서비스에는 다음이 포함됩니다.

• 다른 CLI 플러그인의 핵심 서비스를로드합니다.
• 내부 웹팩 구성은 대부분의 애플리케이션에 최적화되었습니다.
• vue-cli-service 프로젝트의 바이너리는 기본 제공, 빌드 및 검사 명령과 함께 제공됩니다.

3. CLI 플러그인

CLI 플러그인은 Babel / TypeScript 변환, ESLint 통합, 단위 테스트 및 종단 간 테스트와 같은 Vue CLI 프로젝트에 대한 선택적 기능을 제공하는 npm 패키지입니다.

vue-resource

github 주소 : https://github.com/pagekit/vue-resource

vue-resource는 XMLHttpRequrest 또는 JSONP 기술을 사용하여 서버 측 데이터를 비동기 적으로로드하는 Vue 플러그인입니다. 일반 HTTP 요청 인터페이스와 RESTful 아키텍처 요청 인터페이스는 물론 전역 메소드와 VUe 컴포넌트 인스턴스 메소드를 제공합니다.

vue-resource 플러그인에는 다음과 같은 특성이 있습니다.

1. 작은 크기 : vue-resource는 매우 작으며 압축 후 약 12KB, gzip 압축이 서버에서 활성화 된 후 4.5KB로 jQuery보다 훨씬 작습니다.
2. 메인 스트림 브라우저 지원
   Vue.js와 마찬가지로 vue-resource는 IE 9 이하의 브라우저를 지원하지 않지만 다른 메인 스트림 브라우저를 지원합니다.
3. Promise API 및 URI 템플릿 지원 Promise
   는 ES6의 기능입니다. Promise의 중국어 의미는 "Prophet"이고 Promise 개체는 비동기 계산에 사용됩니다. URI 템플릿은 ASP.NET MVC 라우팅 템플릿과 다소 유사한 URI 템플릿을 나타냅니다.
4. 인터셉터 지원 인터셉터
   는 전역 적이며 인터셉터는 요청이 전송되기 전과 후에 일부 처리를 수행 할 수 있습니다.
   인터셉터는 요청이 전송되기 전에 헤더에 access_token을 설정하거나 요청이 실패 할 때 공통 처리 방법을 제공하는 것과 같은 일부 시나리오에서 매우 유용 할 수 있습니다.

vue-router

vue-router 공식 문서 : http://router.vuejs.org

Vue Router는 Vue.js의 공식 경로 관리자입니다. Vue.js의 핵심과 깊이 통합되어 단일 페이지 애플리케이션을 쉽게 빌드 할 수 있습니다.

설치:

npm installvue-router

Vue Router에 포함 된 기능은 다음과 같습니다.

• 중첩 라우팅 / 뷰 테이블
• 모듈 식, 구성 요소 기반 라우팅 구성
• 라우팅 매개 변수, 쿼리, 와일드 카드
• Vue.js 전환 시스템을 기반으로 전환 효과보기
• 세분화 된 탐색 제어
• 자동으로 활성화 된 CSS 클래스와 연결
• HTML5 히스토리 모드 또는 해시 모드, IE9에서 자동으로 다운 그레이드
• 사용자 지정 스크롤 막대 동작

vue의 전환 속성을 사용하여 페이지 전환 효과를 렌더링 할 수 있습니다.
모듈 식 프로젝트에서 사용하려면 Vue.use ()를 통해 라우팅 함수를 명시 적으로 설치해야합니다.

import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)

axios

axios 공식 문서 : http://www.axios-js.com/

Axios는 브라우저 및 node.js에서 사용할 수있는 단순히 http 요청 패키지 인 promise 기반 HTTP 라이브러리입니다. Vue 공식 웹 사이트는 http 통화에 axios 사용을 권장합니다.

설치:

npm install axios --save

axios 기능

• 브라우저에서 XMLHttpRequests 만들기
• node.js에서 http 요청 생성
• Promise API 지원
• 요청 및 응답 차단
• 요청 데이터 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• 클라이언트는 방어 XSRF> axios를 지원합니다.

UI框架(iview、vant、elementUI)

1. 오리지널 iView 인 View UI는 Vue.js (애플릿, PC 단말기 등 여러 버전으로 나뉘어 있음)를 기반으로 한 오픈 소스 및 고품질 UI 컴포넌트 라이브러리 세트로, 주로 PC 인터페이스의 중간 및 백엔드 제품을 제공합니다.

특성:

• 대부분의 웹 사이트 시나리오를 충족하는 풍부한 구성 요소 및 기능
• 즉시 사용 가능한 관리자 시스템과 고급 구성 요소 라이브러리를 제공하여 개발 비용을 크게 절감합니다.
• 전문적인 고품질 일대일 기술 지원 제공
• 친숙한 API, 자유롭고 유연한 공간 사용
• 상세하고 아름다운 UI
• 미세 조정 된 문서
• 사용자 정의 가능한 테마

사용중인 사용자 :
Alibaba, Baidu, Tencent
, Toutiao, JD, Didi Chuxing, Meituan , Sina, Lenovo , iFlytek, Tongcheng Yilong ... 2. elementUI는 Vue 2.0 데스크톱 중간 및 백엔드 구성 요소 라이브러리를 기반으로합니다.

3. Vant는 가볍고 안정적인 모바일 Vue 컴포넌트 라이브러리로 오픈 소스 인 Vue 2.0 기반 모바일 컴포넌트 라이브러리 세트로, Vue 기반의 아름답고 사용하기 쉬운 모바일 사이트를 빠르고 쉽게 개발하는 것을 목표로합니다.

다른 UI 프레임 워크가 있습니다 ...

Previous : Vue 개발 소개 (1) | Vue 기본 지침 및 사례