Nuxt 시작하기

게시 됨: 2022-03-10

빠른 요약 ↬ 개발자는 종종 SPA(단일 페이지 애플리케이션)의 SEO와 Google 검색(블로그, 포트폴리오 웹사이트, 제품 웹사이트 등)에서 자신이 얼마나 잘할 것인지에 대해 걱정합니다. 때로는 서버 측 렌더링 응용 프로그램을 구축하는 것이 얼마나 복잡한지 걱정하기도 합니다. 이 자습서에서는 Nuxt.js를 사용하여 서버 측 렌더링된 응용 프로그램을 만드는 방법, 개발을 위해 응용 프로그램을 구성하는 방법 및 Heroku에 배포하는 방법을 배웁니다.

웹 개발자는 JavaScript 프레임워크(Angular, React, Vue)를 사용하여 많은 단일 페이지 응용 프로그램을 빌드합니다. SPA 는 로드 시 페이지 콘텐츠를 동적으로 채웁니다. 즉, Google이 사이트를 크롤링할 때까지 중요한 콘텐츠가 아직 사이트에 삽입되지 않은 상태입니다. 이 문제의 일부는 응용 프로그램의 콘텐츠를 미리 렌더링하여 해결할 수 있습니다. 이것이 서버 측 애플리케이션이 들어오는 곳이며 Vuejs 개발자의 경우 Nuxt.js를 사용하여 서버 측 애플리케이션을 구축할 수 있습니다.

처음부터 Nuxt.js, 파일 구조 및 라우팅 작동 방식을 소개하므로 이전에 사용하지 않았다고 가정합니다. 또한 Vuex와 함께 작동하도록 하는 방법을 만납니다.

이 튜토리얼이 끝나면 Nuxt.js에서 기본 웹 애플리케이션을 계속 구축할 수 있어야 합니다. Nuxt.js를 시작하는 방법이 궁금하시다면 이 방법으로 충분할 것입니다.

이 기사는 Vue.js에 상당히 익숙한 사람들을 대상으로 하며 개념입니다. Vue.js에 대한 지식이 없는 사람들을 위해 공식 Vuejs 문서와 The Net Ninja의 Vuejs 재생 목록에서 시작하는 것을 고려하십시오.

점프 후 더! 아래에서 계속 읽기 ↓

Nuxt.js는 무엇입니까?

공식 페이지에 따르면:

“Nuxt는 최신 웹 애플리케이션을 만들기 위한 Vue.js를 기반으로 하는 진보적인 프레임워크입니다. Vue.js 공식 라이브러리(vue, vue-router 및 vuex)와 강력한 개발 도구(webpack, Babel 및 PostCSS)를 기반으로 합니다. Nuxt의 목표는 훌륭한 개발자 경험을 염두에 두고 웹 개발을 강력하고 성능 있게 만드는 것입니다.”

용도에 따라 세 가지 유형의 응용 프로그램을 만들 수 있습니다.

정적 생성 페이지(사전 렌더링)
정적 생성 애플리케이션은 페이지의 콘텐츠를 가져오기 위해 API 요청이 필요하지 않습니다. 즉, 콘텐츠가 이미 HTML 파일에 포함되어 있습니다. 정적 사이트의 예로는 포트폴리오 웹사이트 또는 제품의 랜딩 페이지가 있습니다.
단일 페이지 응용 프로그램
대부분의 JavaScript 프레임워크(React, Angular, Emberjs, Vue 등)는 콘텐츠가 더 빠른 전환으로 동적으로 채워지는 단일 페이지 애플리케이션입니다. 대부분의 SPA는 라우팅을 위해 HTML5 기록 API 또는 위치 해시를 사용합니다.
서버 측 렌더링 응용 프로그램(SSR)
서버 측 렌더링은 완전히 렌더링된 페이지를 클라이언트에 보내기 위해 서버에서 클라이언트 측 데이터를 가져오고 표시하는 데 사용되는 기술입니다. 이것은 귀하의 애플리케이션에 좋은 SEO를 얻기 위한 좋은 접근 방식입니다.

첫 번째 Nuxt.js 애플리케이션 만들기

다음 두 가지 방법으로 Nuxt.js 애플리케이션을 만들 수 있습니다.

스캐폴딩 도구 create-nuxt-app 사용.
기스로부터.

우리가 만들고자 하는 완성된 앱을 보고 싶다면 여기 GitHub 리포지토리에 대한 링크가 있습니다.

이 자습서에서는 create-nuxt-app 사용에 중점을 둘 것이므로 시작하겠습니다. npx가 설치되어 있는 경우 터미널을 열고 다음 명령을 실행합니다.

 $ npx create-nuxt-app nuxt-tutorial-app

또는

 $ yarn create nuxt-app nuxt-tutorial-app

이 자습서의 목적을 위해 nuxt-tutorial-app 은 응용 프로그램의 이름이지만 자유롭게 이름을 다르게 지정할 수 있습니다.

그 다음에는 개발에 필요할 수 있는 것으로 애플리케이션을 구성하는 데 도움이 되는 옵션 목록이 나옵니다.

내 구성은 다음과 같습니다.

이 튜토리얼의 목적을 위해 axios, linting 및 Prettier 구성이 필요하지 않습니다.

완료되면 터미널에서 다음 명령을 실행합니다.

 $ cd nuxt-tutorial-app $ npm run dev

이제 앱이 https://localhost:3000에서 실행 중이어야 하며 다음과 같이 표시되어야 합니다.

이 시점에서 앱을 개발할 준비가 되었습니다.

Nuxt 폴더 구조 이해하기

우리가 했던 것처럼 응용 프로그램을 스캐폴딩하면 작업을 시작할 수 있는 다른 파일과 폴더가 생성됩니다. 이전에 Nuxt를 사용해 본 적이 없는 사람에게는 균형이 무너질 수 있습니다. 그래서 우리는 폴더를 살펴보고 그 중요성을 이해할 것입니다.

자산
이 폴더는 이미지, 글꼴 파일, SASS, LESS 또는 JavaScript 파일과 같은 컴파일되지 않은 파일을 위한 것입니다. styles 폴더를 만들고 main.css 파일을 추가하고 그 안에 다음을 복사하여 붙여넣습니다.

 a { text-decoration: none; color: inherit; cursor: pointer; } .header { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; height: 60px; top: 0; position: sticky; background-color: #fff; display: flex; justify-content: space-between; align-items: center; } .logo { width: 40%; max-width: 200px; height: 40px; } .logo .NuxtLogo { max-width: 30px; margin-left: 10px; max-height: 40px; } .nav { width: 60%; height: 40px; display: flex; justify-content: space-between; padding-right: 10px; max-width: 300px; } .nav__link { width: 80px; display: flex; align-items: center; border-radius: 4px; justify-content: center; height: 100%; border: 1px solid #00c58e; cursor: pointer; } .nav__link:active { background-color: #00c58e; border: 1px solid #00c58e; color: #fff; box-shadow: 5px 3px 5px 2px #3f41468c; } .home { padding-top: 30px; } .home__heading { text-align: center; } .directories { display: flex; box-sizing: border-box; padding: 10px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } @media (min-width: 768px) { .directories { justify-content: space-between; } } .directory__container { width: 100%; max-width: 220px; cursor: pointer; border-radius: 4px; border: 1px solid #00c58e; display: flex; height: 60px; margin: 10px 5px; margin-right: 0; justify-content: center; align-items: center; } .directory__name { text-align: center; } .directory { width: 100%; margin: 50px auto; max-width: 450px; border-radius: 4px; border: 1px solid #00c58e; box-sizing: border-box; padding: 10px 0; } .directory__info { padding-left: 10px; line-height: 22px; padding-right: 10px; }

위의 스타일은 우리가 구축할 애플리케이션 전체에서 사용됩니다. 보시다시피 탐색 스타일과 진행하면서 애플리케이션에 연결할 기타 측면이 있습니다.

구성품
이 폴더는 Vue.js에서 친숙한 폴더이며 재사용 가능한 구성 요소를 포함합니다.

이제 첫 번째 구성 요소를 만들고 이름을 navBar.vue 로 지정하고 다음 코드를 추가해 보겠습니다. 우리는 사이트의 탐색 모음에 로고를 표시하고 앞으로 만들 홈 및 정보 페이지에 대한 링크를 원합니다. 이 탐색 모음은 응용 프로그램 전체에서 볼 수 있습니다. 또한 위에서 추가한 몇 가지 스타일을 사용합니다.

 <template> <header class="header"> <div class="logo"> <nuxt-link to="/"> <Logo /> </nuxt-link> </div> <nav class="nav"> <div class="nav__link"> <nuxt-link to="/">Home</nuxt-link> </div> <div class="nav__link"> <nuxt-link to="/About">About</nuxt-link> </div> </nav> </header> </template> <script> import Logo from "@/components/Logo"; export default { name: "nav-bar", components: { Logo } }; </script> <style> </style>

템플릿 섹션에는 사용자에게 표시되는 내용이 포함됩니다. 로고와 탐색 링크가 포함된 header 요소가 있습니다. 페이지에 링크하기 위해 구성 요소 페이지 간 탐색을 제공하는 nuxt-link 를 사용합니다.

스크립트 섹션에서 Nuxt 별칭 @ 를 사용하여 logo 구성 요소를 가져오고 구성 요소로 추가하여 사용할 구성 요소에 선언했습니다. 이렇게 하면 템플릿에서 렌더링할 수 있습니다.

형세
여기에서 애플리케이션 레이아웃을 저장할 것입니다. 이것은 애플리케이션의 디자인이 인증된 사용자를 위한 레이아웃과 게스트 또는 관리자를 위한 레이아웃과 같이 두 개 이상의 레이아웃을 요구하는 경우에 특히 유용합니다. 이 튜토리얼의 목적을 위해 우리는 기본 레이아웃을 고수할 것입니다.

default.vue 파일을 열고 navBar 구성 요소를 애플리케이션 레이아웃에 추가하겠습니다.

 <template> <div> <Nav /> <nuxt /> </div> </template> <script> import Nav from "~/components/navBar.vue"; export default { components: { Nav } }; </script>

템플릿 섹션에서 레이아웃 컨테이너 내부에 Nav 구성 요소를 추가하여 파일로 가져와 스크립트 섹션에서 선언한 후 항상 맨 위에 표시되도록 했습니다.

Nav 구성 요소 다음에 나오는 다음 항목은 Nuxt에게 모든 경로를 렌더링할 위치를 알려주는 <nuxt /> 입니다.

이 Nav 구성 요소는 위에서 만든 구성 요소입니다. 여기에 추가하면 Nav 구성 요소가 애플리케이션 전체에서 사용됩니다.

미들웨어
이 폴더는 페이지가 렌더링되기 전에 실행해야 하는 JavaScript 파일을 보관하기 위해 만들어졌습니다. Vuejs 네비게이션 가드를 사용한 적이 있다면 이 폴더는 이와 같은 파일을 위해 생성되었습니다.
페이지
이것은 Vuejs 배경을 가진 개발자들이 익숙하지 않을 또 다른 폴더입니다. 모든 *.vue 파일이 애플리케이션에서 경로로 생성되어 뷰 와 라우터 폴더의 역할을 동시에 하는 방식으로 작동합니다. 이에 대해서는 다음 섹션에서 자세히 설명하겠습니다.
플러그인
루트 Vue.js 애플리케이션을 마운트하기 전에 실행하려는 파일을 저장하는 곳입니다. 필수 폴더가 아니므로 삭제할 수 있습니다.
nuxt.config.js
이 파일은 애플리케이션을 구성하는 데 사용되며 일반적으로 앱을 만들 때 구성을 기반으로 미리 채워집니다. 이상적인 nuxt.config.js 파일은 기본적으로 다음과 같아야 합니다.

 export default { mode: 'universal', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ ], /* ** Nuxt.js dev-modules */ buildModules: [ ], /* ** Nuxt.js modules */ modules: [ ], /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend (config, ctx) { } } }

이 파일이 변경될 때마다 변경 사항을 반영하기 위해 애플리케이션이 자동으로 다시 시작됩니다. 파일에 사용된 속성이 의미하는 바를 살펴보겠습니다.

방법
신청 유형; universal 또는 spa . 유니버설을 선택하면 앱이 서버 측과 클라이언트 측 모두에서 실행될 수 있기를 원한다고 Nuxt에 알리는 것입니다.
머리
앱의 head 태그 안에 있는 모든 기본 메타 태그 속성과 파비콘 링크는 여기에서 찾을 수 있습니다. Nuxt.js에는 Vue.js와 달리 기본 index.html 파일이 없기 때문입니다.
로딩
모든 Nuxt 응용 프로그램은 기본 로더 구성 요소와 함께 제공되며 여기에서 color 을 사용자 지정할 수 있습니다.
CSS
애플리케이션을 탑재할 때 애플리케이션이 이를 고려할 수 있도록 모든 전역 CSS 파일에 대한 링크를 입력해야 합니다. 여기에 CSS 파일에 대한 링크를 추가하고 애플리케이션을 다시 시작합니다.

 /* ** Global CSS */ css: ["~/assets/styles/main.css"]

플러그인
플러그인 폴더의 모든 플러그인을 애플리케이션에 연결하는 곳입니다. 플러그인에 대한 파일 경로를 허용하는 src 와 같은 속성을 가진 객체와 애플리케이션이 이러한 플러그인을 처리하는 방법을 구성하는 mode 를 받습니다. 서버 측 플러그인 또는 클라이언트 측 플러그인으로. 예를 들어:

 { src: '~/plugins/universal-plugin.js' }, // for server and client plugins { src: '~/plugins/client-side.js', mode: 'client' }, // for client only plugins { src: '~/plugins/server-side.js', mode: 'server' }, // for server side only plugins

이는 특히 플러그인에 서버 측에서 사용할 수 없는 localStorage 와 같은 것이 필요한 경우 서버 측 또는 클라이언트 측에서 오류를 피하는 것이 중요합니다.

nuxt.config.js 파일에 대한 자세한 내용은 공식 문서를 확인하세요.

Nuxt 페이지 및 라우팅 시스템

Nuxt 애플리케이션의 페이지 폴더는 애플리케이션의 경로를 구성하는 데 사용됩니다. 즉, 경로 이름은 이 폴더의 각 파일 이름에 따라 다릅니다. 예를 들어 페이지 파일 내에 about.vue 파일이 있는 경우 /about 경로가 앱에 있지만 그게 다가 아닙니다. 애플리케이션에 대한 동적 경로를 원하면 어떻게 됩니까? 아니면 중첩 경로? 어떻게 하시나요? 알아 보자.

기본 경로

기본 경로는 작동을 위해 추가 구성이 필요하지 않은 경로로 분류할 수 있습니다. 예를 들어, 직접 경로 /work 또는 /contact 경로입니다. 따라서 페이지 폴더가 다음과 같은 경우:

 pages/ --| me/ -----| index.vue -----| about.vue --| work.vue --| contact.vue --| index.vue

Nuxt는 다음과 같은 라우터 구성을 자동으로 생성합니다.

 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'work', path: '/work', component: 'pages/work' }, { name: 'contact', path: '/contact', component: 'pages/contact' }, { name: 'me', path: '/me', component: 'pages/me/index.vue' }, { name: 'me-about', path: '/me/about', component: 'pages/me/about.vue' } ] }

그런 다음 이러한 경로를 사용하여 연결된 구성 요소에 액세스할 수 있습니다. 경로에 pages 가 포함되지 않은 것을 볼 수 있습니다. 그리고 Nuxt는 index.vue 라는 구성 요소를 추가 구성 없이 처리해야 합니다.

중첩 경로

중첩 경로를 생성하려면 페이지 폴더 안에 대시보드 라는 폴더를 생성합니다. 이 폴더에는 중첩하려는 모든 파일이 포함되어야 합니다. 예: user.vue 및 settings.vue . 그런 다음 페이지 폴더의 루트에 Dashboard.vue 라는 파일을 만듭니다.

 pages/ --| me/ -----| index.vue -----| about.vue --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| work.vue --| contact.vue --| index.vue

이렇게 하면 다음과 같은 경로가 있는 라우터가 자동으로 생성됩니다.

 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'work', path: '/work', component: 'pages/work' }, { name: 'contact', path: '/contact', component: 'pages/contact' }, { name: 'me', path: '/me', component: 'pages/me/index.vue' }, { name: 'me-about', path: '/me/about', component: 'pages/me/about.vue' }, { name: 'dashboard', path: '/dashboard', component: 'pages/dashboard.vue', children: [ { name: 'dashboard-user', path: '/dashboard/user', component: 'pages/dashboard/user.vue' }, { name: 'dashboard-settings', path: '/dashboard/settings', component: 'pages/dashboard/settings.vue' } ] } ] }

경로 이름은 항상 일반 패턴을 따릅니다.

 name of the folder + '-' + name of the file

이렇게 하면 각 경로에 고유한 이름이 지정됩니다.

동적 경로

동적 경로는 변수 로 정의되는 경로이며, 이 변수 는 앱의 클라이언트 데이터에서 가져온 이름, 번호 또는 id 일 수 있습니다. 이것은 id 가 데이터베이스에서 오는 항목의 id 일 가능성이 높은 API로 작업할 때 유용합니다.

Nuxt에서 동적 경로는 페이지 폴더의 파일 이름이나 폴더 이름에 _ 를 추가하여 정의됩니다. 예를 들어, 변수 이름이 id 인 동적 경로를 원할 경우 파일 이름을 _id.vue 로 지정하면 Nuxt가 자동으로 동적 경로를 생성합니다. 예를 들어:

 pages/ --| me/ -----| index.vue -----| about.vue -----| _routeName -------| index.vue -------| info.vue --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| work.vue --| _id.vue --| contact.vue --| index.vue

그러면 다음 경로가 포함된 라우터 파일이 자동으로 생성됩니다.

 { name: 'work', path: '/work', component: 'pages/work' }, { name: 'contact', path: '/contact', component: 'pages/contact' }, { name: 'id', path: '/:id', component: 'pages/_id.vue' } { name: 'me', path: '/me', component: 'pages/me/index.vue' }, { name: 'me-about', path: '/me/about', component: 'pages/me/about.vue' }, { name: 'me-routeName', path: '/me/:routeName', component: 'pages/me/_routeName/index.vue' }, { name: 'me-routeName-info', path: '/me/:routeName/info', component: 'pages/me/route.vue' }, { name: 'dashboard', path: '/dashboard', component: 'pages/dashboard.vue', children: [ { name: 'dashboard-user', path: '/dashboard/user', component: 'pages/dashboard/user.vue' }, { name: 'dashboard-settings', path: '/dashboard/settings', component: 'pages/dashboard/settings.vue' } ] } ] }

Vue.js 라우터 태그 중 일부는 Nuxt에서 작동하고 서로 바꿔 사용할 수 있지만 Nuxt 라우터 구성 요소를 사용하는 것이 좋습니다. 다음은 Nuxt 라우터 태그와 Vue.js 라우터 태그의 차이점입니다.

VueJ	NuxtJS
라우터 링크	nuxt 링크
라우터 보기(중첩 경로용)	nuxt-child
라우터 보기(기본값)	넥스트

vue.js 라우터와 nuxt.js 라우터의 차이점

이 시점에서 앱은 다음과 같이 표시되어야 하며 탐색이 상단에 표시됩니다.

이제 Nuxt 페이지와 경로가 작동하는 방식을 이해했으므로 첫 번째 페이지와 경로 about.vue 를 추가해 보겠습니다. 이 페이지에는 해당 디렉토리에 대한 추가 정보를 보여주는 새 페이지에 대한 링크와 함께 애플리케이션의 일부 디렉토리가 나열됩니다.

여기에 다음 코드를 추가해 보겠습니다.

 <template> <section class="home"> <h1 class="home__heading">About Nuxtjs Directory Structure</h1> <div class="directories"> <div class="directory__container" v-for="directory in directories" :key="directory.id"> <p class="directory__name"> <nuxt-link :to="{ name: 'id', params: { id: directory.id, dir: directory } }" >{{ directory.name }}</nuxt-link> </p> </div> </div> </section> </template> <script> export default { name: "about-nuxt", data() { return { directories: [ { id: 0, name: "The Assets Directory", info: "By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving. You can also use the static directory for static assets. This folder is for un-compiled files such as images, font files, SASS, LESS or JavaScript files" }, { id: 1, name: "The Components Directory", info: "The components directory contains your Vue.js Components. You can't use asyncData in these components." }, { id: 2, name: "The Layouts Directory", info: "The layouts directory includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar). Layouts are a great help when you want to change the look and feel of your Nuxt.js app. Whether you want to include a sidebar or having distinct layouts for mobile and desktop" }, { id: 3, name: "The Middleware Directory", info: "The middleware directory contains your Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts)." }, { id: 4, name: "The Pages Directory", info: "The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router. Every Page component is a Vue component but Nuxt.js adds special attributes and functions to make the development of your universal application as easy as possible" }, { id: 5, name: "The Plugins Directory", info: "The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is the place to register components globally and to inject functions or constants. Nuxt.js allows you to define JavaScript plugins to be run before instantiating the root Vue.js Application. This is especially helpful when using your own libraries or external modules." }, { id: 6, name: "The Static Directory", info: "The static directory is directly mapped to the server root (/static/robots.txt is accessible under https://localhost:3000/robots.txt) and contains files that likely won't be changed (eg the favicon). If you don't want to use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder)." }, { id: 7, name: "The Store Directory", info: "The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store. Using a store to manage the state is important for every big application. That's why Nuxt.js implements Vuex in its core." } ] }; } }; </script> <style> </style>

script 섹션에서 시작하여 directories 변수에 저장할 배열을 생성했습니다. 각 배열에는 id , name 및 info 가 있는 객체가 포함되어 있습니다. 이것은 이 페이지가 열릴 때 사용자에게 표시할 데이터입니다. 이름을 클릭할 수 있도록 사용자에게 보여주고 싶습니다.

template 섹션에서 v-for 를 사용하여 배열을 반복합니다. 이를 통해 배열의 각 항목을 가져올 수 있으며 directory 를 사용하여 액세스할 수 있습니다. 루프에서 nuxt-link 를 사용하여 각 시간의 연결을 처리합니다. nuxt-link 를 사용하여 nuxt 라우터를 통해 각 디렉토리 항목의 세부 정보( id , name 및 info )를 전달합니다. 사용자가 항목을 클릭할 때 표시 페이지에 이를 표시할 수 있기를 원하기 때문에 이 작업을 수행합니다.

브라우저를 사용하여 /about 경로로 이동하면 다음과 같이 표시되어야 합니다.

이제 새 파일을 만들고 이름을 _id.vue. 이렇게 하면 정보 페이지에서 클릭한 디렉터리에 대한 약간의 정보를 표시하는 링크에서 id 매개변수를 가져오는 동적 경로가 자동으로 생성됩니다.

파일에 다음을 추가해 보겠습니다.

 <template> <section class="directory"> <h1 class="directory__name">{{ directory.name }}</h1> <p class="directory__info">{{ directory.info }}</p> </section> </template> <script> export default { name: "directory-info", data() { return { directory: this.$route.params.dir }; } }; </script> <style> </style>

우리가 한 일은 this.$route.params 를 사용하여 경로 param dir 에서 데이터를 가져오는 페이지를 만드는 것입니다. 이것은 클릭한 디렉토리의 name 과 info 를 얻은 다음 사용자에게 표시합니다.

따라서 디렉토리 링크(예: 상점 디렉토리)를 클릭하면 이것이 표시되어야 합니다.

그러나 문제가 있습니다. 이 페이지를 새로 고치면 디렉토리 정보가 손실되고 오류가 발생합니다. 이것은 Vuex Store를 사용하여 수정될 것이므로 자세히 살펴보겠습니다.

Nuxt에서 Vuex 스토어 사용하기

Vuex는 두 가지 모드를 사용하여 Nuxt에서 액세스할 수 있습니다.

클래식 모드( 더 이상 사용되지 않음 ).
모듈 모드.

모듈 모드

Nuxt는 앱 생성 시 자동으로 Store 폴더를 생성합니다. 모듈 모드에서 Nuxt는 이 폴더 안의 모든 파일을 모듈로 취급하지만 Vuex 스토어가 앱에서 활성화되려면 index.js 가 필요합니다. 따라서 store 폴더에 index.js 파일을 만들고 사용하도록 설정해 보겠습니다. 파일에 다음을 추가해 보겠습니다.

index.js

 export const state = () => ({ }) export const getters = { } export const mutations = { } export const actions = { }

우리가 한 모든 것은 우리가 필요로 할 수 있는 모든 파일을 위한 저장소를 설정하는 것입니다. 데이터를 저장하기 위한 state , state 에 대한 추가 조작을 수행하기 위한 getters , state 를 수정하기 위한 mutations 및 돌연변이 커밋을 위한 actions .

Nuxt는 또한 사용자가 각 핵심 개념을 서로 다른 파일로 분리할 수 있도록 하여 store.js , getters.js , mutation.js 및 action.js 를 가질 수 있으며 유지 관리가 용이하므로 좋습니다. 이제 새로 고침 시 디렉토리가 사라지는 문제를 수정합니다. 스토어를 사용할 것입니다. 하지만 먼저 Vuex persist 를 스토어용으로 설치하고 설정해야 합니다.

기본 설정에 따라 아래 명령 중 하나를 사용하여 npm에서 Vuex persist 을 설치합니다.

 $ npm install --save vuex-persist

또는

 $ yarn add vuex-persist

설치 후 플러그인 폴더에 vuex-persist.js 파일을 만들고 다음을 추가합니다.

 import VuexPersistence from 'vuex-persist' export default ({ store }) => { window.onNuxtReady(() => { new VuexPersistence({ storage: window.localStorage }).plugin(store); }); }

여기에서는 node-modules 에서 플러그인을 가져와서 localStorage 에 저장 하도록 구성합니다. 이 플러그인을 사용하면 sessionStorage 와 같은 다른 저장 옵션도 선택할 수 있으므로 해당 문서에서 자세한 정보를 자유롭게 탐색할 수 있습니다.

nuxt.config.js 파일에 추가하는 것을 잊지 마십시오.

 /* ** Plugins to load before mounting the App */ plugins: [{ src: '~/plugins/vuex-persist', mode: 'client' }],

여기에서 플러그인에 파일 경로를 추가하고 Nuxt에 이 애플리케이션의 client 측에서만 이 플러그인을 실행하도록 지시했습니다.

이제 디렉토리 정보를 수락하고 저장하도록 스토어를 설정할 수 있습니다. 다음과 같이 디렉토리 정보를 처리하도록 상점을 업데이트하십시오.

 export const state = () => ({ directory: '' }) export const getters = { } export const mutations = { saveInfo(state, payload) { state.directory = payload.directory } } export const actions = { }

우리가 한 일은 저장소에 directory 상태를 추가하고 곧 전달할 데이터를 예상하여 저장소에 추가한 directory 상태 값을 수정하는 변형 함수 saveInfo 를 추가하는 것입니다.

다음으로 about.vue 파일에서 다음과 같이 업데이트합니다.

 <template> <section class="home"> <h1 class="home__heading">About Nuxtjs Directory Structure</h1> <div class="directories"> <div class="directory__container" v-for="directory in directories" :key="directory.id" @click.prevent="storeDirectoryInfo(directory)" > <p class="directory__name"> <nuxt-link :to="{ name: 'id', params: { id: directory.id, dir: directory } }" >{{ directory.name }}</nuxt-link> </p> </div> </div> </section> </template> <script> export default { name: "about-nuxt", data() { return { directories: [ //remains the same ] }; }, methods: { storeDirectoryInfo(dir) { this.$store.commit("saveInfo", { directory: dir }); } } }; </script> <style> </style>

이제 디렉토리 정보를 storeDirectoryInfo 에 대한 인수로 전달하는 모든 디렉토리 컨테이너에 클릭 이벤트를 추가했습니다. 이 함수에서 디렉터리 개체를 저장소에 커밋합니다.

마지막으로 _id.vue 파일로 돌아가 디렉토리 변수를 다음과 같이 저장소의 데이터로 바꿉니다.

 <template> <section class="directory" v-if="directory"> <h1 class="directory__name">{{ directory.name }}</h1> <p class="directory__info">{{ directory.info }}</p> </section> </template> <script> import { mapState } from "vuex"; export default { name: "directory-info", computed: { ...mapState(["directory"]) } }; </script> <style></style>

여기에서 먼저 mapState 에서 mapState를 가져와서 매장에서 직접 디렉토리 객체를 사용하도록 코드를 리팩토링합니다.

 import { mapState } from 'vuex';

스토어의 데이터에 액세스하기 전에 먼저 this.$route.params.dir 이 undefined 는지 확인하는 대신 스토어에 있는 데이터를 읽어 스토어를 사용하기로 결정합니다.

 <script> import { mapState } from "vuex"; export default { name: "directory-info", computed: { ...mapState(["directory"]) } }; </script>

그런 다음 directory 가 정의되지 않은 동안 렌더링되지 않도록 템플릿을 업데이트합니다.

 <template> <section class="directory" v-if="directory"> <h1 class="directory__name">{{ directory.name }}</h1> <p class="directory__info">{{ directory.info }}</p> </section> </template>

이렇게 하면 앱을 몇 번이나 새로 고침하더라도 디렉토리 객체는 스토어에서 안전하며 …mapState(['stateVariable']) 메서드를 사용하여 쉽게 액세스할 수 있습니다.

Heroku에 배포

이제 nuxt-tutorial-app 앱이 완성되었으므로 다음 단계는 무엇입니까? 우리의 빛나는 새 앱을 프로덕션에 배포합니다.

우리는 쉬운 배포를 위해 Github를 사용하여 Heroku에 Nuxt.js 앱을 배포할 것이므로 앱에 대한 저장소를 설정하지 않았다면 지금이 설정해야 할 때입니다. 다음은 Heroku를 열고 새 앱을 만들고 이름을 선택하고 GitHub 및 위에서 만든 저장소에 연결하는 것입니다. 다음으로 설정으로 이동하면 다음과 같은 항목이 표시됩니다.

이제 다음 구성 변수를 추가합니다.

 NPM_CONFIG_PRODUCTION=false HOST=0.0.0.0 NODE_ENV=production

다음으로 해야 할 일은 앱의 루트 폴더( nuxt.config.js Procfile 만들고 다음 명령을 입력하는 것입니다.

 web: nuxt start

이것은 nuxt start 명령을 실행하고 Heroku에게 외부 HTTP 트래픽을 보내도록 지시합니다.

Procfile 을 앱에 추가한 후 변경 사항을 커밋하고 리포지토리에 푸시합니다. 앱에 대해 자동 배포가 활성화된 경우 앱이 라이브 상태이고 해당 URL에서 액세스할 수 있어야 합니다. 앱을 라이브로 볼 수 있다면 축하합니다! 첫 번째 Nuxt.js 애플리케이션을 성공적으로 빌드하고 배포했습니다.

결론

기본 Nuxt 애플리케이션을 만들고 Heroku에 배포하는 방법을 알았으니 다음 단계는 무엇입니까? 다음은 Nuxt에서 Axios를 사용하고 앱에서 인증을 구현하는 것과 같은 작업을 다루는 몇 가지 리소스입니다.

axios 모듈을 사용합니다.
Nuxt에서 인증 구현
Nuxt.js 공식 문서.
nuxt-tutorial-app Github 리포지토리.