VSCODE로 VUE를 구성하는 방법

vue를 쓰도록 vscode를 구성하는 방법 : vue cli 및 vscode vue 플러그인을 설치하십시오. VUE 프로젝트를 만듭니다. 구문 강조 표시, 라인, 자동 형식 및 코드 스 니펫을 설정하십시오. 코드 품질을 향상시키기 위해 Eslint 및 Pretier를 설치하십시오. 통합 git (선택 사항). 구성이 완료된 후 VSCODE는 VUE 개발 준비가되었습니다.

vue를 쓰도록 vscode를 구성하는 방법

빠른 시작

vue를 쓰도록 vscode를 구성하려면 다음 단계를 따르십시오.

1. Vue Cli를 설치하십시오
2. VSCODE VUE 플러그인을 설치하십시오
3. VUE 프로젝트를 만듭니다

Vue Cli를 설치하십시오

NPM 또는 원사를 사용하여 VUE CLI를 설치하십시오.

 <code>npm install -g @vue/cli</code>

또는

 <code>yarn global add @vue/cli</code>

VSCODE VUE 플러그인을 설치하십시오

vscode를 열고 확장 스토어로 이동하여 "vue.js Extension Pack"을 검색하십시오. 플러그인을 설치하십시오.

VUE 프로젝트를 만듭니다

새로운 VUE 프로젝트 만들기 :

 <code>vue create my-project</code>

이것은 my-project 폴더에 새로운 VUE 프로젝트를 만듭니다.

자세한 구성

1. 구문 하이라이트 및 줄무늬를 설정합니다

• 파일> 환경 설정> 설정으로 이동하십시오.
• "vue.js"를 검색하고 "Vetur : enable vue.js 및 템플릿 라인"을 활성화하십시오.

2. 자동 형식을 활성화합니다

• "편집자 : 기본 포맷터"를 검색하십시오.
• "vetur : vue.js 및 템플릿 포맷터"를 선택하십시오.

3. 코드 세그먼트를 설정하십시오

• 파일> 환경 설정> 스 니펫으로 이동하십시오.
• "vue"를 검색하고 필요한 스 니펫을 활성화하십시오.

4. eslint와 더 예쁘게 설치하십시오

• eslint 및 더 예쁘게 설치하십시오.

 <code>npm install eslint prettier --save-dev</code>

• .eslintrc.js 파일을 만들고 다음을 추가하십시오.

 <code>module.exports = { extends: ['plugin:vue/essential'], rules: { 'vue/no-v-html': 'off', }, };</code>

• .prettierrc.js 파일을 만들고 다음을 추가하십시오.

 <code>module.exports = { semi: true, trailingComma: 'all', singleQuote: true, printWidth: 100, };</code>

5. GIT 통합

• GIT를 사용하는 경우 "Gitlens"플러그인을 설치하여 GIT 기능을 더 잘 통합 할 수 있습니다.

Vue Development를 즐기십시오!

위의 구성을 통해 VSCODE는 이제 VUE 개발 준비가되었습니다. VSCODE를 사용하여 효율적이고 즐거운 VUE 인코딩을 즐기십시오!

위 내용은 VSCODE로 VUE를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!