집 >웹 프론트엔드 >JS 튜토리얼 >Webstorm의 vue 사용 사례에 대한 자세한 설명

Webstorm의 vue 사용 사례에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-11 15:21:513727검색

이번에는 웹스톰에서 vue 사용 사례에 대해 자세히 설명하겠습니다. 웹스톰에서 vue 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Premise

vue 공식 문서에서는 초보자가 vue-cli를 먼저 사용하지 말고 JQuery와 유사한 방식으로 vue를 직접 도입하여 학습하도록 권장하고 있습니다. 이전에 Angle의 cli를 다루었으므로 바로 cli부터 시작하겠습니다.

노드와 npm이 설치 설치되어 있다고 가정합니다.

전역적으로 vue-cli 설치

터미널에서 다음 명령을 실행하세요.

npm install --global vue-cli

vue-cli를 전역적으로 설치하세요. 그런 다음 vue-cli를 사용하여 프로젝트를 만듭니다.

vue init webpack my-project

그러면 완전한 프로젝트가 생기고 그 안에 샘플 구성 요소가 있게 됩니다. 실행:

npm run dev

그런 다음 브라우저에서 http://localhost:8081/을 방문합니다. 프로젝트의 실행 상태를 볼 수 있습니다.

웹스톰으로 시도해보기

웹스톰에서 vue 프로젝트를 열었을 때 vue를 포기하고 싶었는데 정말 보기가 싫었지만 그래도 꾸준한 탐구 정신을 이어가야 합니다. 문제가 발생하면 해결해 보세요!

.vue 형식의 파일

우선 파일 형식부터 시작해야 합니다. 현재 버전에는 .vue 파일 형식이 없으므로 인식이 되더라도 강조할 수 없습니다. 그것은 지저분할 것이다. 확인해 보니 파일 형식에 *.vue를 추가하면 충분하다는 의견도 있는데, 추가하면 오히려 더 혼란스럽다는 의견도 있습니다.

Google에서 오랫동안 검색한 결과 웹스톰 공식 홈페이지https://www.jetbrains.com/help/webstorm/vue-js.html에서 가져온 기사를 발견했습니다. Webstorm은 이미 Vue를 지원하지만 내 로컬 웹스톰에서는 이 옵션을 전혀 찾을 수 없습니다. 이유는 무엇입니까?

찾아보니 웹스톰 버전은 2018 버전이고 제가 만든 웹스톰은 2017.2 입니다. 그래서 최신 버전으로 업데이트해야 합니다.

예, 웹스톰 설정을 백업한 다음 최신 웹스톰을 다운로드하고 업데이트하세요. 그런데 활성화 코드를 찾았습니다: http://hb5.s.osidea.cc:1017 (핫하고 개인 테스트에 사용할 수 있습니다).

물론 설치 후 vue 마크를 찾았는데 실제로 새 버전이 지원됩니다.

하지만 .vue 파일 강조 표시는 아직 사용할 수 없는 것으로 나타났습니다. 여전히 파일 지원을 추가해야 하는 것 같습니다(이전 작업 중에 삭제했는지는 모르겠습니다):

preferences > editor > file files

vue.js 템플릿을 아래로 내려 선택하고 클릭하세요. 아래 등록 패턴에서 더하기 기호를 클릭하고 *.vue를 입력한 다음 확인을 클릭하고 적용을 클릭하면 웹스톰 아래에 진행 표시줄이 표시됩니다. 가득 차면 .vue 강조 표시가 정상적으로 됩니다.

unused 내보내기 기본값

vue 구성 요소의 js에 내보내기 기본값이 있습니다. 위에 마우스를 올리면 사용되지 않은 내보내기 기본값이 있기 때문입니다. 이 내보내기는 특별히 사용되지 않습니다. 이는 JavaScript 구문 팁입니다. IDE의 구성 검사 구성에서 이를 구성할 수 있습니다.

빠른 방법은 오른쪽 하단에 있는 작은 머리를 클릭하고 》검사를 구성하는 것입니다. 팝업 인터페이스에서 JavaScript 》 일반을 선택하세요. 제거 옵션: 사용되지 않은 전역 기호. 그런 다음 확인을 클릭하면 회색 알림이 사라지는 것을 볼 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!