Help us understand the problem. What is going on with this article?

vue-cli(v3) + Nuxt.js + ElementUIを触ってみた

More than 1 year has passed since last update.

Nuxt.jsが実際のプロダクトで導入されるケースが増えて来ている為、ElementUIと合わせて触ってみました。また、vue-cliv3betaが試せるタイミングでしたので、合わせて触ってみました。

TL;DR

対象読者

  • Nuxt.jsが気になっているが、まだ触っていない
  • ElementUIをNuxt.jsのプラグインとして導入したい

Nuxt.jsとは

Screen_2018_03_27_1_09.png

  • Vue.js製のフレームワーク
  • ルーティングやSSRが容易に可能
  • Vuex(状態管理)についても導入が容易

ElementUIとは

Sullscreen_2018_03_27_1_19.png

  • Vue.js用の便利なコンポーネントライブラリ
  • 基本的なコンポーネントが揃っている
  • React.jsでいうところのMaterial-UI

前提条件

準備として、以下をインストール

vue-cliのインストール

vue-cliv3betaをグローバルでインストール
※グローバルでインストールしたくない場合はコマンドにglobalを入れずに実行

$ yarn global add @vue/cli

Nuxt.jsのテンプレートプロジェクトを作成

プロジェクト作成の為にvue initを実行すると、以下のようなエラーが発生します。

$ vue init nuxt-community/starter-template learn-nuxt-elementui

  Command vue init requires a global addon to be installed.
  Please run yarn global add @vue/cli-init and try again.

これは、v3からはvue-clivue initコマンドが含まれない為、別途インストールする必要があるからです。
参考:vue-cliのv3からのコマンド一覧

vue initコマンドの為に@vue/cli-initをインストール

$ yarn global add @vue/cli-init

@vue/cli-initをインストール後、プロジェクト作成を行います。
※設定を特に変更する必要がなければ、Enterを3回押下

$ vue init nuxt-community/starter-template learn-nuxt-elementui
? Project name learn-nuxt-elementui
? Project description Nuxt.js project
? Author locol23 <xxxxxxxx@yyyyyyy.com>

   vue-cli · Generated "learn-nuxt-elementui".

   To get started:

     cd learn-nuxt-elementui
     npm install # Or yarn
     npm run dev

Nuxtテンプレートサイトの起動確認

以下のコマンドを順に実行

$ cd learn-nuxt-elementui
$ yarn 
$ yarn dev

最後にOPEN http://localhost:3000が表示されるのを確認し、
ブラウザからlocalhost:3000へアクセス
下記のページが表示される

Screen_2018_03_26_22_38.png

ElementUIの導入

プラグインとして導入

本来であれば、vue-cliv3からの新コマンドvue addにてPluginを導入出来るが、element-uiがまだ未対応?の為、以下のように導入
vue add element-ui実行時にパッケージのリポジトリが見つからないエラー発生。申し訳ありませんが、何かご存知の方がいらっしゃいましたら、コメント頂ければ嬉しいです。vue add apolloはv3用のリポジトリがある為か、vue add可能でした。

2018/05/14更新
コメントを頂いて確認したところ、element-uiのvue-cli対応が完了していた為、vue add element-uiが可能となっていました。
yarn add element-uiの代わりにvue add element-uiを実行して下さい。
※ 途中の質問は設定を特に変更する必要がなければ、Enterを2回押下
※ 事前にgit initをしていないと途中でエラーになる為、事前に実行

$ git init
$ vue add element-ui
// 途中省略
? Use scss theme? Yes
? ElementUi i18n options None
$ yarn add element-ui // 上記でvue add element-uiをしている場合は実行不要
$ touch plugins/element-ui.js

plugins/element-ui.jsを編集

plugins/element-ui.js
import Vue from 'vue'
import ElementUI from 'element-ui'

const locale = require('element-ui/lib/locale/lang/ja')
Vue.use(ElementUI, { locale })

nuxt.config.jsを編集

nuxt.config.js
   build: {
     /*
     ** Run ESLint on save
     */
     extend (config, { isDev, isClient }) {
       if (isDev && isClient) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
         })
       }
-    }
-  }
+    },
+    vendor: ['element-ui'],
+  },
+  plugins: [
+    '~plugins/element-ui'
+  ],
+  css: [
+    'element-ui/lib/theme-chalk/index.css'
+  ] 
 }

ElementUIを実際に使用

pages/index.vueの修正

サンプルとして、タブやボタン、アイコン、ラジオコンポーネントを配置

pages/index.vue
<template>
  <section class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>

    <div>
      <el-button type="primary">Primary</el-button>
    </div>
    <div>
      <i class="el-icon-edit"></i>
    </div>
    <div>
        <i class="el-icon-loading"></i>
    </div>
    <div>
      <el-radio v-model="radio" label="1">Option A</el-radio>
      <el-radio v-model="radio" label="2">Option B</el-radio>
    </div>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        radio: 1,
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
</style>

最終的なページ

Screen_2018_03_27_3_21.png

まとめ

  • Nuxt.jsとElementUIを組み合わせることで、容易にサイト構築が可能
  • nuxt.config.jsmode: spaを追記することで、SPAにすることも可能
  • 状況に応じて、Vuexを導入し、状態管理可能
  • Nuxt.jsはherokunowで容易にサイト公開可能
    • nowの場合:learn-nuxt-elementディレクトリにて$ yarn global add now->$ now
    • ※初回はメールアドレスが必要

参考

locol23
Webアプリケーション勉強中です。よろしくお願いします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした