>  기사  >  개발 도구  >  vscode를 사용하여 기존 vue 프로젝트를 여는 방법

vscode를 사용하여 기존 vue 프로젝트를 여는 방법

王林
王林원래의
2019-12-12 16:34:1713556검색

vscode를 사용하여 기존 vue 프로젝트를 여는 방법

플러그인 설치

1 vetur 플러그인 설치

#🎜 🎜#플러그인 Vue 파일의 기본 구문을 강조하는 플러그인입니다. 플러그인 창에서 vetur를 입력하고 클릭하여 플러그인을 설치합니다. 파일->기본 설정->설정 인터페이스 오른쪽에 측면 추가 구성

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}
vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

 "eslint.options": {
        "plugins": ["html"]
}

2、eslint插件的安装

eslint智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误。至于安装,同样打开插件扩展窗口输入eslint点击安装插件,装好后也需要进行配置,在同vetur插件一样的地方进行配置

rrreee

vetur和eslint插件在配置中如下图所示:

vscode를 사용하여 기존 vue 프로젝트를 여는 방법

导入项目并编译

1、导入项目

从github上下载vuestic-admin项目(https://github.com/epicmaxco/vuestic-admin),拉到本地后打开VSCode直接点击文件、打开文件夹、导入项目,在控制台终端输入npm install添加包依赖

vscode를 사용하여 기존 vue 프로젝트를 여는 방법

如果没有安装npm请先安装npm。

2、运行项目

同样在终于执行npm run dev2 eslint 플러그인 설치

#🎜 🎜#eslint 지능형 오류 감지 플러그인은 특정 개발에서 큰 역할을 하며 시간 내에 오류를 찾는 데 도움이 될 수 있습니다. 설치도 플러그인 확장 창을 열고 eslint를 입력한 후 클릭하면 플러그인이 설치됩니다. 설치 후 vetur 플러그인과 동일한 위치에 구성도 해줘야 합니다.

rrreeevscode를 사용하여 기존 vue 프로젝트를 여는 방법vetur 및 eslint 플러그인은 아래와 같이 구성됩니다.

vscode를 사용하여 기존 vue 프로젝트를 여는 방법프로젝트를 가져오고 compile

#🎜🎜##🎜🎜#1 , 프로젝트 가져오기#🎜🎜##🎜🎜#github에서 vuestic-admin 프로젝트를 다운로드합니다(https://github .com/epicmaxco/vuestic-admin#🎜🎜#), 로컬로 끌어와 VSCode를 열고, 파일을 직접 클릭하고, 폴더를 열고, 프로젝트를 가져옵니다. , 패키지 종속성을 추가하려면 콘솔 터미널에 npm install을 입력하세요#🎜 🎜##🎜🎜#961dbd35eb25c65060d6c7c66845a 3c.png#🎜🎜##🎜🎜#npm이 설치되지 않은 경우 npm을 먼저 설치하세요. #🎜🎜##🎜🎜#2. 프로젝트 실행 #🎜🎜##🎜🎜# 또한 마지막에 npm run dev를 실행하여 프로젝트 실행을 시작합니다. 브라우저에서 실행 결과는 아래 그림과 같으며 이는 구성이 성공했음을 의미합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜# 추천 관련 기사 및 튜토리얼: #🎜🎜#vscode tutorial#🎜🎜##🎜🎜#

위 내용은 vscode를 사용하여 기존 vue 프로젝트를 여는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.