VUE는 환경을 구축 : 당신의 (a)는 VUE 배경 관리 시스템을 개발 가르쳐

첫째, VUE는 무엇인가

      [ 공식 설명 ] 뷰 (발음 / vjuː /은보기에 유사한) 사용자 인터페이스를 구성하기위한 프로그레시브 프레임이다. 다른 프레임 차이가 크고, 뷰는 층에 의해 최대 하부층으로부터인가하도록 설계되어있다. 보기 만 층에 뷰 핵심 라이브러리 초점을뿐만 아니라, 사용하기 쉬운뿐만 아니라 타사 라이브러리 또는 기존 프로젝트를 쉽게 통합 할 수 있습니다. 한편, 때 현대의 툴 체인 및 각종 지원 라이브러리 함께 사용, 복잡 한 페이지 응용 프로그램에 대한 드라이브를 제공도 완벽 할 뷰.

       : 자세한 내용은 VUE 공식 웹 사이트를 참조하십시오 https://cn.vuejs.org/v2/guide/#      비디오 교육뿐만 아니라 지금은 공식 웹 사이트

둘째, 왜 VUE를 배워야한다

        과거에는, 사업 관리 절차의 개발 MVC 아키텍처에 사용되는 프런트 엔드 V는 일반적으로 단지 백엔드 제어 끝의 강한 의존성 중 하나 수요가 - 백 - 정면, 또는 프런트 엔드에서 개발 된 개발자를 보여 백엔드 별도의 개발 점차적으로 별도의 앞면과 방법의 뒤쪽 끝, 좋은 전면 및 후면 끝 정의 된 인터페이스로 개발 된 이러한 문제를 해결하기 위해 수 있도록, 전면과 후면 끝하지만 단단히 더 유연성이 없다, 전면 및 후면 엔드 개발자가 자주 응용 프로그램을 개별적으로 배포 할 수 없습니다 서로를 기다릴 필요가, 결합 상호 의존 후, 당신은 매우 편리하고 배포를 분리하는 것은 매우 쉬운 개발, 디버깅, 분리 할 수 ​​있습니다, 유연성을 향상시킨다. 물론, VUE는 이전의 개발 방식에서 직접 내장 될 수 있지만, 일반적으로 권장되지.

        나는 당신이 VUE + SpringBoot + SpringSecurity + MyBatis로 + MySQL의 전면 및 분리 기반의 관리 시스템의 후면 끝을 개발 가져다 블로그 게시물의 시리즈를 작성할 계획이 전면 부 블로그 시리즈입니다.

셋째, VUE 환경을 구축

       1, 설치된 노드

            VUE 작업을 구현하는 노드의 NPM 관리 도구에 의존, 그래서 첫 번째 단계는 당신이에 노드를 설치해야 http://nodejs.cn/download/ 자신의 Windows 운영 체제에 32 또는 64에 따라, 공식 웹 사이트 아래 그림과 같이 비트는, 내가 직접 디렉토리에 압축 해제 다운로드, 다음 경로에 추가 윈도우 환경 변수의 디렉토리 경로가 다음 창에 cmd를 실행 우편을 다운로드하는 데 사용, 적절한 버전을 선택 명령 라인에 입력 -v 노드는 노드의 버전이 다음과 같이 설치가 완료된 것 표시

 

 

        2-VUE CLI 설치

             VUE-CLI는 그래서 VUE-CLI, 다시 다음 새 프로젝트가 필요하지 않습니다를 설치하는 최초의 필요성 전에 프로젝트를 빌드, 웹팩 VUE 템플릿 프로젝트,이 템플릿을 기반으로 우리의 프로젝트 개발 프로젝트의 위상을 기반으로합니다.

             Windows 명령 행에서 다음 명령을 실행 : NPM VUE-CLI -g이 될 수 설치합니다.

        3, 새 프로젝트

              먼저 다음 명령을 실행, Windows 명령 행에서이 디렉토리를 입력, Windows 폴더에 프로젝트를 생성 :vue init webpack，然后根据提示输入项目名等，如下图：

 

     4, 설치 프로젝트 종속성

          (프로젝트 디렉토리 아래) 윈도우 명령 행에 계속 : NPM 설치 참고 :이 수행하는 데 필요한 노드의 이전 버전을 사용하는 경우 이제 새로운 노드 버전이이 명령을 실행할 필요가 없습니다.

     5, 프로젝트를 실행

          (프로젝트 디렉토리 아래) 윈도우 명령 행에 계속 : 다음 그림에서 성공적인 수술 후, 개발 실행 NPM, IE를 열고 입력 : HTTP : // localhost를 : 8080 II 아래 참조 프로젝트를 열려면 : 

            참고 : 나는 VUE 프로젝트를 열었습니다, 그래서 슬로건 아래 차트는 자동으로 특정 포트 8081의 그림이 될 때문에, 우리는 그림의 빨간색 상자 부분을 볼 수

             

 

                                                                                                                    그림 I

                                                                                                    그림 II

개발 도구의 넷째, 설치

      나는 VSCode를 사용하는 것이 좋습니다 이론적으로 구축 VUE가 개발하는 모든 텍스트 파일 개발 도구를 사용할 수 있지만, 좋은 도구가 더 효과적 일 수있다, 브라우저에 입력 https://code.visualstudio.com/  , 해당 버전의 다운로드를 선택 설치. 설치 열려 vscode 후 열기 폴더를 선택하고 자신의 프로젝트 폴더를 선택하고 파일 메뉴에서 프로젝트에 대한 모든 오픈 소스 코드를 볼 수 있습니다.