Webstorm의 Vue 구문 사용법에 대한 자세한 설명

이번에는 Webstorm에서 vue 구문을 사용하는 방법에 대해 자세히 설명하겠습니다. webstorm에서 vue 구문을 사용할 때 주의 사항은 무엇입니까?

속담처럼 옥을 공격하려면 먼저 무기를 갈고 닦아야 합니다. 저는 직장에서 개발할 때 항상 Angle을 사용하는데, 점차 Vue 비즈니스도 생기기 때문에 Vue를 배워야 합니다. 오늘부터 Vue로 플레이를 시작했습니다. vue-cli를 사용하여 프로젝트를 생성한 후 webstorm을 사용하여 열 수는 없었지만 다양한 editor가 많이 발생했습니다. , vue에 대한 IDE의 지원을 개선하는 것 외에는 선택의 여지가 없습니다.

Premise

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

node와 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js 일반 관련 사용 사례 공유

노드 Async/Await 비동기 프로그래밍 구현에 대한 자세한 설명

위 내용은 Webstorm의 Vue 구문 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!