Vue.js 환경 구축 튜토리얼 소개-JS 튜토리얼-php.cn

Vue.js 환경 구축 튜토리얼 소개

高洛峰

풀어 주다： 2017-03-22 13:30:31

원래의

1462명이 탐색했습니다.

이 기사에서는 Vue 환경을 신속하게 구축하는 데 도움이 되는 매우 간단한 Vue.js 환경 구축 튜토리얼을 주로 공유합니다. 관심 있는 친구들이 참고할 수 있습니다.

Vue, 새로운 도구 , 실제로 효율성을 향상시킬 수 있습니다. vue 시작의 핵심: (네트워크에 연결되어 있다는 전제)

1. vue를 사용하여 프런트엔드프레임워크를 개발합니다. 우선 환경이 있어야 합니다. 이 환경에는 node의 도움이 필요하므로 node를 먼저 설치하고 node에서 npm을 사용하여 필요한 종속성 등을 설치해야 합니다.

여기 작은 요령이 있습니다: npm을 사용하여 일부 도구를 cmd에 직접 설치하면 속도가 느려지므로 Taobao의 npm Mirror를 사용합니다. :
npm install -g cnpm –registry=https://registry.npm.taobao.org를 입력하여 npm 미러를 설치하세요. 앞으로 npm이 사용되는 곳에 직접 cnpm을 사용하세요.

npm 이미지 설치 후 전역 vue-cli 스캐폴딩 설치를 시작합니다. vue-cli를 사용하는 이유는 이 도구가 우리에게 필요한 템플릿 프레임워크를 구축하는 데 도움이 되기 때문입니다. 이는 비교적 간단합니다. . 방법: cnpm install -g vue-cli 를 누르고 Enter를 눌러 설치 성공 여부를 확인합니다. 명령줄에 vue를 입력하면 vue 정보가 나옵니다. --- 설치 성공

2. 설치 후 스캐폴딩, 생성을 시작합니다. vue init webpack vue_project 명령(마지막 것은 제가 만든 프로젝트 폴더의 이름입니다)

이 프로세스 중에 나타납니다

Vue.js 환경 구축 튜토리얼 소개

3 cd vue_project

종속성 설치 및 node_모듈 디렉터리 생성(종속 코드 라이브러리 설치)

npm install => 이 폴더 node_modules가 생성됩니다. (참고: vue-cli 스캐폴딩으로 빌드된 vue 프로젝트를 다른 위치에 복사할 때 node_modules 디렉토리를 삭제해야 합니다. 그렇지 않으면 cnpm run dev를 다른 위치에서 실행할 수 없습니다. 경로가 설계되었습니다. 질문. 삭제 후 cnpm 설치를 다시 해야 합니다.)

npm run dev 준비가 완료되면 프로젝트의 기본 app.vue 모듈이 실행 가능한지 테스트합니다. 먼저 설치해야 합니다. 명령줄에 "npm run dev"를 입력하면 "npm run build" 파일이 실행됩니다. " (release를 실행하는 데 사용됨)은 build/build.js 파일입니다. 코드 읽기 및 분석을 위해 이 두 파일에서 시작할 수 있습니다.

Devdeendency는 컴파일 프로세스의 일부 종속성을 나타냅니다.

Readme 파일: 프로젝트 설명 파일

각 구성 요소는 템플릿, 로직, 스타일의 세 부분으로 구분됩니다.

cnpm run dev Enter 키를 누르면 브라우저가 열립니다. http://localhost:8080

애플리케이션 시나리오:

복잡한 상호작용 로직을 사용하는 프런트엔드 애플리케이션의 경우

기본 아키텍처 추상화를 제공할 수 있습니다.

AJAX를 통해 데이터를 유지하여 프런트엔드 사용자 경험을 보장할 수 있습니다.

이점:

프런트엔드에서 데이터로 일부 작업을 수행할 때 AJAX 요청을 통해 백엔드에서 데이터 지속성을 만들 수 있습니다. 전체 페이지를 새로 고치려면 DOM에서 변경해야 하는 데이터 부분을 변경하면 됩니다. 특히 모바일 애플리케이션 시나리오에서는 페이지를 새로 고치는 데 비용이 너무 많이 들고 많은 리소스가 다시 로드되지만 일부는 캐시되지만 페이지의 DOM, JS 및 CSS는 페이지에서 다시 구문 분석됩니다. , 따라서 모바일 페이지는 일반적으로 SPA 단일 페이지 애플리케이션을 만듭니다.

Vue.js 기능: MVVM 프레임워크, 데이터 기반, 구성 요소화, 가볍고 간결하며 효율적이고 빠르며 모듈 친화적입니다.