Nuxt.js(Vue.js)+ElementUI(UIライブラリ)のフロントエンド環境を1から作る手順

この記事では、Nuxt.js(Vue.js)+ElementUI(UIライブラリ)のフロントエンド環境を1から作る手順を解説していきます。Nuxt.jsプロジェクトを初めて作る方や1からNuxtプロジェクトを作りたい方向けのチュートリアル的な立ち位置の記事となっております。

 

Nuxt.jsとは?

Nuxt.js(ナクスト)とは、ユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。Vue.jsを主としながら、SPA(Single Page Application)+SSR(Server Side Rendering)アプリケーションを手軽に作れる優れものです。

ファーストビューのローディング時間とSEO的な問題クリアする、かつ動的アプリケーション(ページ遷移はせず動的にレンダリングを行うため、ユーザー操作のリアクションが非常に高速)というまるでネイティブアプリのような挙動を実現できるというメリットがあるらしいです。

 

【Nuxt.jsにパッケージ化されているもの】

・Vue

・Vue-Router

・Vuex(Vuex ストアのオプション を利用しているときに限ります)

・Vue Server Renderer(mode: ‘spa’ を利用しているときを除く)

・Vue-Meta

※ ソースコードのバンドルや分割などするために Webpack も使います。また、vue-loader と babel-loader も合わせて使います。

 

 

こちらの関連記事も合わせてどうぞ

「Nuxt.js+Bulmaのレイアウトを爆速で実装する」

 

Nuxt.jsプロジェクト作成手順

【前提条件】

Node.js、npmがインストールされている

 

プロジェクトディレクトリとpackage.jsonを作成

ターミナルでプロジェクトを作りたい場所に移動して以下のコマンドを打ちます。(右クリックで作成してもOK)

// プロジェクトを作成

$ mkdir [プロジェクト名]

$ cd [プロジェクト名]

//package.jsonを作成
$ touch package.json

 

 

nuxt コマンドを使えるように指定するために package.json ファイルの中身を以下の様に変更

(package.json)

{

 "name": "nuxt.js_app",

 "scripts": {

   "dev": "nuxt"

 }

}

このように書いておけば npm run dev で Nuxt.js を起動できるようになります。

 

各パッケージのインストール

nuxtのインストール

$ npm install --save nuxt

 

ElementUI(https://element.eleme.io/#/en-US)のインストール

$ npm i element-ui -S

 

以下もおすすめのUIコンポーネントなので、興味がある方は試してください。

・Vuetify(https://vuetifyjs.com/ja/

$ npm install vuetify --save

 

これらのパッケージは以下のようにpackage.jsonに追加されるので、確認してみてください。

package.json

{
 "name": "nuxt.js_app",
 "scripts": {
   "dev": "nuxt"
 },

 "dependencies": {
   "element-ui": "^2.4.1",
   "nuxt": "^1.4.1",
   "vuetify": "^1.0.19"
 }
}

 

 

表示ページの作成

HelloWorld!するページを作成します。

以下のように、Nuxt.js は pages ディレクトリ内の vue ファイルをルーティングまで行ってくれます。

例)

[project-name]

  -pages

       -users

           -index.vue(/users)

       -index.vue(/)

 

今回は最初に表示されるページを作ってあげればいいので、index.vue(/)を作ってあげましょう。

 

プロジェクトディレクトリ内にpagesディレクトリを作成

$ mkdir pages

 

pagesディレクトリ内にindex.vueを作成・編集

$ touch index.vue

 

index.vue

<template>

 <h1>Hello world!</h1>

</template>

 

プロジェクトを実行

$ npm run dev

成功すると以下のようになるので、http://localhost:3000をブラウザで確認。

 

 

まとめ

今回は、Nuxt.js(Vue.js)+ElementUI(UIライブラリ)のフロントエンド環境を1から作る手順の解説を行いました。この記事が皆さんの活動を手助けになれば幸いでございます。

この記事は、公式サイトhttps://ja.nuxtjs.org/guide/installationの「スクラッチから始める」を参考にしています。理解を深めたいなら公式サイトを見ることを強くおすすめします。

コメント

  1. […] 「Nuxt.js(Vue.js)+ElementUI(UIライブラリ)のフロントエンド環境を1から作… […]