Vue 시작하기

Vue.js 3버전 홈페이지

 

CDN

CDN 및 NPM 설치

 

VUE VLI, Vetur

Vue CLI

 

App.vue 파일은 하이라이트가 없어서 Vetur를 설치하면

하이라이트 생겨서 편하게 보입니다.

 

Vetur은 vue를 2로 인식하는 경우가 많습니다.

이럴 때는 volar를 써보세요!

 

Vue3 Webpack Template

기존 webpack-template 예제로 만들 겁니다.

 

js폴더를 삭제하며, src폴더 새로 생성,

안에는 main.js, App.vue 두 파일을 만듭니다.

npm i vue@next

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

위 두 명령어로 vue개발환경을 설치합니다.

 

webpack.config.js 파일에 entry를 ./src/main.js 로 연결하며

module의 rule 부분을 아래내용 추가합니다.

vue-style-loader도 추가해야합니다.

 

마지막으로 

const { VueLoaderPlugin } = require('vue-loader') 를 통해 뷰로더를 가져옵니다.

plugins 부분에서 new VueLoaderPlugin()  명시하면 됩니다.

 

webpack.config.js 파일에 entry 위 부분에 캡처처럼 작성하면,

js와 vue 확장자인 파일들을 import할 시, 확장자를 생략할 수 있습니다.

 

images 폴더는 assets 이름으로 바꿔서 src안에 넣습니다.

또는 컴포넌트, 즉, 또 다른 vue파일을 생설하려면,

src 폴더 안에 components폴더 생성한 후, PascalCase 표기법으로 이름 지어줍니다.

 

위 처럼 img파일을 열어보려면

npm i -D file-loader 명령어를 통해 파일을 열어봅니다.

webpack.config.js 에서 위 내용을 추가합니다.

resolve 부분에서 경로 별칭을 설정합니다.

굳이 설정할 필요없지만, 편리를 위해 추천합니다.

 

Vue3 Webpack Template -ESLint 구성

위에 템플릿 만들면서 에러 사항이 나타날 수 있습니다.

이게 vue2와 vue3의 기능 차이때문입니다.

 

npm i -D eslint eslint-plugin-vue babel-eslint 를 통해 설치합니다.

.eslintrc.js 파일을 생성합니다.

해당 파일에 아래와 같이 작성합니다.

extends 부분은 lv1~lv3이 있습니다. 등급이 높을 수록 규칙이 엄격합니다.

자세한 내용은 eslint rules 설명 페이지를 참조하시기 바랍니다.

 

변경하고 싶은 규칙을 rules에 작성하면 됩니다.

이부분은 eslint-plugin-vue 설명 페이지를 참조하시기 바랍니다.

 

파일 작성하면서 eslint 규칙에 안 맞을 수도 있고요.

자동으로 수정되는 방식을 소개하겠습니다.

Windows: Ctrl + Alt + P

MacOS: Cmd + Alt + P

위 명령어를 통해 VSCode의 명령창을 열어줍니다.

open settings(JSON)에 들어가서 내용을 확인합니다.

캡처내용처럼 추가합니다.

즉, 에디터가 파일을 저장할 때 eslint 규칙에 맞게 저장하겠다는 겁니다.

 

선언적 렌더링과 입력 핸들링

SFC(Single File Component) 하나의 파일에 template(html), script(js), style(css)를 모두 구성할 수 있습니다.

 

click할 때마다 increase함수 작동합니다.

기본적으로 count가 0으로 설정하고, increase함수는 count숫자 + 1입니다.

 

반응성(Reactivity)은 data가 갱신되면 화면에도 갱신되는 개념입니다.

Vue.js를 포함한 모든 프론트엔드 프레임워크들의 핵심적인 개념입니다.

 

조건문과 반복문

해당 태그안에 바로 조건을 부여해서 사용합니다.

v-for 로 반복문 구현합니다.

:key부분은 고유인지를 확인하는 겁니다.

 

style부분은 css를 기본값으로 작성합니다.

중첩때문에 scss를 사용하고 싶으면 lang="scss"를 표시하면 됩니다.

scoped 속성은 현재 vue파일에만 스타일을 적용된다는 뜻입니다.

기타 파일로 인용되더라도 기타 파일에 영향을 끼치지 않습니다.

 

기타 vue파일을 불러서 사용하고 싶을 때 아래처럼 하시면 됩니다.

script부분에서 import를 하고, components에 객체로 만듭니다.

위에 hello를 fruit로 대칭함으로 template에서 태그를 hello를 변경하면 됩니다.