Webstorm의 vue 사용 사례에 대한 자세한 설명-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-05-11 15:21:51

원래의

3660명이 탐색했습니다.

이번에는 웹스톰에서 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 파일 강조 표시는 아직 사용할 수 없는 것으로 나타났습니다. 여전히 파일 지원을 추가해야 하는 것 같습니다(이전 작업 중에 삭제했는지는 모르겠습니다):