최근 Vue에 대한 니즈가 높아지고 있고,
React만 접해본 주니어 개발자로서 vue를 시도해보고 안목을 넓혀보자
세팅
Vue를 설치하고 create 해주면 된다.
Vue 3를 선택하고 Yarn으로 채택하였다.
기존 Cra랑 다르게 이런 세팅도 편하다.
yarn serve 입력하면 빌드되면서 만들어진다.
파싱 오류
Parsing error: No Babel config file detected for C:\Users\wns45\OneDrive\문서\GitHub\Vue_Practice\vue_practice\src\App.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.
해당 파싱 오류가 떠서 EsLint여서 json 파일을 들어가서 설정해주었다.
"eslint.workingDirectories": [
{"mode": "auto"}
],
Multi-word
Vue.js에서 컴포넌트 이름은 항상 두 개 이상의 단어로 구성해야 합니다. 이는 컴포넌트 이름이 유일해야 하기 때문입니다. 예를 들어, my-component와 같은 이름을 사용할 수 있지만, component와 같은 단일 단어로는 컴포넌트를 정의할 수 없습니다.
Vue.js에서 컴포넌트 이름은 일반적으로 케밥 케이스(kebab-case)를 사용합니다. 이는 단어 사이에 하이픈(-)을 사용하여 이름을 구분하는 방식입니다. 예를 들어, "my-component"와 같은 이름을 사용할 수 있습니다. 이렇게 이름을 수정하면 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.
사용하지 않는 IMPORT 오류
기존 react에서도 사용하지 않는 것을 오류를 띄우는데
warning이 아니라 에러였다.
작은 차이지만 기록하였다.
router 문법
import { createRouter, createWebHashHistory } from "vue-router";
import HomeVue from "~/pages/Home";
export default createRouter({
//has 모드 : 특정 페이지에서 새로고침 했을때 페이즈를 찾을 수 없음과 같은 알림 방지
history: createWebHashHistory(),
routes: [
{
path: "/",
name: HomeVue,
component: HomeVue,
},
],
});
먼저 라우터 파일을 작성해주고
main.js에서 이렇게 작성해준다.
use 메소드를 사용하여서 routes를 사용하고
App.vue 에서
이런식으로 작성해준다.
위 그림처럼 신기하게도 파스칼 케이스와 케밥 케이스 둘다 가능하도록 설정되어 있다.
개인적으로 파스칼 케이스를 선호해서
파스칼 케이스를 쓰겠다.
style
style의 언어를 정할 수 있고, 범위도 지정할 수 있다.
scoped는 이 페이지 안에서 라는 뜻이다.
Snippet 활용법
#cityNameBOX라고 작성하고 tap을 누르면
이런식으로 작성이 된다.
class .을 쓰면 된다
그리고 vue도 작성할 때 기본 셋팅을 vue 쓰고 tap을 눌러주면 기본 페이지 셋팅이 된다.
sass 설정
npm install sass-loader sass webpack --save-dev
yarn add sass-loader sass webpack --dev둘 중 편한 것을 설치해주고
module.exports = {
chainWebpack: config => {
// Sass Loader 설정 추가
config.module
.rule('sass')
.test(/\.sass$/)
.use('sass-loader')
.loader('sass-loader')
.end();
},
configureWebpack: {
module: {
rules: [
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
}
]
}
}
};vue.config.js에 위 문장을 추가해주면 된다.
data 관리
위처럼 script에 data를 선언해서
리턴해주는 방식으로 데이터를 넘겨준다.
v-for
그리고 위처럼 React map에서 돌리는 방식과 비슷하게 v-for을 써주고 배열에 in을 써주고 해당 element이름을 선언해준다.
이후에 p태그 처럼 {{}}중괄호를 2개 선언하는 방식으로 작성한다.
또한 key값도 적어주어야하는데 :key로 선언해준다.
신기하게도 변수인데도 ""안에 선언해준다.
React와 다른 부분이다.
