Edited at

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

    • ※初回はメールアドレスが必要




参考