[vue] Visual Studio Code에서 Vue 설치하기

 

 

vue 설치

파워쉘 터미널 파일생성 권한 변경

set-ExecutionPolicy RemoteSigned

파워쉘 관리자로 실행하여 명령어 입력하여 권한 풀어줌

 

 

 

Vue 설치

npm install -g vue
npm install -g @vue/cli

VS CODE 실행 후 터미널 켜서 vue 설치

 

 

Vue 프로젝트 생성

vue create [파일명]
vue.cmd create [파일명] --에러발생시 해당 명령어로 실행

 

 

 

 

VS CODE로 생성된 프로젝트 폴더 열기

 

 

 

 

Vue 프로젝트 속성 파일

 

package.json : 프로젝트의 기본 설정 파일로, 프로젝트의 메타데이터(이름, 버전, 설명 등)와 의존성(라이브러리, 패키지) 정보를 포함합니다.

• name: 프로젝트 이름
• version: 프로젝트 버전
• scripts: 프로젝트 빌드, 개발 서버 실행 등 다양한 명령어 스크립트
• dependencies: 런타임 의존성 패키지 목록
• devDependencies: 개발 시에만 필요한 의존성 패키지 목록

vue.config.js (선택적) : Vue CLI 프로젝트의 기본 설정을 커스터마이징할 때 사용합니다. Webpack 설정, 개발 서버 설정 등을 이 파일에서 수정할 수 있습니다.

• publicPath: 배포 시 기본 URL 경로 설정
• outputDir: 빌드 파일이 생성될 디렉토리 설정
• devServer: 개발 서버 설정 (포트 번호, 프록시 등)

.babel.config.js : Babel 설정 파일로, 최신 JavaScript 코드를 구형 브라우저에서도 호환되도록 변환하는 Babel의 설정을 정의합니다.

• presets: 사용할 Babel 프리셋 설정 (예: @vue/cli-plugin-babel/preset)

 

.eslintrc.js : ESLint 설정 파일로, 코드 품질과 일관성을 유지하기 위한 린팅 규칙을 정의합니다.

• env: 코드가 실행될 환경 설정 (예: browser, node)
• extends: 기본으로 사용할 ESLint 구성 (예: eslint:recommended, plugin:vue/essential)
• rules: 사용자 정의 린팅 규칙

 

postcss.config.js : PostCSS 설정 파일로, CSS 변환 플러그인 설정을 정의합니다. 예를 들어, 자동 접두사 추가, CSS 최적화 등을 수행할 수 있습니다.

• plugins: 사용할 PostCSS 플러그인 목록 (예: autoprefixer)

.gitignore : Git에서 버전 관리하지 않을 파일이나 디렉토리를 지정합니다. 일반적으로 node_modules 디렉토리, 빌드 결과물 등이 포함됩니다.

README.md: 프로젝트에 대한 설명, 설치 및 사용법, 라이선스 정보 등을 담은 문서입니다.

 

 

 

vue 실행

npm run serve

명령어를 입력하여 로컬 개발 서버를 시작하여 프로젝트를 브라우저에서 실시간으로 확인할 수 있습니다.

 

 

 

실행된 주소를 클릭하면 웹에 vue가 올라오는것을 확인할 수 있습니다.