What's New Qiita

20210302のvue.jsに関する記事は8件です。

  • 投稿日：2021-03-02T23:38:23+09:00

Vue.js 開発環境構築

Vue.js 開発環境構築

Vue.jsの環境を作るには主に２つのやり方がある

種類

CDNからの読み込み（とりあえず開発絵少し触ってみたいなくらい）
- Vueが用意してくれているサーバーから読み込み

ローカルにnpmインストール（本格的に本番環境などで運用したい場合）
- プラスでvue-cliをインストールすればもっと作りやすくなる

Vue.jsの環境を作るには主に以下２つのやり方がある

① CDNからの読み込み（とりあえず開発で少し触ってみたいなくらい）

Vueが用意してくれているサーバーから読み込み
その中でも、開発用と本番用がある
開発用：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
本番用：<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

※CDNはちょっとしたコードを書いてテストしてみたいという時に使う程度

② ローカルにnpmインストール（本格的に本番環境などで運用したい場合）

プラスでvue-cliをインストールすればもっと作りやすくなる

※開発の現場ではほぼほぼVue-CLIを使用。CDNで開発することはほぼない

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T23:32:01+09:00

【Vscode plugin】Vetur

Vetur

Vue.jsに関するvscodeの拡張機能

読み方

ビーターらしい

サポート一覧

  • シンタックスハイライト
  • スニペット
  • Emmet
  • コードチェック（linting/Erorr Check）
  • オートコンプリート

vscodeでのメッセージ

Veturは見つけることができませんtsconfig.json、jsconfig.json/ XXXX / XXXXXXで。
あなたがいずれかを持っていない場合はtsconfig.json、jsconfig.jsonプロジェクトで、Veturは、フォールバックの設定を使用します。パスエイリアス、デコレータ、インポートjsonなどの一部の機能は機能しません。

この構成をプロジェクトの正しい位置に追加するか、を使用vetur.config.jsしてファイルパスを設定できます。

これから編集予定↓

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T12:24:52+09:00

【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない

移転しました↓

【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T12:24:00+09:00

【Vue.js Nuxt.js】プロジェクトのrootpathを特定のページへ変更する

移転しました↓

【Vue.js Nuxt.js】プロジェクトのrootpathを特定のページへ変更する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T12:06:29+09:00

Vue.jsでRangeError: Maximum call stack size exceeded

事象

client.js?06a0:103 RangeError: Maximum call stack size exceeded
    at Function.isArray (<anonymous>)
    at _traverse (vue.runtime.esm.js?2b0e:2106)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)

解決方法

下記コードを

  computed: {
    ...mapMutations('xxx', ['setYyy']),
  },

下記のように修正。

  methods: {
    ...mapMutations('xxx', ['setYyy']),
  },

ちょっとしたミスでこの謎エラー、こわいね

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T10:33:02+09:00

Vuetify のデフォルトのレスポンシブ対応を適応させないようにする

きっかけ

Vuetify の v-data-table を用いて単語リストを作りました。

image.png

CSSやデザインに疎くても手軽に「っぽいデザイン」が作れて Vuetify にはいつもお世話になってます。

課題

画面を縮めるとデフォルトで設定されてるレスポンシブが適応されてしまい、非常に見づらくなってしまいます、、

image.png

横幅にはゆとりがあるのでそのまま縮めたい

解決策

レスポンシブのbreakpointの値を変更して解決

<v-data-table
      :headers="headers"
      :items="words"
      mobile-breakpoint="0"
    >
<!-- 中身省略  -->

breakpoint: {
      mobileBreakpoint: 'col'
    },

スクリーンショット 2021-03-02 10.31.20.png

これで縮めてもレスポンシブが適応されなくなります。

参考 https://vuetifyjs.com/ja/features/breakpoints/#section-30e230d030a430eb30d630ec30fc30af30dd30a430f330c8

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T00:37:01+09:00

VSCode + Docker で Vue.js の開発環境構築

ことの発端

これまで VSCode で C++ の開発環境構築を進めていたのですが、フロントエンドの方々も vue の開発環境を Docker で行う方針にしたので、その導入のメモ書きです。

手順

1. Dockerfile と docker-compose.yml を作成

今回は、Dockerコンテナでサーバを起動するので、docker-compose.ymlを作成します。
作業用のディレクトリを作成して、Dockerfileとdocker-compose.ymlを作成します。1

Dockerfile
FROM ubuntu:18.04
RUN apt-get update \
 && apt-get install -y nodejs npm build-essential git python3 curl \
 && npm i n -g \
 && n stable \
 && apt-get purge -y nodejs npm
docker-compose.yml
version: "3"
services:
  ubuntu:
    build: .
    ports:
      - "58080:8080"
      - "56006:6006"

8080 は vue の npm run serve のデフォルトポート、6006 は npm run storybook のデフォルトポートで、それぞれ、ローカルポートの 58080と56006に割り当てます。
他に必要であれば追記しましょう。2

2. VSCodeからコンテナ内へリモート接続する

  1. 拡張機能 Remote - Containers : ms-vscode-remote.remote-containers をインストールします。

  2. インストールすると、左下の緑色のボタンが表示されるので、クリックします。
    image.png

  3. コマンドパレットが表示されるのでRemote-Containers: Open Folder in Containers...を選びます。
    image.png

  4. フォルダ選択画面が表示されるので、Dockerファイルが存在するフォルダを選択します。

  5. コマンドパレットが表示されるのでFrom 'docker-compose.yml'を選択します。
    image.png

この手順で、コンテナビルド→設定→起動→ログインが行われます。

3. 開発用の拡張機能をインストール3

  1. 拡張機能 Vetur : octref.vetur をインストールします。
  2. 必須じゃないけど Prettier - Code formatter : esbenp.prettier-vscode なんかもオススメです。

これにて、開発環境の構築は終了です。
ガシガシコードを書きましょう。

おまけ

以降は、取り敢えず、vueの知識が無いけど、とりあえず動作確認をやってみたい場合に、やってみると良いかもしれません。

１. ショボいサンプルプロジェクトをクローンする

ショボくて申し訳ない。

git clone https://github.com/codianz/templ.storybook
cd templ.storybook

２. パッケージのインストール

大概のパッケージマネージャでお約束ですのヤツです。

npm i

３. vue開発サーバの起動

vueアプリを開発する際に起動しておくサーバです。

npm start

ブラウザでhttp://localhost:58080/ で起動確認します。

４. パッケージのインストール

storybook で開発を進める際に起動しておくサーバです。

npm run storybook

ブラウザでhttp://localhost:56006/ で起動確認します。

  1. チーム開発で環境を揃えるなら、ちゃんとバージョン指定した方が良いですが、今回はstable（安定版）を使います。 ↩

  2. あれれ？　8080 や 6006 で接続できるんだけど、Remote - Containersがパススルーでコンテナ起動しているんか？（となると、docker-compose.ymlは不要になるので、要調査なり） ↩

  3. VSCodeはリモート環境毎に拡張機能をインストールするという素晴らしい仕様なので、既にローカルで拡張機能をインストールしていても、再度インストールがされているか確認をしてください。 ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-02T00:37:01+09:00

VSCode + Docker でフロントエンドの開発環境構築

ことの発端

これまで VSCode で C++ の開発環境構築を進めていたのですが、フロントエンドの方々も vue の開発環境を Docker で行う方針にしたので、その導入のメモ書きです。
フロントエンドというか Node.js を使う開発環境って感じなので、vue だけじゃなくて electron なんかでも使えると思います。

手順

1. Dockerfile を作成

作業用のディレクトリを作成して、Dockerfileを作成します。1

Dockerfile
FROM ubuntu:18.04
RUN apt-get update \
 && apt-get install -y nodejs npm build-essential git python3 curl \
 && npm i n -g \
 && n stable \
 && apt-get purge -y nodejs npm

通常コンテナ内でポートリスニングしていてもインバウンドが遮断されているんですが、VSCodeのターミナルで起動すると自動的にポートフォワードしてくれるので特に何も指定する必要がありません。2

2. VSCodeからコンテナ内へリモート接続する

  1. 拡張機能 Remote - Containers : ms-vscode-remote.remote-containers をインストールします。

  2. インストールすると、左下の緑色のボタンが表示されるので、クリックします。
    image.png

  3. コマンドパレットが表示されるのでRemote-Containers: Open Folder in Containers...を選びます。
    image.png

  4. フォルダ選択画面が表示されるので、Dockerfileが存在するフォルダを選択します。

  5. コマンドパレットが表示されるのでFrom 'Dockerfile'を選択します。
    image.png

この手順で、コンテナビルド→設定→起動→ログインが行われます。

3. 開発用の拡張機能をインストール3

  1. 拡張機能 Vetur : octref.vetur をインストールします。
  2. 必須じゃないけど Prettier - Code formatter : esbenp.prettier-vscode なんかもオススメです。

これにて、開発環境の構築は終了です。
ガシガシコードを書きましょう。

おまけ

以降は、取り敢えず、vueの知識が無いけど、とりあえず動作確認をやってみたい場合に、やってみると良いかもしれません。

１. ショボいサンプルプロジェクトをクローンする

ショボくて申し訳ない。

git clone https://github.com/codianz/templ.storybook
cd templ.storybook

２. パッケージのインストール

大概のパッケージマネージャでお約束ですのヤツです。

npm i

３. vue開発サーバの起動

vueアプリを開発する際に起動しておくサーバです。

npm start

ブラウザでhttp://localhost:8080/ で起動確認します。

４. パッケージのインストール

storybook で開発を進める際に起動しておくサーバです。

npm run storybook

ブラウザでhttp://localhost:6006/ で起動確認します。

VSCode のポートフォワーディング（2021/03/02追記）

当初、docker-compose.ymlを作成していたんだけど、実行してみたら、コンテナのポートがそのままフォワードされとるやんという事態に　「　？？？　」　だったのですが、VSCodeの親心というヤツでした。

この機能のお陰で、npm start（npm run serve）とかやると、右下にこんなポップアップが表示されます。
image.png

そして、左側のペインにフォワーディング状況を確認することができます。
image.png

す。。。凄すぎる。。。

  1. チーム開発で環境を揃えるなら、ちゃんとバージョン指定した方が良いですが、今回はstable（安定版）を使います。 ↩

  2. 当初は docker-compose.yml を作成する手順にしていましたが、開発環境構築というテーマで、且つ、VSCodeを使用する前提なので、この恩恵は受けておこうということで、記事を改訂しました。（2021/03/02） ↩

  3. VSCodeはリモート環境毎に拡張機能をインストールするという素晴らしい仕様なので、既にローカルで拡張機能をインストールしていても、再度インストールがされているか確認をしてください。 ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧