Vue.jsでSPA - [1] Element UIでベースの画面をつくる


##はじめに

既存のバックエンドAPIをごにょごにょするようなSPAのPoCでも書こうと思い立った．今からだったら`Vue.js`かな？

あ, これはぼちぼちやる日記です．ガチ勢はアドバイスまたは退散願います．

##HTMLをElement UIでつくる

見た目がある程度整ってないと継続したやる気がでない一方，時間かけたくないので，さくっとそこそこの見た目がつくれることは重要．そこで，Element UIつかうことにする．

[Element UI](http://element.eleme.io/#/en-US)はVue2.0ベースで書かれたWebコンポーネントライブララリ．CSSとJSが含まれたフレームワーク[Bootstrap](https://getbootstrap.com/)のVue.js版みたいな感じ．これでひとまず画面を作ってみる．

##コード

HTMLへのElement UIの読み込み方は以下のような感じ．Element UIのサイトには`node.js`へインストールする方法とCDNからもってくる方法があるが，今回はフロントだけで軽くやりたいので後者を選択．とりあえず`index.html`へ以下をコピペで動くはず．

```html:index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="app.css">
  <!-- import Vue.js before Element UI-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import Element UI -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.1/locale/en.js"></script>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
       <el-aside width="200px">Aside</el-aside>
       <el-main>Main</el-main>
      </el-container>
    </el-container>
  <div>
</body>

<script>
  ELEMENT.locale(ELEMENT.lang.en)  // use ELEMENT.lang.ja if you like Japanese
   new Vue({
     el: '#app',
     data: function() {
       return { visible: false }
     }
   })
</script>

</html>
```

以下の部分がElement UIのコンポーネント．Vueがマップされているところ，この例だと`<div id="app"></div>`の中にあれはうまくレンダリングされるはず．外にあったらレンダリングされない．

```
    <el-container>
      <el-header>Header</el-header>
      <el-container>
       <el-aside width="200px">Aside</el-aside>
       <el-main>Main</el-main>
      </el-container>
    </el-container>
```

ブラウザでアクセスしてみると以下のように3ペインな感じの画面ができる．これがSPAのベースになる

![Screen Shot 2018-07-01 at 14.56.01.png](https://qiita-image-store.s3.amazonaws.com/0/32540/89a16385-cdef-d3a9-65a0-08338309be93.png)

## 余談
余談だが，以下のようなメッセージが`console`に出たら，おそらくVueでマップしているところで外部の`<script>`をコールしようとしているか，`<div>`が閉じられていないと思われるんでその辺りをチェック．

```
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be 
```

## 次回
次回は各ペインの中にコンテンツをつくっていくでぇ．

## シリーズ
- [Vue.jsでSPA - [1] Element UIでベースの画面をつくる](https://qiita.com/narutaro/items/50d0e4714f93279502c9)
- [Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる](https://qiita.com/narutaro/items/9abbf7881f692c985484)
- [Vue.jsでSPA - [3] vue-routerでルーティング ](https://qiita.com/narutaro/items/74178f4ea031b0ccfa44)
- [Vue.jsでSPA - [4] コンポーネントにしてみる ](https://qiita.com/narutaro/items/df793bb34129d113d9f2)
- [Vue.jsでSPA - [5] リアクティブになってる？](https://qiita.com/narutaro/items/bed4eab6e53e3b46c0b2)
- [Vue.jsでSPA - [6] サーバからのデータ取得](https://qiita.com/narutaro/items/82f4d9635c398524431c)
- [Vue.jsでSPA - [7] Vueからサーバデータ取得](https://qiita.com/narutaro/items/91da194788318c226e0e)
- [Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと](https://qiita.com/narutaro/items/3b7135eed8f6e930a0e6)
- [Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法](https://qiita.com/narutaro/items/26e4cbec386bc054bbd7)
- [Vue.jsでSPA - [10] Safari..お前か...3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)
- [Vue.jsでSPA - [11] Element UIでログイン画面](https://qiita.com/narutaro/items/010009c0198371fee658)
- [Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移](https://qiita.com/narutaro/items/fca953b3b2ed5c63360c)
- [Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす](https://qiita.com/narutaro/items/bdc0e25c22369466bed3)
- [Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル](https://qiita.com/narutaro/items/9502b90b565366911c57)
- [Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ](https://qiita.com/narutaro/items/d6431f54050504bf1551)
- [Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか](https://qiita.com/narutaro/items/3c37fe6c3b19a6143a07)