VUE 개발 환경을 설정하는 방법

마스터 링 vue.js 개발은 잘 구성된 환경으로 시작됩니다. 이 안내서는 최적의 vue.js 개발, 확장, 라이터 및 브라우저 도구를 활용하여 생산성 향상을위한 Vs Codium (vs 코드의 오픈 소스 대안)을 설정하는 방법을 보여줍니다. 키 하이라이트 :

vs codium을 사용하여 깨끗하고 오픈 소스 개발 경험을 사용하십시오. Vetur 확장 :

구문 강조 표시, 스 니펫, 줄무늬 및 Intellisense를 포함하여 우수한 VUE 코드 지원을 위해 Vetur 확장을 설치하십시오. Vue Cli : vue Cli를 사용하여 프로젝트 스캐 폴딩을 간소화하고 Eslint 및 Pretier와 같은 필수 도구를 통합합니다. eslint & Prettier : 일관된 코드 스타일, 오류 감지 및 자동 형식을 위해 eslint 및 더 예쁘게 구성됩니다. Vue DevTools :

레버리지 Vue DevTools (브라우저 확장) 효율적인 디버깅 및 애플리케이션 상태 검사.

편집자 설정 (vs codium) :
• 운영 체제에 대해 vs codium (또는 대 코드)을 다운로드하여 설치하십시오. 우리는 그것을 단순성을위한 대 코드라고 말할 것입니다 거부권 확장 설치 : 열기 대 코드 <ens> 확장 아이콘 (사이드 바의 제곱 아이콘)을 클릭하십시오 <v v> "vetur"를 검색하고 Pine Wu의 확장자를 설치하십시오. <s> 리로드 vs 코드를 활성화하려면 </s></v></ens>
Vetur 기능 :
• vetur는 다음과 같이 vue 개발을 향상시킵니다 구문 강조 표시 :
파일 내에서 코드 요소의 명확한 시각적 구분을 제공합니다.
• 스 니펫 : 는 더 빠른 개발을 위해 사전 정의 된 코드 스 니펫을 제공합니다. 빠른 SFC 템플릿에 "스캐 폴드"를 입력하십시오
emmet :
• 는 빠른 HTML/CSS 생성을위한 Emmet 약어를 지원합니다. 를 시도하고 탭을 누르십시오. 오류 확인/라인 : 코드의 오류 및 잠재적 문제를 감지합니다.
Intellisense :
• 지능형 코드 완료 제안을 제공합니다 vue cli와 함께 프로젝트 예제 :

<.> node.js가 설치되어 있는지 확인하십시오 전 세계적으로 vue cli를 설치하십시오 :
1. 새 프로젝트를 만듭니다 :
설정 중에 수동으로 기능을 선택하여 "Eslint Pretier"및 "Save On Save"를 선택하여 구성 파일을 에 배치합니다.
2. npm install -g @vue/cli eslint로 줄을 서서 :
3. Vue Cli는 코드 품질 검사를 위해 eslint를 통합합니다. 플러그인은 특별히 파일을 처리합니다. 오류는 터미널 및 편집기 내에 ESLINT 대 코드 확장자를 설치 한 후에 표시됩니다. vue create my-project 파일에서 규칙을 구성 할 수 있습니다 더 예쁘고 형식화 :
Pretier는 일관성을 위해 코드를 자동으로 포맷합니다. 저장시 자동 서식을 위해 Code 설정 (
4. : true)에서 "formatonsave"를 활성화하십시오. 파일에서 더 예쁜 규칙을 구성하십시오 Vue 브라우저 도구 : package.json vue.js DevTools 브라우저 확장 (Chrome 또는 Firefox)을 설치하십시오. 이를 통해 구성 요소, Vuex Store (사용되는 경우) 및 개발 중에 방출 된 이벤트를 검사 할 수 있습니다.

결론 :

이 설정은 vue.js 개발을위한 강력한 환경을 제공합니다. vs codium, vetur, vue cli, eslint, pretier 및 vue devtools의 조합은 생산성과 코드 품질을 크게 향상시킵니다. 고급 구성 옵션에 대한 각 도구의 설명서를 참조하십시오. .

위 내용은 VUE 개발 환경을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!