Vue-cliとElementUIの初期設定まとめ

はじめに

友達が作ったデモを見てかっこいいな〜って言ってたら上記の初期設定を助けてくれたので、そのご好意を忘れて無下にしないうちにまとめておく

動作環境

Mac: Sierra 10.12.6
vue: 3.7.0
ElementUI: 2.8.2

書いている人の前提条件

最近ちょっとだけ、ほんとにちょっとだけVue.jsを勉強した人。基本的な書いてあるソースコードがなんとなく理解できる程度

Vue-cliのスタート

Vue CLI公式ページを参照しながら、
(/home)
:Install

$ npm install -g @vue/cli

:Create a project

$ vue ui 

そうするとStarting GUI... Ready on http://...
ブラウザでProject Dashboard というページが開く。
(聞いた話だと、VueCLI、バージョンが３に上がってプロジェクト作成画面がGUIベースになったらしい。見やすくて嬉しい)

Vue Project Manager>+Create> ここで自分の作りたいプロジェクトをどこにおくかを選択。+Create a new project hereで新しいプロジェクトのフォルダー名やpackage manager, git repositoryの設定ができる。

できたら手元のターミナルで作ったフォルダー(ディレクトリ)に移動する。

$ cd "作ったディレクトリ"
$ npm install
$ npm run serve

成功すると、

こんな感じの表示になるので、Local: ...　のurlのところをブラウザで開く。(MacでCommand押しながらurlをタップしたら標準ブラウザで開いた、便利)

開くと、Vui-cliおなじみの色々書いてあるページに到着。

Vue-cliをいじってみる

まずはちょっと理解してみる

srcディレクトリの中のApp.vueとHelloWorld.vueを見てみる。

つたない理解をメモしておくと、（読み飛ばし推奨）
- まず最初にApp.vueのscriptタグでHelloWorldをインポートする
- インポートしたHelloWorldをexport defaultの中のcomponentsに登録する
- 次にHelloWorld.vueのscriptタグの中を見ると、export defaultがname: HelloWorld、props: {msg: String }、で設定されている。msgはStringを受け取るよ、と理解。
- HelloWorld.vueのtempleteタグの中に、表示されるmsgの存在を確認
- App.vueに戻って、templeteタグの中を見て見ると、divタグの中にHelloworld ...というタグを発見。この中のmsg="Welcome to..."がHelloWorld.vueに渡されて表示される
...とこんな感じの流れなのではないかと思っている。

ちょっといじってみる

ここからちょっとだけHelloWorld.vueのtempleteタグの中身をいじってみた。(WebStorm使った)

templeteタグの中身を全部消して、

<templete>
  <div>
    {{ msg }}
  </div>
</templete>

にすると、

できた。上で理解したかな...なポイントを一番簡略化しててこれが一番わかりやすい。

とりあえず基本的な構造に関しては最初はこれくらいで

ElementUIも触ってみる

まずはインストール

ElementUI

$ npm i element-ui -S

iはinstall。npmが勝手に補完してくれて便利らしい。友達はelement-uiでタイポしてたけど

次に、コマンドnpm run serveで任意のページをブラウザでもう一度立ち上げて、ここから中身をいじってみる

簡単なボタンを追加してみる

まずは、main.jsでElementUIをインポートする。
公式のページから、Home>Component>Development>Quick StartからFully importを参照。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

Vue.use(ElementUI);

main.jsにここまで追加。

次に、ElementUIからComponent>Basic>Button>Usage Buttonから、ぱっと見でわかりやすいものを一つ選んでHelloWorld.vueのtempleteタグの中、divタグの中に追加してみる。Primaryボタンが青くて綺麗だったから選んでみた。

<template>
  <div>
      {{ word }}
      <el-button type="primary">Primary</el-button>
  </div>
</template>

表示された

Buttonにイベントをつけてみる

せっかくなのでVue.jsのおさらいを兼ねてイベントを実装。...ここはあとで気が向いたら付け加えます。

驚いたこと

Vue.jsとかElementUIに詳しい人ならあたりまえだろ！と思うだろうけど...
- htmlとかcssとか、それぞれのファイルがない！ 一個のファイルに一つのパーツの中身がまとまってるからわかりやすい
- ElementUIさえインストールしちゃえばほんとになんでも作れそう！

今後もうちょっと色々な機能を触ってみようと思う。教えてくれたお友達ありがとう！