Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@kazumasamatsumo

vuesaxを導入した話

More than 1 year has passed since last update.

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

:relaxed:

githubはこちら

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

ターミナルで作ります

terminal
vue create sax(ここはファイル名なので好きな名前をつけてね)

スクリーンショット 2018-09-29 13.42.28.png

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

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

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

スクリーンショット 2018-09-29 13.45.27.png

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

スクリーンショット 2018-09-29 13.48.03.png

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

terminal
cd sax

開いてみます。

terminal
npm run serve

こんな感じです!!
スクリーンショット 2018-09-29 13.59.34.png

でここからはvuesaxのページを参考にして進めていきます!!

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

terminal
cd sax

vuesaxをインストール

terminal
npm install vuesax

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

terminal
npm install material-icons --save

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

追加したよと書いてあるところはサイトに書いてあったのでそのまま書きました。
スクリーンショット 2018-09-29 14.08.25.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')

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

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

スクリーンショット 2018-09-29 14.10.06.png

コードはサンプルコードがあるのでそれを使いました。

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
npm run serve

するとこんな感じ。
スクリーンショット 2018-09-29 14.22.25.png

うん位置悪い。

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>

するとこんな感じ。
スクリーンショット 2018-09-29 14.33.15.png
んでクリックするとダイアログが表示されて
スクリーンショット 2018-09-29 14.33.18.png
Acceptをクリックすると
スクリーンショット 2018-09-29 14.33.20.png
右下に画像を削除しましたと表示されます。

同じように他のコンソールをいじっていたら・・・

これもやってみようと思ったんです
スクリーンショット 2018-09-29 14.36.07.png

あれっれーおっかしーぞー
スクリーンショット 2018-09-29 14.38.02.png
なんでもstylus-loaderっていうのをインストールしてねって事なので・・・
この記事を参考にしました。

その結果
スクリーンショット 2018-09-29 14.45.32.png
位置が悪いのはご愛嬌ってことで。

github pages にあげます。

参考記事

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

できた

なんか素敵やん!!

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kazumasamatsumo
今年の8月からプログラミングの勉強をはじめました!! 3step.app 暗号通貨nemで知的障害の方でも取引ができるアプリを作りました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?