Vue.js 환경 구축 튜토리얼 소개
- 高洛峰원래의
- 2017-03-22 13:30:311351검색
이 기사에서는 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 명령(마지막 것은 제가 만든 프로젝트 폴더의 이름입니다)
이 프로세스 중에 나타납니다
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 프레임워크, 데이터 기반, 구성 요소화, 가볍고 간결하며 효율적이고 빠르며 모듈 친화적입니다.
관련 기사:
순수한 Vue.js를 통해 Bootstrap 구성 요소 구축
위 내용은 Vue.js 환경 구축 튜토리얼 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!