첫째, 준비 작업
1, Node.js를 다운로드 및 설치
다운로드 : HTTPS : //nodejs.org/en/download/는 올바른 버전을 다운로드 할 수 있습니다를 선택합니다. Node.js를 설치는 기본 NPM (패키지 관리 도구)으로 설치됩니다.
2, cmd를 가능하게
를 눌러 윈도우 + R은 명령 프롬프트와 함께 제공되는 시스템을여십시오, 열려있는 창을 "실행" "cmd"를 입력하고 버튼을 누르십시오.
참고 : 기본 C 드라이브를 디스크 입력 D 프로젝트를 입력 :( 디스크 변경)
3, 설치 cnpm
NPM은 대규모 네트워크의 영향에 의해, 플러그인이 해외 서버에서 다운로드되어 설치하기 때문에 NPM 패키지 관리 도구 Node.js를이 제공되고, 예외는 우리 대신 기본 Taobao의 NPM NPM 미러 cnpm의 사용, 발생할 수 있습니다.
방법 A : NPM을 사용하여 설치 cnpm
NPM은 -g cnpm --registry = <a href="https://registry.npm.taobao.org" _src="https://registry.npm.taobao.org"> HTTPS를 설치 //registry.npm합니다. taobao.org </a>를
참고 :이 발생할 수 NPM과 cnpm 버전은 다를 수 있습니다.
방법 2 : 별명이 별명을 설정하는 명령
별명 cnpm = "NPM --registry = HTTPS : //registry.npm.taobao.org \ --cache = $ HOME / .npm / .cache / cnpm \ --disturl = HTTPS : //npm.taobao.org/ DIST \ --userconfig = $ HOME / .cnpmrc "
cnpm을 확인 cnpm -v보기 cnpm 버전을 입력 제대로 설치됩니다. 설치되어 있지 않으면 제대로 시스템 변수 경로가 올바르게 구성되어 있는지 확인.
글로벌 설치 웹팩 포장 도구, 지침 : NPM 내가 -g 웹팩
전 세계적으로 꿀꺽 설치 지침 : NPM 내가 -g 꿀꺽-CLI 명령을 내리는 : NPM RM -g 꿀꺽
4, 설치 VUE-CLI
cnpm 글로벌 설치 VUE-CLI를 사용, cmd를에서 다음 명령을 입력합니다 (참고 : "- g"는이 매개 변수를 세계가 설치되어 의미)
cnpm는 -g VUE-CLI를 설치
둘째, 프로젝트를 초기화
준비 작업 후, 공식적으로 프로젝트를 초기화합니다. , 포장 도구로 웹팩를 선택 일부 구성을 작성하는 지시를 따릅니다. 이러한 구성은 결국 각각의 모듈 및 서면 package.json 프로젝트를 장착합니다.
(1) (내부에 상기 동작 명령 입력 cmd를 계속) 새로운 프로젝트 mydemo
VUE 초기화 웹팩 mydemo
mydemo는 프로젝트 이름, 그들의 캐주얼 (더 대문자)도 취하지 이름입니다. 명령 입력 후, 설치 단계를 입력합니다, 그것은 몇 가지 정보를 입력해야합니다.
(* 명령 입력 후, 블랙 화면이 순서로 다음의 정보를 표시 할 것이다)
정보의 세부 정보 :
-------------------------------------------------- -------------------------------------------------- ------------------------
프로젝트 이름 (vuetest)
프로젝트 이름은 사용자가 직접 지정할 수 있지만 직접 괄호 안에 기본 이름을 입력합니다.
프로젝트 설명 (A Vue.js 프로젝트)
프로젝트 설명, 직접 입력 기본 이름을 사용 타격을받을 수 있습니다.
저자
저자는 자신을 지정할뿐만 아니라 직접 입력 할 수 있습니다.
그런 다음 사용자가 선택할 수
런타임 + 컴파일러 : 대부분의 사용자에게 권장
이 권고는, 우리가 그것을 선택했다 되었기 때문에 플러스, 컴파일을 실행
런타임 전용 : 약 6킬로바이트 가벼운 분 + gzip을하지만, 템플릿 (또는 뷰 - specificHTML가) 만 .vue 파일에 사용할 수 있습니다 - 렌더링 기능은 다른 곳에서 필요
이미 첫 번째 선택이 권장되는 경우에만 실행
VUE 라우터를 설치 하시겠습니까? (Y / N)
공식 경로입니다 VUE 라우터를 설치, 대부분의 경우 사용 여부, 여기에 입력 "Y"후 입력합니다.
코드를 보풀하는 ESLint를 사용? (Y / N)
ESLint 관리 코드 여부, ESLint는 관리 도구 스타일 코드는 코드가 균일 한 스타일을 사용하고, 전체 동작에 영향을주지 않습니다이다.
카르마 + 모카와 설정 단위 테스트? (Y / N)
장착 장치 여부를 테스트.
Nightwatch (Y / N)로 설정 E2E 테스트?
설치 여부 E2E 테스트.
-------------------------------------------------- -------------------------------------------------- ------------------------
(* 프로젝트 내부의 디스크는 지금 등장했다 라는 이름의 폴더를 mydemo )
대략이 같은 편집기, 디렉토리 구조로 프로젝트를 엽니 다.
내용 소개 :
-------------------------------------------------- -------------------------------------------------- ------------------------
bulid
내부 실제로 여기에 수행 NPM 실행 *를 사용하는 경우 일부 작업 파일이 파일입니다.
설정
구성 파일, 실행 파일 구성 정보가 필요합니다.
SRC
리소스 파일뿐만 아니라 사진에 사용 된 모든 구성 요소가이 폴더에 배치됩니다. 간단하게이 폴더를 보면이 물건을 넣어 것입니다.
자산
자원 폴더, 이미지 같은 넣어 자원,
구성 요소들
구성 요소 폴더, 모든 구성 요소가이 폴더에 저장됩니다 쓰기
라우터
폴더 라우팅이 규칙은 점프 페이지를 결정,
App.vue
应用组件，所有自己写的组件，都是在这个组件之上运行了。
main.js
webpack入口文件。
----------------------------------------------------------------------------------------------------------------------------
1、在mydemo下安装依赖（若项目下已经有node_modules文件夹，可以忽略此项）
切换到项目目录
cd mydemo
安装模块
cnpm install
它根据package.json的配置表进行安装，安装完后会在mydemo下多一个文件夹node_modules，这里的文件对应着package.json里的配置信息。
2、运行mydemo（先切换到项目文件夹： cd mydemo 再输入 npm run dev回车）
输入命令
npm run dev
打开浏览器，在浏览器输入地址http://localhost:8080，看到如下页面，说明大功告成，一个Vue项目已经初始化完成！