Clever Geek Handbook

UIキットからデプロイまでのNuxt.jsアプリ

こんにちは、Habr！



Nuxt.jsフレームワークを使用して誰でも最初から独自のアプリケーションを作成できるように、この詳細なステップバイステップのチュートリアルを作成しました。



この記事では、Nuxt.jsアプリケーションの作成の基本である基本について説明します。



  • プロジェクトの作成と構成、
  • アセットと静的：スタイル、フォント、画像、投稿、
  • コンポーネントの作成、
  • ページとレイアウトの作成、
  • アプリケーションの展開（展開）。


何が起こったのか見てください！



Nuxt.jsについて少し



Nuxtは高レベルのVueフレームワークです。Nuxt.jsを使用すると、サーバーとクライアントコードの配布の詳細を抽象化することで、箱から出して同形のWebアプリケーションを開発できます。このアプローチのおかげで、時間を節約し、開発に集中することができます。



Nuxtの主な利点：



  • SPA、SSR、およびプリレンダーはすでに構成されています。私たちに必要なのは、示すことだけです。このアプリケーションでは、製品モードにプリレンダーを使用します。つまり、サイトのすべてのページを事前に生成し、それらをホスティングにデプロイして統計を配布します。
  • すべての検索エンジンに最適なSEOは、SSRまたはプリレンダラーを使用した結果です。
  • . js chunks, css styles API ( webpack 4, Nuxt).
  • Google Lighthouse / Page Speed. 100/100 .
  • CSS Modules, Babel, Postscc create-nuxt-app.
  • .
  • 50 Vue.js.


Nuxtの利点については非常に長い間話すことができます。これは、その使いやすさと、柔軟で簡単にスケーラブルなアプリケーションを作成する機能で私が本当に気に入っているフレームワークです。それで、私は実際にすべての利点を始めて見ることを提案します。 公式サイトの

Nuxt.jsに関する詳細情報 。詳細なガイドもここにあり ます。



設計



よく考えられた既製のデザイン、またはさらに優れたUIキットは、あらゆるアプリケーションの開発を大幅にスピードアップし、簡素化します。近くに無料のUIデザイナーがいない場合は、問題ありません。指示の一部として、私たちはそれを自分で処理することができます！



特にこの記事では、Nuxtの機能を十分に発揮できる、シンプルな機能を備えたモダンでミニマリストなスタイルのブログデザインを用意しました。



開発には、Figmaオンラインサービスを利用しました。デザインとUIキットはこちらから入手でき ます。このテンプレートをコピーして、プロジェクトで使用できます。



プロジェクトの作成



プロジェクトを作成するには、Nuxt開発者のNuxt create-nuxt-appユーティリティを使用します。これにより、CLI を使用してアプリケーションテンプレートを構成できます。



名前を指定してプロジェクトを初期化します。 



npx create-nuxt-app nuxt-blog


さらに、いくつかの段階で、ユーティリティは優先ライブラリとパッケージのセットを選択するように提供し、その後、プロジェクト用にそれらを個別にダウンロード、構成、および構成します。



選択したオプションの完全なリストはGithubで確認できます 。



このプロジェクトでは、Typescriptを使用した構成が使用されます。



：活字体でVueの中で開発する場合、あなたは、2つのAPIを使用することができます オプションAPIや クラスのAPIを。



これらは機能的には異なりませんが、構文は異なります。個人的には、Options API構文が私に近いので、プロジェクトで使用します。



プロジェクトを作成したら、コマンドnpm rundevを使用してアプリケーションを実行できます。 localhost：3000で利用できるようになります。



Nuxtは、HMRがインストールされてローカルサーバーとして構成されたwebpack-dev-serverを使用 します 。これにより、開発が迅速かつ快適になります。 アプリケーションのデモバージョンを作成しているので、テストは作成しません。ただし、商用開発で​​はアプリケーションテストを怠らないことを強くお勧めします。 これまでこのトピックに触れたことがない場合は、Jestに注意を払うことをお勧めします。これ は非常にシンプルですが、同時にNuxtとの連携をサポートする強力なツールです。







vue-test-utils。



プロジェクト構造



Nuxtはデフォルトで、開発のクイックスタートに適したディレクトリとファイル構造を作成します。 私たちのプロジェクトでは、このような構造は完全に適合しているため、変更しません。 Nuxt Webサイトで、さまざまなディレクトリの目的について詳しく読むことができます 。



-- Assets

-- Static

-- Pages

-- Middleware

-- Components

-- Layouts

-- Plugins

-- Store

-- nuxt.config.js

-- ...other files













アプリケーションの作成



コードを書く前に、次のことを行いましょう



。1.Nuxtによって生成されたスターターコンポーネントとページを削除します。

2.便宜上、開発中の時間を節約するために、pugとscssをインストールします。コマンドを実行してみましょう： 



npm i --save-dev pug pug-plain-loader node-sass sass-loader fibers


その後、テンプレートタグとスタイルタグのlang属性を使用できるようになります。 



<template lang="pug"></template>

<style lang="scss"></style>


3. :: v-deepディープセレクターのサポートをstylelint構成に追加します。これにより、スコープを無視して、子コンポーネントのスタイルを設定できます。このセレクターの詳細については、こちらをご覧ください。 



{
  rules: {  
    'at-rule-no-unknown': null,  
    'selector-pseudo-element-no-unknown': [  
      true,  
      {  
        ignorePseudoElements: ['v-deep'],  
      },  
    ],  
  },
}


すべての準備が終わりました。次の段階に進んでください。



投稿



投稿はcontent / postsディレクトリに保存され、プロジェクトルートに一連のマークダウンファイルとして作成されます。



すぐに作業を開始できるように、5つの小さなファイルを作成しましょう。簡単にするために、1.md、2.mdなどの名前を使用します。



コンテンツディレクトリにPosts.d.tsファイルを作成します。 このファイルでは、投稿に関するすべての必要な情報を含むオブジェクトのタイプを定義します。 



export type Post = {  
  id: number  
  title: string
  desc: string
  file: string
  img: string  
}


名前からすべてのフィールドの意味が明確になっているはずだと思います。



進む。同じディレクトリに、次の内容のposts.tsという別のファイルを作成します。 



import { Post } from './Post'  

export default [  
  {
    id: 1,  
    title: 'Post 1',  
    desc:  
      'A short description of the post to keep the user interested.' +  
      ' Description can be of different lengths, blocks are aligned' +  
      ' to the height of the block with the longest description',  
    file: 'content/posts/1.md',
    img: 'assets/images/1.svg',
  },  

  ...

  {  
    id: 5,  
    title: 'Post 5',  
    desc:  
      'A short description of the post to keep the user interested.' +  
      ' Description can be of different lengths, blocks are aligned' +  
      ' to the height of the block with the longest description',  
    file: 'content/posts/5.md',
    img: 'assets/images/5.svg',
  },  
] as Post[]


imgプロパティでは、assets / imagesディレクトリ内の画像を参照していますが、このディレクトリはまだ作成されていません。今すぐ作成しましょう。



次に、作成したディレクトリに.svg形式の画像を上記で指定した名前で追加しましょう。 unDraw



から5枚の画像を 撮ります。この優れたリソースは常に更新されており、多くの無料のsvg画像が含まれています。



すべての準備が整ったので、コンテンツディレクトリは次のように なります。imagesサブディレクトリは、次のコンテンツとともにアセットディレクトリに表示されます。



content/

-- posts.ts

-- Posts.d.ts

-- posts/

---- 1.md

---- 2.md

---- 3.md

---- 4.md

---- 5.md











assets/

-- images/

---- 1.svg

---- 2.svg

---- 3.svg

---- 4.svg

---- 5.svg

...







ファイルを動的に取得する



投稿のテキストを含む画像とファイルを動的に受信するため、グローバルミックスインを実装する必要があります。これは、すべてのコンポーネントでさらに使用できます。



これを行うには、pluginsディレクトリにmixinsサブディレクトリを作成し、その中に次の内容のgetDynamicFile.tsファイルを作成します。 



import Vue from 'vue'  
  
export const methods = {  
  getDynamicFile(name: string) {  
    return require(`@/${name}`)
 },  
}  
  
Vue.mixin({  
  methods,  
})


残っているのは、nuxt.config.jsファイルでこのミックスインを有効にすることだけです。 



{
  plugins: [  
    '~plugins/mixins/getDynamicFile.ts',  
  ],
}


フォント



投稿作成の段階が終わったら、フォントを接続します。これを行う最も簡単な方法は素晴らしいですWebfontloaderのライブラリ あなたがから任意のフォントを取得することを可能にする、 Googleのフォント。ただし、商用開発で​​はカスタムフォントがよく使われるので、ここでその場合を見てみましょう。



ルービックは、Open FontLicenseの下で配布されているアプリケーションのフォントとして選択されました 。同じGoogleFontsからすべてダウンロードできます 。



ダウンロードしたアーカイブでは、フォントはotf形式になりますが、Webを使用しているため、woffおよびwoff2形式が最適です。他の形式よりも小さいですが、で完全に サポートされています。最新のすべてのブラウザ。 otfを必要な形式に変換するには、多くの無料オンラインサービスの1つを使用できます。



これで、必要な形式のフォントができました。プロジェクトにフォントを含めるときが来ました。これを行うには、静的ディレクトリにfontsサブディレクトリを作成し、そこにフォントを追加します。同じディレクトリにfonts.cssファイルを作成しましょう。このファイルは、アプリケーション内のフォントを次のコンテンツに接続する役割を果たします。 



@font-face {  
  font-family: "Rubik-Regular";  
  font-weight: normal;  
  font-style: normal;  
  font-display: swap;  
  src:  
	  local("Rubik"),  
	  local("Rubik-Regular"),  
	  local("Rubik Regular"),  
	  url("/fonts/Rubik-Regular.woff2") format("woff2"),  
	  url("/fonts/Rubik-Regular.woff") format("woff");  
}  
  
...


ファイルの全内容はリポジトリで見ることができ ます。



注目に値する2つのことがあり



ます：1。font-display：swap;を指定し、font-faceを介して接続されたフォントがロードされて使用できるかどうかに応じてどのように表示されるかを定義します。

この場合、ブロッキング期間を設定せず、無限置換期間を設定します。つまり、フォントの読み込みはバックグラウンドで行われ、ページの読み込みがブロックされることはなく、準備ができたらフォントが表示されます。



2. srcでは、優先度で起動順序を指定します。まず、フォント名の可能なバリエーションをチェックすることにより、目的のフォントがユーザーのデバイスにインストールされているかどうかをチェックします。見つからない場合は、ブラウザが最新のwoff2形式をサポートしているかどうかを確認し、サポートしていない場合は、次のwoff形式に進みます。ユーザーが古いブラウザ（IE <9など）を使用している可能性があります。この場合、以下では、ブラウザに組み込まれているフォントをフォールバックとして示します。



フォント読み込みルールを使用してファイルを作成したら、アプリケーションでファイルを接続する必要があります-ヘッドセクションのnuxt.config.jsファイルで： 



{
  head: {  
    link: [  
      {  
        as: 'style',  
        rel: 'stylesheet preload prefetch',  
        href: '/fonts/fonts.css',  
      },  
    ],  
  },
}


ここでは、以前と同様に、プリロードプロパティとプリフェッチプロパティを使用しているため、これらのファイルをダウンロードするためにブラウザで高い優先度を設定し、ページのレンダリングをブロックしないことに注意してください。



アプリケーションの静的ファビコンディレクトリにすぐに追加しましょう。これは、無料のオンラインサービスを使用して生成できます。



静的ディレクトリは次のよう になります。次の手順に進みます。



static/

-- fonts/

---- fonts.css

---- Rubik-Bold.woff2

---- Rubik-Bold.woff

---- Rubik-Medium.woff2

---- Rubik-Medium.woff

---- Rubik-Regular.woff2

---- Rubik-Regular.woff

-- favicon.ico











再利用可能なスタイル



私たちのプロジェクトでは、使用されるすべてのスタイルが単一のルールセットで記述されているため、開発がはるかに簡単になります。そこで、これらのスタイルをFigmaからプロジェクトファイルに転送しましょう。

アセットディレクトリに、stylesサブディレクトリを作成します。このサブディレクトリには、再利用されたすべてのスタイルがプロジェクトに保存されます。次に、stylesディレクトリには、すべてのscss変数を含むvariables.scssファイルが含まれます。



ファイルの内容はリポジトリで確認でき ます。



次に、これらの変数をプロジェクトに接続して、任意のコンポーネントで使用できるようにする必要があります。 Nuxtは、この目的のために@ nuxtjs / style-resourcesモジュールを使用します 。



このモジュールをインストールしましょう： 



npm i @nuxtjs/style-resources


そして、次の行をnuxt.config.jsに追加します。 



{
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {  
    scss: ['./assets/styles/variables.scss'],  
  },
}


いいね！このファイルの変数は、どのコンポーネントでも使用できます。



次のステップは、アプリケーション全体で使用されるいくつかのヘルパークラスとグローバルスタイルを作成することです。このアプローチにより、一般的なスタイルを一元管理し、設計者がレイアウトの外観を変更した場合にアプリケーションをすばやく適応させることができます。



次のファイルを使用して、assets / stylesディレクトリにグローバルサブディレクトリを作成しましょう



。1。typography.scss-ファイルには、リンクを含むテキストのすべてのヘルパークラスが含まれます。

これらのヘルパークラスは、ユーザーのデバイス（スマートフォンまたはPC）の解像度に応じてスタイルが変わることに注意してください。



2.transitions.scss-ファイルには、ページ間の遷移と、将来必要になった場合のコンポーネント内のアニメーションの両方のグローバルアニメーションスタイルが含まれます。



3. other.scss-ファイルには、まだ別のグループに選択されていないグローバルスタイルが含まれます。



.pageクラスは、ページ上のすべてのコンポーネントの共通コンテナとして使用され、ページ上に正しいパディングを形成します。



.sectionクラスは、論理ボックスの境界をマークするために使用され、.contentクラスは、コンテンツの幅を制限してページの中央に配置するために使用されます。



後でコンポーネントとページの実装を開始するときに、これらのクラスがどのように使用されるかの例を示します。



4.index.scss-すべてのグローバルスタイルの単一のエクスポートポイントとして使用される一般的なファイル。



ファイルの全内容はGithubで見ることができます 。



この段階で、これらのグローバルスタイルを含めて、アプリケーション全体で使用できるようにします。このタスクのために、Nuxtはnuxt.config.jsファイルにcssセクションを提供します。 



{
  css: ['~assets/styles/global'],
}


将来、css-classesを割り当てるときに、次のロジックが使用されることは言うまでもありません



。1。タグにヘルパークラスとローカルクラスの両方がある場合、ローカルクラスがタグに直接追加されます（例：p）。 .some-local-class、およびヘルパークラスは、classプロパティで指定されます（例：class = "body3medium"）。



2.タグにヘルパークラスのみ、またはローカルクラスのみがある場合、それらはタグに直接追加されます。



この手法は、グローバルクラスとローカルクラスを視覚的にすぐに区別するために、便宜上使用しています。



開発の前に、reset.cssをインストールして有効にし、すべてのブラウザーでレイアウトが同じになるようにします。これを行うには、必要なパッケージをインストールします。 



npm i reset-css


そして、それをすでにおなじみのcssセクションのnuxt.config.jsファイルに含めます。これは次のようになります。 



{
  css: [
    '~assets/styles/global',
    'reset-css/reset.css',
  ],
}


起こりました？もしそうなら、私たちは次のステップに進む準備ができています！



レイアウト



Nuxtでは、レイアウトはページのラッパーであり、ページ間で共通のコンポーネントを再利用し、必要な共通のロジックを実装できます。私たちのアプリケーションは非常に単純なので、デフォルトのレイアウトであるdefault.vueを使用するだけで十分です。



また、Nuxtは、実際には単純なページである404のようなエラーページに別のレイアウトを使用します。 リポジトリ内の



レイアウト 。 default.vue default.vueにはロジックがなく、次のようになります。 











<template lang="pug">  
div  
  nuxt
  db-footer
</template>


ここでは、2つのコンポーネントを使用し



ます。1。nuxt-アセンブリ中に、ユーザーが要求した特定のページに置き換えられます。



2.db-footerは、アプリケーションのすべてのページに自動的に追加される独自のFooterコンポーネントです（後で説明します）。



error.vue



デフォルトでは、httpステータスでサーバーから返されたエラーの場合、Nuxtはlayout / error.vueにリダイレクトし、errorと呼ばれる入力パラメーターを介して受信したエラーの説明を含むオブジェクトを渡します。



スクリプトセクションがどのように見えるかを見てみましょう。これは、受信したエラーで作業を統合するのに役立ちます。 



<script lang="ts">  
import Vue from 'vue'  
  
type Error = {  
  statusCode: number  
  message: string  
}  
  
type ErrorText = {  
  title: string  
  subtitle: string  
}  
  
type ErrorTexts = {  
  [key: number]: ErrorText  
  default: ErrorText  
}  

export default Vue.extend({  
  name: 'ErrorPage',  
  
  props: {  
    error: {  
      type: Object as () => Error,  
      required: true,  
    },  
  },  
  
  data: () => ({  
    texts: {  
      404: {  
        title: '404. Page not found',  
        subtitle: 'Something went wrong, no such address exists',  
      },  
      default: {  
        title: 'Unknown error',  
        subtitle: 'Something went wrong, but we`ll try to figure out what`s wrong',  
      },  
    } as ErrorTexts,  
  }),  

  computed: {  
    errorText(): ErrorText {  
      const { statusCode } = this.error  
      return this.texts[statusCode] || this.texts.default  
    },  
  },  
})  
</script>


ここで何が起こるか：



1。最初に、このファイルで使用されるタイプを定義します。



2.データオブジェクトに、一意のメッセージと他のすべてのデフォルトメッセージを表示するすべてのエラーのメッセージを含む辞書を作成します。



3.計算されたプロパティerrorTextで、受信したエラーがディクショナリにあるかどうかを確認します。エラーが発生した場合は、メッセージを返します。エラーがない場合は、デフォルトのメッセージを返します。



この場合、テンプレートは次のようになります。 



<template lang="pug">  
section.section  
  .content  
    .ep__container  
      section-header(  
        :title="errorText.title"  
        :subtitle="errorText.subtitle"  
      )  

      nuxt-link.ep__link(  
        class="primary"  
        to="/"  
      ) Home page  
</template>


ここでは、assets / styles / global /other.scssファイルで以前に作成した.sectionおよび.contentグローバルユーティリティクラスを使用していることに注意してください。これにより、コンテンツをページの中央に表示できます。



これは、まだ作成されていないセクションヘッダーコンポーネントを使用しますが、将来的には、ヘッダーを表示するためのユニバーサルコンポーネントになる予定です。コンポーネントについて話すときに実装します。



レイアウトディレクトリは次のように なります。コンポーネントの作成を始めましょう。



layouts/

-- default.vue

-- error.vue











コンポーネント



コンポーネントは、アプリケーションの構成要素です。上ですでに見たコンポーネントから始めましょう。



記事を膨らませないために、コンポーネントのスタイルについては説明しません。それらは、このアプリケーションの リポジトリにあります。



SectionHeader

アプリケーションの見出しは同じスタイルで作成されているため、1つのコンポーネントを使用して見出しを表示し、入力パラメーターを使用して表示データを変更するのが論理的です。



このコンポーネントのスクリプトセクションを見てみましょう。 



<script lang="ts">  
import Vue from 'vue'  

export default Vue.extend({  
  name: 'SectionHeader',  

  props: {  
    title: {  
      type: String,  
      required: true,  
    },  
    subtitle: {  
      type: String,  
      default: '',  
    },  
  },  
})  
</script>


次に、テンプレートがどのように表示されるかを見てみましょう。 



<template lang="pug">  
section.section  
  .content  
    h1.sh__title(  
      class="h1"  
    ) {{ title }}  

    p.sh__subtitle(  
      v-if="subtitle"  
      class="body2 regular"  
    ) {{ subtitle }}  
</template>


ご覧のとおり、このコンポーネントは表示されたデータの単純なラッパーであり、ロジックは含まれていません。



LinkToHome



アプリケーションで最も単純なコンポーネントは、選択した投稿ページからホームページにつながるタイトルの上のリンクです。



このコンポーネントは非常に小さいので、すべてのコードを一度に（スタイルなしで）提供します。 



<template lang="pug">  
section.section  
  .content  
    nuxt-link.lth__link(  
      to="/"  
      class="primary"  
    )  
      img.lth__link-icon(  
        src="~/assets/icons/home.svg"  
        alt="icon-home"  
      )  
      | Home  
</template>  
  
<script lang="ts">  
import Vue from 'vue'  

export default Vue.extend({  
  name: 'LinkToHome',  
})  
</script>


アセット/アイコンディレクトリからhome.svgアイコンをリクエストしていることに注意してください。まず、このディレクトリを作成し、そこに目的のアイコンを追加する必要があります。



DbFooterDbFooter



コンポーネントは非常にシンプルです。著作権と手紙を作成するためのリンクが含まれています。

要件は明確です。スクリプトセクションから実装を始めましょう。 



<script lang="ts">  
import Vue from 'vue'  

export default Vue.extend({  
  name: 'DbFooter',  

  computed: {  
    copyright(): string {
      const year = new Date().getUTCFullYear()
      return ` ${year} · All rights reserved`
    },  
  },  
})  
</script>


DbFooterには、指定された文字列と連結された、現在の年を返す計算プロパティが1つだけあります。それでは、テンプレートを見てみましょう。 



<template lang="pug">  
section.section  
  .content  
    .footer  
      a.secondary(
        href="mailto:example@mail.com?subject=Nuxt blog"
      ) Contact us  
      p.footer__copyright(
        class="body3 regular"
      ) {{ copyright }}  
</template>


[お問い合わせ]リンクをクリックすると、ネイティブメールクライアントが開き、すぐにメッセージの件名が設定されます。このソリューションは、アプリケーションのデモに適していますが、実際には、サイトから直接メッセージを送信するフィードバックフォームを実装するのがより適切なソリューションです。



はがきはがき



はシンプルでわかりやすいです。 



<script lang="ts">  
import Vue from 'vue'  
import { Post } from '~/content/Post'  

export default Vue.extend({  
  name: 'PostCard',  

  props: {  
    post: {  
      type: Object as () => Post,  
      required: true,  
    },  
  },  

  computed: {  
    pageUrl(): string {  
      return `/post/${this.post.id}`  
    },  
  },  
})  
</script>


スクリプトセクションでは、1つの入力パラメーターpostを定義します。これには、postに関するすべての必要な情報が含まれます。



また、テンプレートで使用するために計算されたプロパティpageUrlを実装します。これにより、投稿を含む目的のページへのリンクが返されます。



テンプレートは次のようになります。 



<template lang="pug">  
nuxt-link.pc(:to="pageUrl")  
  img.pc__img(  
    :src="getDynamicFile(post.img)"  
    :alt="`post-image-${post.id}`"  
  )  

  p.pc__title(class="body1 medium") {{ post.title }}  
  p.pc__subtitle(class="body3 regular") {{ post.desc }}  
</template>


テンプレートのルート要素はnuxt-linkであることに注意してください。これは、ユーザーがマウスを使用して新しいウィンドウで投稿を開く機会を持つために行われます。



この記事の前半で作成したグローバルgetDynamicFileミックスインが使用されるのはこれが初めてです。



PostList



メインページのメインコンポーネントは、上部の投稿カウンターと投稿自体のリストで構成されます。



このコンポーネントのスクリプトセクション： 



<script lang="ts">  
import Vue from 'vue'  
import posts from '~/content/posts'  

export default Vue.extend({  
  name: 'PostList',  
  
  data: () => ({  
    posts,  
  }),  
})  
</script>


投稿付きの配列をインポートした後、テンプレートが将来このデータにアクセスできるように、それらをデータオブジェクトに追加することに注意してください。



テンプレート自体は次のようになります。 



<template lang="pug">  
section.section  
  .content  
    p.pl__count(class="body2 regular")  
      img.pl__count-icon(  
        src="~/assets/icons/list.svg"  
        alt="icon-list"  
      )  
      | Total {{ posts.length }} posts  

    .pl__items  
      post-card(  
        v-for="post in posts"  
        :key="post.id"  
        :post="post"  
      )  
</template>


すべてが正しく機能するために、list.svgアイコンをassets / iconsディレクトリに追加することを忘れないでください。



PostFull



PostFullは、投稿テキストの表示を担当する別の投稿ページの主要コンポーネントです。



このコンポーネントには、@ nuxtjs / markdownitモジュールが必要です。この モジュールは、mdをhtmlに変換する役割を果たします。



それをインストールしましょう： 



npm i @nuxtjs/markdownit


次に、@ nuxtjs / markdownitをnuxt.config.jsファイルのモジュールセクションに追加します。 



{
  modules:  [
    '@nuxtjs/markdownit',
  ],
}


いいね！コンポーネントの実装を始めましょう。いつものように、スクリプトセクションから： 



<script lang="ts">  
import Vue from 'vue'  
import { Post } from '~/content/Post'  
  
export default Vue.extend({  
  name: 'PostFull',  
  
  props: {  
    post: {  
      type: Object as () => Post,  
      required: true,  
    },  
  },  
})  
</script>


スクリプトセクションでは、1つの入力パラメーターpostを定義します。これには、postに関するすべての必要な情報が含まれます。



テンプレートに移動します。 



<template lang="pug">  
section.section  
  .content  
    img.pf__image(  
      :src="getDynamicFile(post.img)"  
      :alt="`post-image-${post.id}`"  
    )  

    .pf__md(v-html="getDynamicFile(post.file).default")  
</template>


ご覧のとおり、getDynamicFileミックスインを使用して、画像と.mdファイルの両方を動的に取得してレンダリングします。



@ nuxtjs / markdownitが残りの作業を行うため、ファイルのレンダリングに標準のv-html属性を使用していることに気付いたと思います。信じられないほどシンプル！



:: v-deepセレクターを使用して、レンダリングされた.mdファイルのスタイルのカスタマイズにアクセスできます。このコンポーネントがどのように実装されているかを確認するには、Githubをご覧ください 。



このコンポーネントでは、カスタマイズの原則を示すために段落にインデントを設定するだけですが、実際のアプリケーションでは、使用されているすべての必要なhtml要素のスタイルの完全なセットを作成する必要があります。



ページ



すべてのコンポーネントの準備ができたら、ページの作成を開始できます。



おそらくデザインからすでに理解しているように、私たちのアプリケーションは、すべての記事のリストを含むメインページと、選択した投稿を表示する動的ページで構成されます。



pagesディレクトリの構造： すべてのコンポーネントは自己完結型であり、それらの状態は入力パラメータによって決定されるため、ページは必要な順序で指定されたコンポーネントのリストのように見えます。 メインページは次のようになります。



pages/

-- index.vue

-- post/

---- _id.vue 













<template lang="pug">  
.page  
  section-header(  
    title="Nuxt blog"  
    subtitle="The best blog you can find on the global internet"  
  )  

  post-list  
</template>  
  
<script lang="ts">  
import Vue from 'vue'  

export default Vue.extend({  
  name: 'HomePage',  
})  
</script>


正しいパディングを設定するために、assets / styles / global /other.scssで以前に作成したグローバル.pageクラスを使用しました。



単一の投稿ページはもう少し複雑に見えます。最初にスクリプトセクションを見てみましょう。 



<script lang="ts">  
import Vue from 'vue'  
import { Post } from '~/content/Post'  
import posts from '~/content/posts'

export default Vue.extend({  
  validate({ params }) {  
    return /^\d+$/.test(params.id)  
  },  
  
  computed: {  
    currentId(): number {  
      return Number(this.$route.params.id)  
    },  
    currentPost(): Post | undefined {  
      return posts.find(({ id }) => id === this.currentId)  
    },  
  },  
})  
</script>


検証メソッドが表示されます。このメソッドはVueにはありません。Nuxtは、ルーターから受信したパラメーターを検証するためのメソッドを提供します。新しいルートに移動するたびに、Validateが呼び出されます。この場合、渡されたIDが番号であることを確認するだけです。検証が失敗した場合、ユーザーはerror.vueエラーページに戻ります。



ここに実装されている2つの計算されたプロパティがあります。それらの機能を詳しく



見てみましょう 。1。currentId-このプロパティは、以前に数値に変換した現在の投稿ID（ルーターパラメーターから取得）を返します。



2. currentPostは、すべての投稿の一般的な配列から選択された投稿に関する情報を含むオブジェクトを返します。



彼らはそれを理解したようです。テンプレートを見てみましょう： 



<template lang="pug">  
.page
  link-to-home  

  section-header(  
    :title="currentPost.title"  
  )  

  post-full(  
    :post="currentPost"  
  )
</template>


このページとメインページのスタイルセクションがありません。 Github

のページのコード 。



Hostmanにデプロイする



万歳！私たちのアプリケーションはほぼ準備ができています。それを展開し始める時が来ました。



このタスクでは、展開プロセスを自動化できるHostmanクラウドプラットフォーム を使用します。



Hostmanの静的サイトには無料プランが用意されているため、アプリケーションは静的サイトになります。



公開するには、プラットフォームインターフェイスの[作成]ボタンをクリックし、無料のプランを選択して、Githubリポジトリに接続し、デプロイに必要なオプションを指定する必要があります。



その直後に、公開が自動的に開始され、Let'sEncryptのssl証明書がインストールされた* .hostman.siteゾーンに無料のドメインが作成されます。



今後、選択したブランチ（デフォルトではマスター）への新しいプッシュはすべて、アプリケーションの新しいバージョンをデプロイするために使用されます。信じられないほどシンプルで便利！



結論



だから私たちが持っているもの：





Nuxt.jsフレームワークの操作方法を実際に示してみました。UIキットの作成から展開の整理まで、最初から最後まで簡単なアプリケーションを作成することができました。



この記事のすべての手順を実行した場合は、最初のNuxt.jsアプリケーションを作成しておめでとうございます。難しかった？このフレームワークをどのように使用しますか？ご不明な点やご要望がございましたら、お気軽にコメント欄にご記入ください。


More articles:


All Articles