vuesaxを導入した話

こんにちは。
今回はvuesaxをvueで作成したファイルに導入した話です。

:relaxed:

githubは[こちら](https://github.com/kazumasamatsumoto/sax)

## まずvueでファイルを作成しましょう！！


ターミナルで作ります

```terminal:terminal
vue create sax(ここはファイル名なので好きな名前をつけてね)
```
<img width="488" alt="スクリーンショット 2018-09-29 13.42.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/bdbb9596-cbc4-77eb-cadc-42d75f34f52a.png">

下の
`Manually select features`
を選びました。

次にTypeScreptとLinter /　Formatter
以外を選択しました。

※TypeScriptで試してみましたがうまくいかなったので
JavaScriptで導入しました。
（他にうまくいった方コメントください）

<img width="489" alt="スクリーンショット 2018-09-29 13.45.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/cd459c16-d550-b45f-ffc9-d1892701414a.png">

そこから５個ぐらい質問されましたが全てエンターキーでOKです！！

<img width="486" alt="スクリーンショット 2018-09-29 13.48.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/1b30888b-36af-d592-2eca-1e55c01f2a8d.png">

### 次に作成したフォルダに移動しましょう！！

```terminal:terminal
cd sax
```

開いてみます。

```terminal:terminal
npm run serve
```

こんな感じです！！
<img width="1440" alt="スクリーンショット 2018-09-29 13.59.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/0910ccf1-5165-bee8-4b49-3eadbca2f9c9.png">

でここからは[vuesaxのページ](https://lusaxweb.github.io/vuesax/development/#quick-start-cdn)を参考にして進めていきます！！



まずは先ほど作成した「sax」のフォルダにvuesaxをインストールします。
saxのフォルダに移動

```terminal:terminal
cd sax
```

vuesaxをインストール

```terminal:terminal
npm install vuesax
```

マテリアルアイコンもインストールした方がいいよって書いてあったのでインストールしちゃいました。

```terminal:terminal
npm install material-icons --save
```


## 次にコードを編集しました。

追加したよと書いてあるところはサイトに書いてあったのでそのまま書きました。
<img width="775" alt="スクリーンショット 2018-09-29 14.08.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/df04a0ad-4daf-69fc-436c-8944f8502a7b.png">


```main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import Vuesax from 'vuesax' //追加したよ
import 'vuesax/dist/vuesax.css' //追加したよ
import 'material-icons/iconfont/material-icons.css' //追加したよ

Vue.use(Vuesax) //追加したよ

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

```

## 実際になんかやってみます 

今回はダイアログでどんな感じなのか遊んでみました！！

<img width="1440" alt="スクリーンショット 2018-09-29 14.10.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/f07f7587-31c9-7447-7a72-d718f318e5c5.png">

コードは[サンプルコード](https://lusaxweb.github.io/vuesax/components/dialog.html#confirm)があるのでそれを使いました。

```vue:App.vue
<template lang="html">
  <div class="centerx">
    <vs-button @click="openConfirm()" vs-color="danger" vs-type="gradient">Alert Primary</vs-button>
  </div>
</template>

<script>
export default {
  data:()=>({
    activeConfirm:false
  }),
    methods:{
      openConfirm(){
      this.$vs.dialog({
        type:'confirm',
        color: 'danger',
        title: `Confirm`,
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        accept:this.acceptAlert
      })
      },
      acceptAlert(color){
        this.$vs.notify({
          color:'danger',
          title:'Deleted image',
          text:'The selected image was successfully deleted'
        })
      },
    }
}
</script>
```

そしてまた

```terminal:terminal
npm run serve
```

するとこんな感じ。
<img width="1440" alt="スクリーンショット 2018-09-29 14.22.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/75a02040-bdb4-8ce9-f1ab-8febacff5c24.png">

うん位置悪い。

<!-- 位置変更で追加したよ -->
```vue:App.vue
<script>
変更なし
</script>

<style>
.centerx {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    height: 200px;/*高さ*/
    text-align: center;/*中央寄せ*/
}
</style>
```

するとこんな感じ。
<img width="1440" alt="スクリーンショット 2018-09-29 14.33.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/cdf3adf5-1020-229d-fc5f-4494d10f36b1.png">
んでクリックするとダイアログが表示されて
<img width="1440" alt="スクリーンショット 2018-09-29 14.33.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/bbdb8f71-8de4-c180-9090-cf5e45ec57fb.png">
Acceptをクリックすると
<img width="1440" alt="スクリーンショット 2018-09-29 14.33.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/81b70814-df86-be72-7594-165305ffca73.png">
右下に画像を削除しましたと表示されます。

## 同じように他のコンソールをいじっていたら・・・
[これ](https://lusaxweb.github.io/vuesax/components/dialog.html#prompt)もやってみようと思ったんです
<img width="1440" alt="スクリーンショット 2018-09-29 14.36.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/b7720011-45a2-8bbb-303b-94e762bca310.png">

あれっれーおっかしーぞー
<img width="1440" alt="スクリーンショット 2018-09-29 14.38.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/c6ae3e16-5ac8-710a-664c-43dfda6ff7a7.png">
なんでも```stylus-loader```っていうのをインストールしてねって事なので・・・
[この記事](https://qiita.com/ezawa800/items/eef19d1c0dcbe0b4de62)を参考にしました。

その結果
<img width="1440" alt="スクリーンショット 2018-09-29 14.45.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/12be218c-7cc5-264d-b939-ab44aa4393bc.png">
位置が悪いのはご愛嬌ってことで。

## github pages にあげます。

[参考記事](https://qiita.com/fuuki/items/3e3c76b8dc558fcd8aa9)

```vue.config.js
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/sax/'
    : '/',
  outputDir: 'docs',
};
```

vue.config.js
というファイルを作成して上の内容を記入します。

manifest.json
の中身を相対パスに変更

```manifest.json
{
  "name": "sax",
  "short_name": "sax",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",//点をつける
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",//点をつける
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",//点をつける
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}
```

ビルドしましょう。

```
npm run build
```

[できた](https://kazumasamatsumoto.github.io/sax/)

なんか素敵やん！！