Nuxt 를 시작합니다.js
Nuxt란?
Nuxt는 Vue의 오픈 소스 프레임워크이고, Vue는 JavaScript가 개발한 오픈 소스 프레임워크입니다.
Nuxt의 핵심 기능은 자동 성능 최적화, 루트, 구성 요소 가져오기, 서버측 렌더링(SSR) 또는 정적 사이트 생성(SSG) 옵션을 제공하는 것이다.Nuxt는 이러한 기능 외에도 기능을 추가하는 모듈을 제공합니다.만약 네가 게이츠비로 React를 한 적이 있다면, 모듈은 플러그인과 유사하다.
장치
create-nuxt-app를 사용하면 새 Nuxt 프로젝트를 쉽게 시작할 수 있습니다.이 CLI는 프로젝트를 빠르게 설정하기 위한 대화식 메뉴를 제공합니다.
yarn create nuxt-app <project-name> npx create-nuxt-app <project-name>CLI 에서 다음 옵션을 묻는 메시지가 표시됩니다.
create-nuxt-app에 대한 질문이 있으면 언제든지 --info 또는 --help를 실행할 수 있습니다.Nuxt 프로젝트 구성
Nuxt는 여러 개의 파일과 디렉터리로 이 프로젝트를 구축했습니다.먼저 다음과 같은 사항을 살펴보겠습니다.
/components /pages /store /layoutsNuxt를 사용하여 구성 요소 자동 가져오기
Nuxt를 사용하면 components 디렉토리의 모든 구성 요소가 페이지나 다른 구성 요소로 자동으로 가져옵니다.스크립트 표시줄에 있는 모든 구성 요소를 수동으로 열거할 필요가 없습니다!
프레젠테이션 프로젝트에서
Logo.vue 디렉터리에 /components 구성 요소가 있는 것을 볼 수 있습니다.이 폴더에 있기 때문에 프로젝트의 어느 곳에서든
<Logo /> 표시를 사용할 수 있습니다./pages 디렉터리에 index.vue 파일이 있습니다.이 파일은 Logo 구성 요소를 사용하지만 보시다시피 스크립트 태그와 함께 가져오지 않습니다.그것은 정말 쓸모가 있다!the Nuxt components directory here에 대한 더 많은 정보를 읽으십시오.
Nuxt 자동 라우팅 사용
Nuxt는 사용자가 상자를 열 때 사용할 페이지 경로를 처리합니다.
pages/ 디렉토리의 모든 파일은 파일 이름에 따라 자동으로 라우팅됩니다.이 프레젠테이션 프로젝트에서 페이지 디렉터리에 있는
index.vue 파일은 우리의 색인 경로가 됩니다.개발 서버에 방문했을 때 이 페이지를 볼 수 있습니다.예를 들어, 정보 및 연락처 페이지가 있으면 다음과 같이
pages 디렉토리에 추가합니다.pages/
--| index.vue
--| about.vue
--| contact.vue
/about 페이지와 /contact 페이지를 표시하는 경로를 만들 것입니다.하위 영역에 대응하는 플러그인 디렉터리를 사용할 수 있습니다.pages/
--| index.vue
--| about.vue
--| contact.vue
--| portfolio/
--| vue-project.vue
--| nuxt-project.vue
--| ionic-project.vue
/portfolio/vue-project에 방문하여 노선을 생성할 수 있습니다.중요 내부 링크에서 페이지로 연결할 때는
<NuxtLink /> 구성 요소를 사용합니다.외부 링크에 일반 앵커 표시를 사용합니다.너는 Nuxt automatic routing here에 관한 더 많은 정보를 읽을 수 있다.
자동 Vuex 스토리지 구성
또한 Nuxt는 Vuex 스토리지에 대한 디렉토리
/store를 제공합니다.이 디렉토리에 파일을 생성하면 Nuxt에서 자동으로 Vuex 옵션을 활성화합니다.the documentation here에 Vuex와 Nuxt에 대한 상세한 정보가 있거나 Vuex documentation를 보시면 더 많은 정보를 얻을 수 있습니다.Nuxt 레이아웃 구성
Nuxt의 레이아웃은 선택할 수 있지만,create Nuxt app는
layouts 디렉터리와 default.vue 파일을 제공하여 모든 페이지에 자동으로 적용됩니다.사용자가 선택한 레이아웃 업데이트default.vue를 사용하거나 페이지 스타일을 다른 방식으로 설정하려면 디렉터리를 삭제할 수 있습니다.또한 여러 개의 레이아웃 파일을 가지고 스크립트 태그에 사용할 레이아웃을 다음과 같이 지정할 수 있습니다.
<script>
export default {
layout: 'blog',
// OR
layout (context) {
return 'blog'
}
}
</script>
Reference
이 문제에 관하여(Nuxt 를 시작합니다.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ceceliacreates/getting-started-with-nuxt-js-4c4a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
