누크스.js Cheat Sheat

이 문서에서는 일부 Nuxt essential과 애플리케이션에서 이를 사용하는 방법에 대해 살펴보겠습니다.Nuxt js에 들어가기 전에 Vuejs의 기본 지식을 이해하는 것이 가장 좋다.Nuxt Js 메모표를 시작하기 전에 Nuxt에 대해 알아보겠습니다.
Nuxt.js는 Vue 기반의 무료 소스 오픈 웹 응용 프로그램 프레임워크입니다.js, 노드.js, Webpack 및 Babel.js.이 프레임워크는'통용 응용의 원 프레임워크'로 선전되었다
Nuxt 의 몇 가지 주요 사항을 살펴보겠습니다.

Nuxt Js 설치
의 Nuxt toolkit을 사용하여 처음부터 새 Nuxt 항목을 설정할 수 있습니다.

Nuxt 키트를 사용하여 설정:

    npx create-nuxt-app <name of project>
    cd <name of project>
    npm install #installs the project default dependencies
    npm run dev # serves the application on a local port

처음부터 설정:

        Create a `package.json` file and add this code:
    {
    "name": "stater app",
    "scripts": {
      "dev": "nuxt"
    }
    }

이 작업을 완료한 후, 실행 npm install --save nuxt 은 Nuxt 의존항을 저장하고, 실행 npm run dev 은 응용 프로그램에 서비스를 제공합니다.

Nuxt 디렉토리 구조

Assets: 이 폴더는sass와less

와 같은 컴파일되지 않은 자산과 파일을 포함합니다.

Static: 이 디렉터리는 그림과 텍스트 파일과 같은 변경되지 않은 파일을 포함합니다

Components: 이것은 우리가 다시 사용할 수 있는 모든 구성 요소를 저장하는 곳입니다.

layout: Nuxt는 응용 프로그램

에 여러 개의 레이아웃을 만들 수 있습니다.

Middlewares: 이것은 우리가 함수를 작성한 곳입니다. 이 함수들은 페이지를 불러오기 전에 실행됩니다

Pages: Nuxt는 이 디렉토리를 라우팅에 사용합니다.

Plugins: 이것은 우리가 모든 Js 플러그인을 설정한 곳입니다. 예를 들어 sweetalert, Carousel

Store: 상태 관리를 위해 모든 Vuex 파일이 여기에 저장됩니다.

Nuxt 구성 요소

루트: Vuejs에서 router-link 루트를 사용하는 것처럼 우리도nuxtjs 프로그램에서 nuxt-link 루트를 사용할 수 있습니다.동적 경로도 선택할 수 있습니다.

    <nuxt-link :to="'/cats' + cat.id">Get Cat By Id</nuxt-link>

Nuxt child: 네스트된 파이프라인의 서브어셈블리 파이프라인을 표시하는 데 사용합니다.

    <template>
      <div>
        <h1>I am the parent view</h1>
        <nuxt-child />
      </div>
    </template>;

오류 페이지:Nuxt는 더 좋은 형식으로 오류를 표시할 수 있는 사용자 정의 오류 페이지를 만드는 기능을 제공합니다.오류 코드와 오류 메시지에 따라 오류를 표시할 수 있습니다.이 페이지를 만들려면 페이지 디렉토리에 error.vue 페이지를 만들고 다음 코드를 저장합니다.

    <template>
     <h1 v-if="error.statusCode === 500">
     Something Went wrong
     </h1>
     <h1 v-else>An error occurred</h1>
     <nuxt-link to="/">Home page</nuxt-link>
    </template>
    <script>
    export default {
     props: ['error'],
     layout: 'error'
    }
    </script>

레이아웃: 다른 페이지에 대한 사용자 정의 레이아웃을 정의할 수 있습니다.간단한 vuejs 구성 요소를 만드는 것은 매우 간단합니다.

    <template>
      <div class="container">
        <nuxt />
      </div>
    </template>

Vuex 스토리지: 구성 요소에서 Vuex 스토리지를 사용하여 상태 관리를 할 수 있습니다.또한 Nuxt는 프로젝트 어셈블리에 Vuex를 자동으로 추가하므로 가져올 필요가 없습니다.다음과 같이 사용할 수 있습니다.

    <template>
     <button @click="$store.commit('increment')">
     {{ $store.state.counter }}
     </button>
    </template>

Nuxt 구성 파일
Nuxt는 구성 파일과 함께 제공됩니다.Nuxt 키트를 사용하여 새 Nuxt 프로젝트를 만들면 구성에 따라 미리 채워집니다.이것은 nuxt.config.js 파일의 예제 형식입니다.

    export default {
        css: [
            'bulma/css/bulma.css',
            '~/css/main.css'
        ],
        generate: {
            routes: function () {
                return [
                    '/users/1',
                    '/users/2',
                    '/users/3'
                ];
            }
        },
        loading: '~/components/loading.vue',
        head: {
            meta: [{
                    charset: 'utf-8'
                },
                {
                    name: 'viewport',
                    content: 'width=device-width, initial-scale=1'
                }
            ],
            link: [{
                rel: 'stylesheet',
                href: 'https://font.com',
            }]
        },
        plugins: ['~/plugins/vue-notifications']
    }

이 설정은 플러그인, html 헤더 요소, 스타일시트,javascript CDN 등 응용 프로그램 파일을 설정하는 데 도움을 줍니다.

Nuxt 배포 방법
누크스.js는 세 가지 모델 중 응용 프로그램을 배치할 수 있도록 합니다.

범용

정적 생성

SPA(1페이지 신청)

워터 클리닉
이 모드는 폴더 구조와 프로필을 설정하는 것이 아니라 약속을 사용해서 프로젝트를 구성합니다.이 모드를 사용하려면nuxt의 모드를 변경하십시오.구성 파일 - spa.

정지했어
이런 모드는 페이지를 HTML로 미리 보여 주고 비교적 높은 SEO와 페이지 불러오기 점수를 가진다.컨텐트는 빌드할 때 생성됩니다.

보편적이었어
이 모드는 클라이언트와 서버에서 JavaScript를 실행하는 것을 SSR(서버측 렌더링)이라고도 부른다.모든 노선에는 검색엔진 최적화와 페이지 마운트 점수가 매우 높다.클라이언트에게 보내기 전에 서버에서 보이는 경로를 동적으로 가져옵니다.

비망록
우리는 Vue Cheat Sheet에 관한 문장도 썼는데, 너는 여기서 볼 수 있다-https://www.wrappixel.com/vue-cheet-sheet/

Wrappixel의 Vue 템플릿
Wrappixel은 Angular, React, Boostrap 및 Vuejs의 고품질 관리 대시보드 템플릿을 제공합니다.최신 버전vue admin dashboard templates을 보고 프로젝트에서 사용하면 시간과 돈을 절약할 수 있습니다.