vue.js 개발 환경을 구축하는 방법

vue.js 개발 환경 구축: 먼저 [vue.js]를 설치한 다음 npm 패키지 관리자, 모듈, webpack 및 vue 스캐폴딩을 각각 설치하고 마지막으로 Vue 환경 초기화를 시작하고 프로젝트 종속성을 설치합니다. Vue 개발 환경이 여기에 설정됩니다.

[추천 튜토리얼: Vue.js 튜토리얼#🎜 🎜#】

환경 준비

Node.js Javascript 런타임 환경# 🎜🎜 #

npm Node.js의 패키지 관리 도구

webpack 프런트 엔드 리소스 모듈식 관리 및 패키징 도구

vue-cli 스캐폴딩 구성 도구#🎜🎜 ## 🎜🎜#cnpm npm의 Taobao 미러

Vue.js 설치

1부터 시작하면 매우 쉽습니다. 공식 웹사이트에서 필요한 운영 체제 버전을 다운로드한 후 다음 단계를 진행하세요. 설치가 완료된 후 명령줄에 node -v를 입력하면 해당 버전 번호가 나타나면 설치가 성공한 것입니다.

2. npm은 Node.js와 함께 설치되는 패키지 관리 도구입니다. npm -v를 직접 입력하면 설치 성공 여부를 확인할 수 있습니다. 명령줄.

npm 패키지 관리자가 가능하지만, npm 다운로드가 의존해야 하는 패키지의 서버 주소가 해외에 있기 때문에 많은 리소스에 접근할 수 있습니다. 아주 천천히 하세요. 그럼 타오바오 국내 이미지를 설치해보겠습니다.

3. 명령줄에 npm install -g cnpm --registry=http://registry.npm.taobao.org를 입력하세요. 이 방법으로 cnpm 명령을 사용하여 모듈을 설치할 수 있습니다:

cnpm install [name]

4 webpack

cnpm install webpack -g

5를 설치합니다.

npm install vue-cli -g

#🎜🎜 #Vue.js 환경 초기화

컴퓨터에 코드를 저장할 새 폴더를 만듭니다. 그런 다음 명령줄을 사용하여 이 폴더의 CD 디렉터리 경로를 입력합니다.

뒤에

vue init webpack name

명령을 사용하여 vue 환경을 초기화합니다. 이 명령은 webpack이 빌드 도구인 프로젝트를 초기화한다는 의미입니다. 즉, 전체 프로젝트가 webpack을 기반으로 합니다. . 설치 과정에서 몇 가지 초기화 설정이 있을 것입니다. 기본 구성을 사용하고 Enter 키를 누를 수 있습니다.

위 그림을 보면 vue가 빠르게 시작하라는 명령을 매우 신중하게 말한 것을 볼 수 있습니다.

# 🎜🎜#

프로젝트 종속성 설치

은 npm 서버가 해외에 있으므로 이 단계의 설치 속도가 매우 느립니다.

npm install

국내 미러 cnpm에서 설치하지 마세요(나중에 종속 라이브러리가 많이 누락될 수 있습니다)

cnpm install

vue 라우팅 모듈 vue-router 및 네트워크 요청 설치 module vue-resource#🎜 🎜#

cnpm install vue-router vue-resource --save

프로젝트 시작

npm run dev

작업이 성공하면 IP와 포트 번호를 알려줍니다

Access 위와 같이

주소가 나타나면. 축하합니다. Vue.js 여정을 시작할 준비가 되었습니다.

위 내용은 vue.js 개발 환경을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!