More than 3 years have passed since last update.

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

Last updated at 2020-04-05Posted at 2018-07-01

##はじめに

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

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

##HTMLをElement UIでつくる

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

Element UIはVue2.0ベースで書かれたWebコンポーネントライブララリ．CSSとJSが含まれたフレームワークBootstrapのVue.js版みたいな感じ．これでひとまず画面を作ってみる．

##コード

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

余談

余談だが，以下のようなメッセージが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

次回

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

シリーズ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up