20201024のvue.jsに関する記事は6件です。

投稿日：2020-10-24T20:37:37+09:00

Vue.jsのコンポーネント内からhrefで画面遷移するには

やりたかったこと

環境：Laravel + vue.js(単一Vueコンポーネント)

SPAではなく、普通に画面全体を遷移させる。
ただし、URLはbladeテンプレート側からpropsで受け取りvue側で他の変数と合体させるため可変にしたい。

URLが固定でいいなら以下のように普通のHTMLでいい。
<a href="/edit"></a>
で、この固定のURLの代わりにどうやってコンポーネント内のdataを埋め込むかというのが問題。
やり方がググっても出てこなかったのでかなりハマりました。
vue-rooterとかはいらないです。

解決法

aタグの場合
sample.vue
<template>
    <a :href="url_edit_id" class="btn btn-primary">編集</a>
</template>

<script>
    export default {
        props: ['url_edit'],
        data: function() { 
            return {
                url_edit_id:'/edit'
            }
        },
</script>
buttonタグの場合

ボタンタグの場はmethodsに任意の名前で関数を作成し、その中でlocation.href=[遷移させたいURL]を指定します。
そのmethod名をbuttonタグの中のv-on:clickの値として呼び出します。
sample.vue
<template>
    <button v-on:click="locate" class="btn btn-primary">編集</button>
</template>

<script>
    export default {
        props: ['url_edit'],
        data: function() { 
            return {
                url_edit_id:'/edit'
            }
        },
        methods: {
            locate: function() {
                location.href= this.url_edit_id;
            }
        },
</script>
aタグの場合とbuttonタグの場合で書いていますが、リンクへの挙動は同じです。
script側のdata内で定義した変数名をマスタッシュ{{ }}とかつけずにそのまま書きます。
不思議な構文ですが、これでurl_edit_idの値である/editがtemplate側に置換されて文字列展開されます。
aタグの方が簡単なので必要なければaタグにボタンのcss当てた方が簡単です。
私は:disabled属性を当てる必要があったのでボタンタグを使う必要がありました。

一応これで動きましたが、もっと簡単にかける方法あるよって方はコメントお願いします。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-24T20:30:40+09:00

nuxt.js静的画像参照の書き方

はじめに

Nuxt.jsでは、assets(モジュール部品とする),static（静的フォルダ）の下に画像を配置します。

アセット
デフォルトでは、Nuxt は vue-loader、file-loader、url-loader webpack ローダーを使用して、強力なアセットを提供します。静的アセットには static ディレクトリを使用することもできます。

出典：https://ja.nuxtjs.org/guide/assets/

Assetsフォルダー例：
vue.js
<img src="~/assets/image/no-image.png">
<img src="@/assets/image/no-image.png">
Staticフォルダー例：
vue.js
<img src="/image/no-image.png" />
ただし、書き方によってWindows,Mac,Linuxに表示されない場合がありました。

もともとのコード
vue.js
<v-img :src="require('~/assets/image/no-image.png').default" />
作る時点はWindows,Mac,Linuxでも正常に動作しました。

最近の発生した現象

Windowsでは「require('~/assets/image/no-image.png').default」はundefinedになってしまったため、
画像表示されない問題です。

解消案
vue.js
<v-img :src="require('~/assets/image/no-image.png').default ?
             require('~/assets/image/no-image.png').default :
             require('~/assets/image/no-image.png')"
つまり、undefinedの場合はdefaultを削除してrequire('~/assets/image/no-image.png')のように変更。

ほかの解消方法もあると思いますが、修正した内容をメモしました。

以上

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-24T18:25:38+09:00

RailsにVue.jsを導入する

備忘録

今回はrailsで開発中のアプリにVue.jsを導入したので備忘録として記録します。
初めてrailsでVue.jsを使う人の助けになればと思います。
また、初心者のため間違いなどあればご指摘お願いします！
ruby 2.6.5
Rails 6.0.3.3

ステップ１webpackerのインストール

インストール済みの方はスキップして下さい
Gemgile内に記述
gem "webpacker", github: "rails/webpacker”
記述できたらbundle installしましょう。

インストールできたらターミナルで以下を実行
$ bin/rails webpacker:install
これでwebpackerのインストールが完了

ステップ２　Vue.jsのインストール

ターミナルで以下コマンドを入力
$ rails webpacker:install:vue
これでVue.jsに必要なファイルなどが作成されました。

ステップ３　Vue.jsの読み込み

app/views/layouts配下のapplication.html.erbファイルに以下を記述
 <%= javascript_pack_tag "hello_vue" %>
正常に読み込まれると写真のようにviewに表示されます。
https://gyazo.com/57e56686d2113920659f3dc9410f3a15

最後に

以上でrailsでVue.jsを導入する事ができました！
比較的に簡単に導入する事ができるのでよければ使ってみて下さい！
何か間違えなどあればご教授下さい！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-24T17:49:31+09:00

スクラッチからWebpack+Babel+Vue 3を使う

スクラッチからWebpack+Babel+Vue.jsを使うをVue 3に対応させてみました。

Vue CLI も Rails+Webpacker も使わずに、Vue.js（Single File Component）のバージョン3を試す方法です。スクラッチから作るのが好きな人、WebpackとBabelが吐いたコードを眺めたい人はどうぞ。

準備

てきとうなディレクトリを作り、yarnで必要なモジュールをインストールします。
% mkdir scratch && cd scratch
% yarn add @babel/core @babel/preset-env babel-loader core-js vue@next vue-loader@next @vue/compiler-sfc vue-template-compiler webpack webpack-cli
vue と vue-loader をVue 3のものにするために vue@next、vue-loader@next とします。また、vue-loader を動かすのに @vue/compiler-sfc が必要です。

最終的なディレクトリとファイルの配置は次のようになります。
- dist
  - app.js
  - app.js.map
- node_modules
- src
  - app.js
  - hello.vue
- babel.config.js
- index.html
- package.json
- wbpack.config.js
- yarn.lock
Vueアプリケーション

HTMLと簡単なVueアプリケーションを書きます。Vue 2との違いは、アプリケーションを作成してマウントする部分 createApp(Hello).mount('#app'); だけです。
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>てすと</title>
    <script src="dist/app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
src/app.js
import "core-js/stable";
import "regenerator-runtime/runtime";

import { createApp } from 'vue';
import Hello from './hello.vue';

document.addEventListener('DOMContentLoaded', () => {
  createApp(Hello).mount('#app');
});
src/hello.vue
<template>
  <div>
    <h1>{{message}}</h1>
    <p><input v-model="message"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.message = 'hello';
  }
}
</script>
webpack.config.js

webpack.config.js を書きます。src/app.js が dist/app.js に出力されるようにします。
webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const path = require('path');

const env = process.env.NODE_ENV || 'development';

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  mode: env,
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    })
  ]
}
1行目は、Vue 2では、
const VueLoaderPlugin = require('vue-loader/lib/plugin');
としていたところをVue 3ではちょっと変えます。
const { VueLoaderPlugin } = require('vue-loader');
plugins: のところで、2つのオプションを指定していますが、これがないと実行時にWarningが出ます（Bundler Build Feature Flags を参照）。
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    })
babel.config.js

IE 11対応にするために、babel.config.js に preset-env の設定を書きます。ここは Vue 2のものから変えていません。
babel.config.js
module.exports = api => {
  api.cache(true);

  return {
    presets: [
      [
        "@babel/preset-env",
        {
          targets: { ie: "11" },
          useBuiltIns: "entry",
          corejs: 3
        }
      ]
    ]
  }
}
コンパイル

package.json に scripts.build を追加すると、yarnコマンドでwebpackを呼び出せます。
package.json
{
  "scripts": {
    "build": "webpack --config=webpack.config.js"
  },
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@vue/compiler-sfc": "^3.0.2",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.2",
    "vue-loader": "^16.0.0-beta.8",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0"
  }
}
yarn build とすると、webpackが dist/app.js を生成します。
% yarn build
環境変数 NODE_ENV を production にすると、本番環境用に圧縮された dist/app.js ができます。
% NODE_ENV=production yarn build
index.html をブラウザーで開いてVueアプリケーションが動けば成功です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-24T16:48:26+09:00

Vue3.0から読みやすいコードに！？ Composition APIの概要紹介

はじめに

今回は新しく導入されたComposition APIについて解説します！

動画でもコード付きで解説してるので、よろしければご視聴お願いします！

【YouTube動画】 Composition APIやsetup関数の使い方を一緒にみていきましょう！

Vue 2系と3系の書き方の違い

Vue2系でコンポネントを作るとき、以下のように書いてましたね。
定義場所と使う場所が離れているため、コードジャンプできないと、読むの辛いですね (できても見辛いですが...)。
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  data () {
    return {
      repositories: [],
      filters: { ... },
      searchQuery: ''
    }
  },
  computed: {
    filteredRepositories () { ... },
    repositoriesMatchingSearchQuery () { ... },
  },
  watch: {
    user: 'getUserRepositories'
  },
  methods: {
    getUserRepositories () {
      // using `this.user` to fetch user repositories
    },
    updateFilters () { ... },
  },
  mounted () {
    this.getUserRepositories()
  }
}
これがVue3系からこうなります！
dataとかがなくなった代わりに、setup関数が追加されていますね！

setup関数内に変数や関数を定義し、mountedやmethodsに対応するものを書いていきます。
setup関数のおかげで、同じデータを扱う処理をまとめることができます！！

また、setup関数の最後で定数などを返すと、template内で扱うことができます。
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    const test = ...
    console.log(props) // { user: '' }

    // setup関数内で定義したものを外 (<template>など) で使えるようにreturn
    return { test, ... }
  }
  ...
}
ビジュアルにまとめると以下のようになります。
左が今までのVue.jsの書き方で、右がComposition APIを使った場合の書き方です。
この画像では、アクセスするデータごとに色分けしています。

比較画像 Vue Composition API #code-organization

dataはどこにいった？

dataを使わない代わりに、refやreactiveが導入されました！

例えば、以下のように使います。
import { ref } from 'vue'

...
setup(props) {
  const counter = ref(0)

  console.log(counter) // { value: 0 }
  console.log(counter.value) // 0

  counter.value++
  console.log(counter.value) // 1
}
データを複数まとめたい場合はreactiveを使います。
import { reactive } from 'vue'

...
setup(props) {
  const counters = reactive({ x: 0, y: 0 })
}
ライフサイクル周りのメソッドは？

mountedなどのライフサイクル周りのメソッドはonMounted()などを読み込んで使います。
import { onMounted } from 'vue'
...

setup (props) {
  const getUserRepositories = ...

  onMounted(getUserRepositories)
  ...
}
まとめ

今回はVue 3.0のComposition APIについて紹介しました！
今までの書き方でも一応エラーにはならないですが、より読みやすいComposition APIを使ったか書き方に挑戦するのも良いかもしれませんね。

twitterやyoutubeでのコメントもお待ちしています！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-24T11:11:54+09:00

DockerでVue3環境を作る！

はじめに

この記事は Docker を使って Vue3.0 環境の構築までを記します。
初心者のため間違い等ございましたらご指摘いただけると幸いです。

前提条件

Docker、node、npmをインストールしていること。
Dockerをインストールしていない場合は以下のリンクを参考にインストールしてみてください。
たぶん動くから！Docker始めてみよう！

環境

macOS Catalina : 10.15.7
Visual Studio Code : 1.42.1
ターミナル
$ docker --version
Docker version 19.03.13
$ node --version
v14.14.0
$ npm --version
6.14.8
Vueのバージョンアップ

PC上での Vue3.0 の環境を構築します。
古い Vue2.0 が入っていたため、一度アンインストールした後、最新のバージョンをインストールします。

旧バージョンの削除

旧バージョンのVueをグローバルインストールしている場合のみ行います。
ターミナル
$ sudo npm uninstall vue-cli -g
新バージョンのインストール

新しいバージョンをインストールし直します。
ターミナル
$ sudo npm install -g @vue/cli

(略)

$vue --version
@vue/cli 4.5.8
ローカルの環境構築

ローカルで Vue3.0 を使ったプロジェクトを動かしてみます。

ローカル環境でのVueプロジェクトの作成

作業用のディレクトリを作成します。
後々Vue以外のコンテナも追加予定のため、以下の様なディレクトリ構成を想定しています。
ディレクトリ構成
dockerApp
├──docker-compose.yml ←未作成
└──vue
    ├── Dockerfile　  ←未作成
    └── vue_app       ←今からこのフォルダを作る。vueの作業場所。
        └── ・・・       ←ここにVueのソースとか入る。
vue_app用のフォルダを作成し、Vueプロジェクトを作成していきます。
ターミナル
$ mkdir vue_app        #ディレクトリ作成
$ cd vue_app           #ディレクトリの中へ移動
$ vue create vue_app   #Vueプロジェクトの作成
ディレクトリ名やプロジェクト名は各自好きな名前を付けてください。

コマンドを叩くと初期設定が始まります。
Vue 2 か Vue 3 どちらを使うか聞かれるので、もちろんVue 3 を選びます。
Default (Vue 3 Preview) ([Vue 3] babel, eslint) を選択します。（↑キー↓キーで選択し、Enterキーで決定）
ターミナル
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 
しばらくしたら Vue3 のプロジェクトが作成されます。

一度動作の確認をしてみましょう。
npm run serve コマンドでサーバーを動かしてみます。
ターミナル
$ npm run serve
起動したら http://localhost:8080/ へアクセスしてみます。

ちゃんと起動してますね！

ターミナル上で control + c でサーバーを停止させます。

コンテナの環境構築

次にコンテナで Vue 環境を構築していきます。

Dockerfileの作成

ディレクトリ構成で記した場所に、以下の様に Dockerfile を作成します。
Dockerfile
FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

CMD ["npm", "run", "serve"]
FROM node:14.14.0 : Docker イメージのベースとなるイメージを選択します。 : の後はバージョンを指定します。ローカル環境と揃えたほうが無難？

WORKDIR /vue_app : コンテナ内で作業するディレクトリを絶対パスで指定します。指定したディレクトリがない場合は自動的に生成してくれます。

RUN npm install : npmをインストールします。

COPY ./vue_app/ . : ソースをコピーします。[ローカル環境のソースのパス]、[コンテナ内に配置するパス]の順で記します。

CMD ["npm", "run", "serve"] : Vueサーバーの起動。

Dockerfileを用いたコンテナの起動

ターミナルで Dockerfile が配置されているディレクトリに移動してコンテナを起動してみましょう。
まずは docker build コマンドでイメージのビルドを行います。
ターミナル
cd {Dockerfileの配置されたパス}
docker build -t vueapp:0.0.1 .
-t myvueapp:0.0.1 : タグをつけることができます。以降の操作が楽になるので付けておきましょう。 : で区切ってバージョンを指定することができます。

. : Dockerfile が配置されているパスを指定します。

ビルドができたらイメージが作成されているか確認します。
ターミナル
$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
vueapp                  0.0.1               fc7cabc1fe35        22 minutes ago      1.06GB
作成されてますね！

ではいよいよ docker run コマンドで起動してみましょう。
ターミナル
$ docker run --name vue_app_container --rm -it -d -p 8080:8080 vueapp:0.0.1
--name vue_app_container : vue_app_container という名前で起動します。こちらもコンテナイメージをビルドするときと同じく、イメージ名を指定すると管理が楽になるので指定します。

--rm : コンテナを停止した際に自動的にコンテナを削除してくれます。

--it : ターミナルのコマンドをいい感じに入出力してくれます。

-d : コンテナをバックグラウンドで実行します。

-p 8080:8080 : ローカルのポートをコンテナのポートに転送します。

vueapp:0.0.1 : vueappイメージのバージョン 0.0.1 を起動します。

起動したら http://localhost:8080/ へアクセスして起動確認します。

ターミナル上での起動確認
ターミナル
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                    NAMES
388c1dfe015b        vueapp:0.0.1        "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp   vue_app_container
docker stop コマンドで停止させます。
ターミナル
docker stop vue_app_container
docker-composeの作成

ディレクトリ構成で記した場所に、以下の様に docker-compose.yml を作成します。
docker-compose.yml
version: '3'
services:
  vue:
    build: ./vue
    image: vueapp:0.0.2
    container_name: "vue_app_container"
    ports:
      - "8080:8080"
build : dockerfile を配置したディレクトリを指定します。

images : イメージ名を指定します。 : 以降にバージョンの指定ができます。

container_name : コンテナ名を指定します。

ports : ポートの転送指定をします。

docker-composeを用いたコンテナの起動

docker-compose up コマンドで起動します。
ターミナル
$ docker-compose up　-d
-d : バックグラウンドで起動します。

起動したら http://localhost:8080/ へアクセスして起動確認します。

きちんと動いてますね！

コンテナを終了させるときは docker-compose down コマンドを使います。
ターミナル
$ docker-compose down
ファイルの変更をコンテナに反映させるには docker-compose build コマンドを使います。
試しに Vue プロジェクトを自動生成したときに作成されている HelloWorld.vue の template タグ内の最後の行に追記してみます。
vue/vue_app/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <div>
      追記！
    </div>
  </div>
</template>
docker-compose build コマンドを叩いた後、起動します。
ターミナル
$ docker-compose build

(略)

$ docker-compose up　-d
「追記！」の文字が見えますね！

終わりに

Vueを使ったコンテナの作成の参考になれば幸いです。
前回の記事の最後に複数のコンテナを追加したdocker-composeを書きたいとか言いつつ結局コンテナ一つの記事になってしまいました。
次回こそ、次回こそきっと…

　 Tweet
Qiitaで続きを読む