Nuxt 시작

Nuxt 시작
제 goto stack Nuxt입니다.js는 vue를 둘러싼 서버 쪽 렌더링 프레임워크입니다.그것은 다음 프로그램에서 방송된다.React 세계에서 온 js.최종적으로, 당신은 성능이 탁월한 사이트를 가질 것이다.
우리 시작합시다!npx create-nuxt-app <project-name>(javascript/또는ts),(npm/사선),(순풍),스페이스바를 선택하여 3개(axios,content,pwa)를 선택하고 당신이 좋아하는 벨벳을 선택하세요.나는 더 예쁜 에스린을 좋아한다.테스트는 본문의 범위를 넘어설 것입니다. 그러나 제스트를 시도해 보십시오. 검사할 수 있는 예시 테스트를 추가할 것입니다.

선택:렌더링 모드:일반(SSR/SSG)

서버(Node.js 호스팅).

정적(정적/JAMstack 호스트)

개발 도구: jsconfig.json

버전 관리 시스템: Git

cd <project-name>, npm run generate 상자에서 무엇을 얻었는지 봅시다.
이것은 dist 폴더에 정적 html을 모두 만들 것입니다. netlify에서 프로그램을 만들고 이 폴더를 드래그한 다음 크롬 devTools를 열고 라이트하우스를 실행해서 성능을 검사할 수 있습니다.우리는 왜 이렇게 해야 합니까?나는 보통 새로운 프레임워크를 사용해서 기선을 설정할 때 이렇게 한다. 이것은 아마도 네가 얻을 수 있는 가장 좋은 점수일 것이다.그것은 90년대 중반부터 중반까지 상당히 괜찮을 것이다.
알겠습니다. 현재 우리는 npm run dev을 사용하여 개발을 진행할 수 있습니다. 따라서 url을 탐색하면localhost:3000을 표시할 수 있습니다. 당신은 pages/index.vue을 볼 수 있습니다. 이것은 layouts/default.vue에 포장되어 있습니다. 이것은 components/Logo.vue을 포함하고, 또한 Nuxt가 자동으로 가져오지만 전통적인 Vue에서 가져와야 합니다.js.
다른 폴더들은 static/입니다. 이것은 웹 패키지에 닿지 않으려는 자원일 뿐입니다. /dist으로 원래대로 복사하고 싶을 뿐입니다.그 다음은 assets/으로 웹 패키지에 촉발되었다. 이것은 일부 물건을 최적화시켰다는 것을 의미한다. 이것은 해시를 추가하여 버전 설정을 하는 등이다.우리가 내용 모듈에 들어가는 것을 선택한 후 content/ 폴더가 하나 있다.나중에 자세히 설명할게요.middleware/은 또 다른 날이 될 것이다.store은 vue와 유사한 Redux 상태 관리 라이브러리입니다.plugins도 다음 게시물에 적용됩니다.
이제 설정 중의 신기한 점을 살펴봅시다.nuxt.config.js 열기
여기서, 우리는 내가 앞에서 언급한 구성 요소가 어떻게 자동으로 가져오는지 보았다

    // Auto import components (https://go.nuxtjs.dev/config-components)
      components: true,

여기서 우리는 우리의 모듈을 보았고, 우리는 더 많은 모듈을 추가할 수 있었다

      modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
        // https://go.nuxtjs.dev/pwa
        '@nuxtjs/pwa',
        // https://go.nuxtjs.dev/content
        '@nuxt/content',
      ],

pwa module과 512x512 아이콘을 static에 포함하기만 하면 당신은 이미 기능이 완비된 Progressive Web App을 획득할 수 있습니다.이것은 정말 특별하다.나는 내가 WorkBox과 유사한 도구로 이 일을 할 때 겪은 번거로움을 너에게 말할 수 없다.물론, 모든 설정을 내용에 덮어쓸 수 있습니다.
새로운 최고급 페이지를 만드는 것은 pages/에서 새 파일을 만드는 것처럼 간단합니다. tailwind에서 달콤한 템플릿을 복사해서 붙여넣습니다.

    <template>
      <div class="flex flex-wrap md items-center h-screen">
        <div class="bg-white w-full md:w-1/2 h-screen">
          <div class="mx-32">
            <h1 class="text-6xl font-bold mt-16">Tokyo</h1>
            <!-- country region island -->
            <div class="flex mt-16 font-light text-gray-500">
              <div class="pr-4">
                <span class="uppercase">Country</span>
                <p class="text-2xl text-gray-900 font-semibold pt-2">Japan</p>
              </div>
              <div class="pr-4">
                <span class="uppercase">Region</span>
                <p class="text-2xl text-gray-900 font-semibold pt-2">Kanto</p>
              </div>
              <div class="pr-4">
                <span class="uppercase">island</span>
                <p class="text-2xl text-gray-900 font-semibold pt-2">Honshu</p>
              </div>
            </div>
            <!-- description -->
            <div
              class="description w-full sm: md:w-2/3 mt-16 text-gray-500 text-sm"
            >
              Tokyo, Japan’s busy capital, mixes the ultramodern and the
              traditional, from neon-lit skyscrapers to historic temples. The
              opulent Meiji Shinto Shrine is known for its towering gate and
              surrounding woods. The Imperial Palace sits amid large public gardens
            </div>
            <button class="uppercase mt-5 text-sm font-semibold hover:underline">
              read more
            </button>
          </div>
        </div>
        <div class="bg-red-600 w-full md:w-1/2 h-screen">
          <img
            src="https://source.unsplash.com/7H77FWkK_x4/1600x900"
            class="h-screen w-full"
            alt=""
          />
        </div>
      </div>
    </template>

너무 좋아요. tailwind를 읽어 드릴게요. 하지만 기본적으로 많은 소형 실용 프로그램 종류가 강력한 레이아웃과 디자인의 구축 블록을 구성합니다.tailwind의 장점 중 하나는 구축 단계에서nuxt(webpack)는 사용하지 않은 css 규칙을 확인하고 삭제할 수 있다는 것이다.so <nuxt-link to="/about">about</nuxt-link>처럼 홈페이지에 대한 링크를 만들 수 있습니다
아마도 당신의 페이지에 터치스크린을 추가하고 싶을 것입니다. 특히 nuxt의 구글 글꼴 모듈을 추가하는 방법을 보여 드리겠습니다.npm i @nuxtjs/google-fontsnuxt.config.js을 열고 modules에 추가

    '@nuxtjs/google-fonts',

지금 보니까 그래요.

     modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
        // https://go.nuxtjs.dev/pwa
        '@nuxtjs/pwa',
        // https://go.nuxtjs.dev/content
        '@nuxt/content',
        '@nuxtjs/google-fonts',
      ],

현재 "build:{}"아래에 "Google Fonts"속성을 추가합니다. 아래와 같습니다.

    build:{}
    googleFonts: {
        families: {
          Hind: true
        }
      },

google fonts에서 원하는 글꼴을 선택할 수 있습니다. 저는 지금 Hind를 선택했습니다.이것은 맞춤형 모듈의 모드입니다. pwa에 대해 pwa: {}, 내용 a 내용에 대해: {}
색인이나 레이아웃에서 글꼴을 사용하기 위해 이 규칙을 붙여넣고 css처럼 겹치도록 합니다.

    * {
      font-family: 'Hind', sans-serif;
    }

그래, 우리 사이트는 지금 진전을 거두고 있는데, 왜 가격 인하를 동력으로 하는 블로그를 통과하지 않느냐?hello.md이라는 첫 번째 게시물을 posts의 content/이라는 폴더로 이동합니다. 이제 우리 블로그에 사용할 템플릿이 필요합니다. pages/에 blog/이라는 폴더와 _slug.vue이라는 동적 템플릿을 만듭니다. 다음 코드를 복사하여 붙여넣습니다.

    <template>
      <article>
        <nuxt-content :document="article" />
      </article>
    </template>
    <script>
    export default {
      async asyncData({ $content, params }) {
        const article = await $content('articles', params.slug).fetch()
        return { article }
      },
    }
    </script>

Boom 내비게이션 yoursite/blog/hello 당신은 지금 블로그를 가지고 있습니다. 이 excellent post이 저를 위해 만든 블로그를 더 자세히 읽는 것이 아니라!
나는 여기까지 왔다. 나는 이것이 나로 하여금 생각하게 하기에 충분하다고 생각한다. 만약 무슨 문제나 의견이 있으면 나에게 말해라.만약 흥미가 있다면, 나는 후속 댓글을 하나 만들 것이다.건배!