NuxtLink 개요는 Vue Router의 와 html의 태그를 모두 대체하는 Nuxt3의 내장 컴포넌트이다.내부 링크와 외부 링크를 자동으로 구분하고, 최적화를 사용하여 링크를 렌더링 한다.NuxtLink는 내부 링크인지 외부 링크인지 자동으로 감지하고 적절한 방식으로 처리합니다.내부 링크 (/main 같은 경로)는 Vue Router를 사용해 클라이언트 사이드 내비게이션을 수행합니다.외부 링크 (https://example.com)는 일반적인 태그로 렌더링 됩니다.내부 라우팅이렇게 내부 경로의 /main으로 설정되어 있는 경우, 내부의 다른 페이지에 연결한다. Main Page 외부 라우팅이렇게 외부 경로 url이 설정되어있는 경우, 외부 웹사이트에 연결한다. Nuxt Doc..
definePageMeta()pages/ 디렉터리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로 함수이다. 주요 요소들은 아래와 같다.definePageMeta로 정의한 메타데이터의 주요 요소 • alias여러 URL을 동일한 페이지로 연결할 수 있도록 별칭을 지정합니다. • keepalive페이지를 로 감싸 상태를 유지하도록 설정합니다. • key의 렌더링을 제어하기 위한 키 값을 설정합니다. • layout페이지에 사용할 레이아웃을 지정합니다. false로 설정하면 레이아웃을 비활성화할 수 있습니다. • layoutTransition / pageTransition페이지 및 레이아웃 변경 시 사용할 전환 효과를 설정합니다. • middleware페이지를 로드하기..
Nuxt 3 공식 문서https://nuxt.com/docs/getting-started/installation Installation · Get Started with NuxtGet started with Nuxt quickly with our online starters or start locally with your terminal.nuxt.com0. node version# node versionnvm install 20nvm use 20npm -v1. create nuxt빈 폴더 하나를 만들고, 터미널에서 pnpm으로 설치했다.npx nuxi@latest init nuxt3_lecture 2. package manager 선택npm 선택 3. package.json 수정 (nuxi)nuxt3부터..
vue cli 공식 사이트https://cli.vuejs.org/ Vue CLI cli.vuejs.org node, npm 버전 확인node, npm 버전을 확인하고, 없으면 설치해야한다.node -vnpm -v vue cli 설치npm install -g @vue/cli vue 프로젝트 생성vue create vue 프로젝트 실행npm run serve
Vue 인스턴스: new Vue()new Vue()로 생성한 Vue 인스턴스는 화면에 뿌려지는 최상위(Root) 컴포넌트를 말한다. 해당 Vue Instance에서 여러 컴포넌트를 호출에서 사용하는 것이 Vue의 기본 문법이다. 아래의 5가지 요소들을 가장 많이 사용한다.el: '#app'Vue 인스턴스가 관리할 DOM 요소를 지정한다. 위쪽에 id=app인 에 Vue 인스턴스를 연결한다.해당 Vue 인스턴스는 위에 id=app인 태그만을 관리한다.dataVue 인스턴스에서 관리할 데이터를 정의한다. {{ message }} message란 이름의 데이터를 Vue 인스턴스 내에서 this.message로 사용 가능하고, DOM 요소에서는 {{message}}로 가..
개발환경 세팅개발환경 구성ChromeVSCodeVue.js DevTools (크롬 extention)Node.jsnpmVSCODE extentions파일 아이콘 테마 : Material Icon Theme뷰 확장 플러그인 : Vetur뷰 코드 스니펫 : Vue VSCode Snippets문법 검사 : ESLint, Prettier, ES6 String HTML실습 환경 보조 : Live Server프로젝트 생성원하는 위치에 폴더 하나 만들고, VSCode로 열어서 터미널을 켜주고 아래 명령어를 입력한다.npm init nuxt-app@latest axios 설치npm i axios
