Vue 2와 Vue Router를 활용한 라우팅 설정 및 페이지 렌더링
Vue 컴포넌트 템플릿 생성
프로젝트 구조가 잡혔다면, 이제 실제 화면을 구성할 뷰 컴포넌트를 작성해야 합니다. 간단한 예제로 목록을 보여주는 메인 화면과 상세 내용을 보여주는 화면 두 가지를 만들어 보겠습니다.
src/views 디렉토리를 생성하고, 그 안에 HomeView.vue와 DetailView.vue 파일을 만듭니다.
HomeView.vue:
<template>
<section class="home- ...
9월 28일 19:43에 게시됨
Vue CLI 3에서 ESLint 설정 커스터마이징
Vue CLI 3 프로젝트에서 ESLint를 효과적으로 설정하고 필요에 따라 조정하는 방법을 살펴니다.
기본 설정 구조
프로젝트 생성 시 package.json에 자동으로 추가되는 ESLint 설정은 다음과 같습니다.
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
...
8월 25일 08:54에 게시됨
Vue 프로젝트에서 ESLint 비활성화 및 Prettier 기반 전역 코드 포맷 설정
Vue CLI 기반 프로젝트에서 저장 시 자동으로 실행되는 ESLint 검사를 비활성화하고, 대신 Prettier를 사용해 일관된 코드 스타일을 적용하는 방법을 설명합니다.
1. ESLint 자동 검사 비활성화
vue.config.js 파일에서 lintOnSave 옵션을 false로 설정하여 개발 서버 실행 중 저장 시 자동 린트를 끕니다.
const { defineConfig } = require('@vue/cli-service');
modul ...
8월 6일 08:49에 게시됨
Vue CLI 기반 프로젝트 초기화 및 구조 분석
Vue CLI는 Vue.js 공식 팀에서 제공하는 강력한 프로젝트 스캐폴딩 도구로, 개발자가 빠르게 표준화된 Vue 애플리케이션을 구성할 수 있도록 지원합니다. 이 도구는 반복적인 설정 작업을 자동화하고, 웹팩 기반의 빌드 환경, 코드 검사, 라우팅, 상태 관리 등을 통합하여 개발 생산성을 크게 향상시킵니다.
설치는 npm 또는 yarn을 통해 전역으로 수행할 수 있습니 ...
7월 18일 09:22에 게시됨
Vue 프로젝트 기본 설정 가이드
1. 프로젝트 초기화
Vue.js 기반 프로젝트를 구축하려면 먼저 Node.js를 설치해야 합니다. 설치 후 NPM을 통해 Vue CLI 3.0 이상 버전을 전역으로 설치합니다. CLI는 vue ui 명령어로 그래픽 인터페이스를 제공하거나, vue create <project-name> 명령어로 터미널에서 직접 프로젝트를 생성할 수 있습니다.
프로젝트 생성 시 중요한 점은 설정 파일을 분리하는 것입 ...
7월 5일 20:31에 게시됨