vue.js | さゆフィクション

vue.jsでAdmin LTEコンポーネントを使って爆速で画面開発する

sayu — Sat, 12 Oct 2024 02:42:19 +0000

vue.jsでAdmin LTEコンポーネントを使ってみます。

Admin LTEコンポーネントを使わせてもらった方が効率的だよね？という考えです。

開発環境は構築済みのものとして進めますので、まだの場合は以下URLを参考にしてくださいー

vue.jsをDockerコンテナ上でローカル開発できるようにする

vue.jsをDockerコンテナ上でローカル開発できるようにしてみます！以下の流れで進めていきます docker-compose.yml作成 Dockerfile作成コンテナ起動コンテナ内でvueプロジェクト作成サーバ起動では早...

vue.jsでAdmin LTEコンポーネントを使う

Admin LTEのインストールをする

vue.jsのプロジェクトにAdmin LTEをインストールします。

以下のコマンドを実行すればOKです。

npm install admin-lte@^3.2 bootstrap jquery popper.js -save

ソースコードを修正する

ソースコードを修正して、Admin LTEを使ってみます。

main.jsの修正

以下のように修正します。こちらは共通設定のため、初回の1回のみ必要な修正です。

＜ファイル名＞

main.js

＜ファイルの中身＞


import { createApp } from 'vue'
import App from './App.vue'

import 'admin-lte/dist/css/adminlte.min.css';
import 'admin-lte/dist/js/adminlte.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

createApp(App).mount('#app');

画面表示用のコード(vueファイル)を修正してAdminLTEを使ってみます

試しに以下のヘッダーを実装してみます。

Main Header Component

AdminLTE v3.2 Documentation

＜ファイル名＞

App.vue

＜ファイルの中身＞

動作確認する

以下のようなヘッダーが表示されれば成功です。

まとめ

vue.jsでAdmin LTEコンポーネントが使えました！！

これから頑張って開発していきますーー

vue.jsをDockerコンテナ上でローカル開発できるようにする

sayu — Sat, 12 Oct 2024 01:47:45 +0000

vue.jsをDockerコンテナ上でローカル開発できるようにしてみます！

以下の流れで進めていきます

docker-compose.yml作成
Dockerfile作成
コンテナ起動
コンテナ内でvueプロジェクト作成
サーバ起動

では早速やってみます！

vue.jsのローカル開発環境構築

docker-compose.ymlファイル作成

＜ファイル名＞

docker-compose.yml

＜ファイルの中身＞


services:
  web:
    build: .
    image: vueweb
    volumes:
      - .:/app
    container_name: 'web'
    ports:
      - '8080:8080'
    tty: true

Dockerfile作成

＜ファイル名＞

Dockerfile

＜ファイルの中身＞


FROM node:22
RUN npm install -g @vue/cli
EXPOSE 8080

コンテナ起動

以下のコマンドでコンテナを立ちあげます

docker-compose up --build

コンテナ内でプロジェクト作成します

まず以下のコマンドでコンテナの中に入ります。

docker-compose exec web bash

次に以下のコマンドでプロジェクトを作成します。

vue create sample

サーバ起動

以下のコマンドでサーバ起動します。

cd sample && npm run serve

動作確認

以下のURLにブラウザからアクセスして画面表示されればOKです！

http://localhost:8080/

以下のような画面が表示されるはずですー

docker-compose.ymlの微調整

vueがコンテナ上で正常に動くようになりましたが、このままですと、コンテナ起動のたびにコンテナ内で「cd sample && npm run serve」を実行する必要があります。

これは面倒なので以下のように、docker-compose.ymlに「cd sample && npm run serve」を追加して、コンテナ起動時にサーバ起動するようにします。

修正後のファイルは以下のようになります。

＜ファイル名＞

docker-compose.yml

＜ファイルの中身＞


services:
  web:
    build: .
    image: vueweb
    volumes:
      - .:/app
    command: sh -c "cd sample && npm run serve"
    container_name: 'web'
    ports:
      - '8080:8080'
    tty: true

まとめ

vue.jsのローカル開発環境構築をして、vue.jsをコンテナ上で動かしてみました。

ここから本格的にvue.jsの開発をしていきます！！

Vue.jsのバージョン3でVue Routerを使用して画面を新規作成する（複数画面構成にする）

sayu — Thu, 10 Oct 2024 05:19:58 +0000

Vue.jsのバージョン3でVue Routerを使用して画面を新規作成してみます。

Vueのインストールからはじめます！

Vueインストール

以下のコマンドでインストールします。

npm install -g @vue/cli

次にプロジェクト作成します。

プロジェクト作成

以下のコマンドで「sample」というプロジェクトを作成します。

vue create sample

→上記コマンド実行時の設定については以下を参照

「Manually select features」を選択してエンター
組み込むモジュールの選択が求められるので、「Router」にチェックを追加してエンター
バージョン選択が求められるので「3.x」を選択してエンター
そのほかはお好みの設定をしてプロジェクト作成

サーバ起動

以下のコマンドで、プロジェクト直下に移動してサーバ起動

 cd sample

 npm run serve

動作確認

以下のURLで画面表示の確認をします。

http://localhost:8080/

問題なく表示されればOKです。

次に画面を追加してみます

画面を追加してみる

フォルダ構成

ざっくり以下の構成になっていて「src/views」と「src/router」配下のファイルを追加・修正することで画面を追加できます。

src/views

→viewファイル格納フォルダ

→配下のテンプレート修正で画面の見た目を修正できる

src/router

→配下のindex.jsでルーティングを追加・変更可能

src/viewsにテンプレートファイルを追加

＜ファイル名＞

TestView.vue

＜ファイルの中身＞

src/routerにルーティングを追加

＜修正するファイル名＞

index.js

＜修正内容＞

以下のように、routesの定義にtestのビューへのルートを追加します。


const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }
]

src/App.vueに新しい画面へのリンクを追加する

＜修正するファイル＞

src/App.vue

＜修正内容＞

以下のようにテストページへのリンクを追加します。

動作確認

以下のURLで画面表示の確認をします。

http://localhost:8080/

以下のような画面が表示されれば成功です！

まとめ

Vue.jsのバージョン3でVue Routerを使用して画面を新規作成してみました。

意外と簡単に作成できましたが、画面の作り込みは大変そうだな〜〜

vue.jsでテキストボックスの内容を強制更新したい場合は「$forceUpdate」を使う

sayu — Sat, 11 Apr 2020 03:07:05 +0000

vue.jsでテキストボックスに入力された値が不正であった場合に、入力値を無視してテキストボックスをカラにしようとしたが、これがなかなか上手くいかなかった。

具体的には、数値を入れるとこに日本語が入れられた場合は、日本語を無視してテキストボックスをカラで更新するみたいな処理がうまく動作しませんでした。

挙動を見るとカラでの更新が上手く行ったり行かなかったり不安定な挙動。。。

そんなときは「$forceUpdate」を使用したら確実に更新できる！ということがわかりました！

「$forceUpdate」にたどり着くまでに半日くらいかかりました。

$forceUpdateについて公式ページに、以下の記載があります。

Vue インスタンスに再描画を強制します。インスタンス自身と slot コンテンツに挿入された子コンポーネントだけで、全ての子コンポーネントに影響しないことに注意してください。

API — Vue.js
Vue.js - The Progressive JavaScript Framework
v2.ja.vuejs.org

$forceUpdateを使うと、強制的に再描画できるということですね！

コピペでできるLaravel + Vue.js + TypeScriptなMacのローカル開発環境

sayu — Fri, 20 Mar 2020 06:14:13 +0000

Laravel + Vue.js + TypeScriptでローカル開発環境を作っていきます。

Laravel + Vue.jsの環境構築は構築は色んなことに情報があると思うので、

より安全な開発を行うことができるTypeScriptを導入したバージョンの環境構築について記載していきます。

コピペでできるのでお試しください。

インストール＆プロジェクト作成

composer create-project laravel/laravel --prefer-dist sample_app
cd sample_app
yarn install
npm i -D vue
npm install vue-template-compiler --save-dev
npm install --save vue-property-decorator

環境設定

tsconfig.jsonを追加

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "resources/assets/ts/**/*"
  ]
}

vue.shims.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

webpack.mix.js

let mix = require('laravel-mix');

mix.ts('resources/assets/ts/app.ts', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

package.json(scripts内のパスのみ修正)

{
    "private": true,
    "scripts": {
        "dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.8.3",
        "vue": "^2.6.11",
        "vue-property-decorator": "^8.4.1",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "webpack": "^4.42.0"
    }
}

resources/assets/sass/app.scss

とりあえず空ファイル作成

resources/views/welcome.blade.php




  
  
  
  
  Laravel

resources/assets/ts/app.ts

import Vue from 'vue';
import bootstrap from './bootstrap';
import AppComponent from './components/App.vue';

bootstrap();

const app = new Vue({
  el: '#app',
  render: h => h(AppComponent)
});

resources/assets/ts/bootstrap.ts

import Axios, { AxiosStatic } from 'axios';

declare global {
  interface Window {
    axios: AxiosStatic;
  }
  interface Element {
    content: string;
  }
}

export default function bootstrap() {

  window.axios = Axios;

  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

  let token = document.head.querySelector('meta[name="csrf-token"]');

  if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }

}

resources/assets/ts/components/App.vue

実行

ターミナルを２つ起動し、それぞれのターミナルで下記のコマンドを打ち込む。

こうする事で、TypeScriptは自動的にコンパイルされる。

npm run watch

php artisan serve

vue.js | さゆフィクション

vue.jsでAdmin LTEコンポーネントを使って爆速で画面開発する

vue.jsでAdmin LTEコンポーネントを使う

Admin LTEのインストールをする

ソースコードを修正する

main.jsの修正

画面表示用のコード(vueファイル)を修正してAdminLTEを使ってみます

動作確認する

まとめ

vue.jsをDockerコンテナ上でローカル開発できるようにする

vue.jsのローカル開発環境構築

docker-compose.ymlファイル作成

Dockerfile作成

コンテナ起動

コンテナ内でプロジェクト作成します

サーバ起動

動作確認

docker-compose.ymlの微調整

まとめ

Vue.jsのバージョン3でVue Routerを使用して画面を新規作成する（複数画面構成にする）

Vueインストール

プロジェクト作成

サーバ起動

動作確認

画面を追加してみる

フォルダ構成

src/viewsにテンプレートファイルを追加

This is an test

src/routerにルーティングを追加

src/App.vueに新しい画面へのリンクを追加する

動作確認

まとめ

vue.jsでテキストボックスの内容を強制更新したい場合は「$forceUpdate」を使う

コピペでできるLaravel + Vue.js + TypeScriptなMacのローカル開発環境

インストール＆プロジェクト作成

環境設定

tsconfig.jsonを追加

vue.shims.d.ts

webpack.mix.js

package.json(scripts内のパスのみ修正)

resources/assets/sass/app.scss

resources/views/welcome.blade.php

resources/assets/ts/app.ts

resources/assets/ts/bootstrap.ts

resources/assets/ts/components/App.vue

{{ message }}

実行