異端開発室

エラー概要 Vue Router で router.push や router.replace を連続で同じパスに実行すると、次のようなコンソールエラーが発生します。 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location "/xxx" at createRouterError (vue-router.esm.js:...) これは「現在の場所と同一のルートへ再遷移しようとしたため、Vue Router が重 ...

VueQuillは、Vue 3向けに設計された強力なリッチテキストエディターコンポーネントであり、Quillエディターを基盤としています。このガイドでは、VueQuillの基本的なインストールから高度なカスタマイズ方法まで詳しく解説します。 VueQuillを選択する理由 VueQuillは以下の特長を持っています： スムーズな統合：Vue 3専用設計で、プロジェクトへの導入が簡単です。 多様 ...

UniApp (Vue3 + TypeScript) 入門 1. プロジェクトのセットアップ 1.1 プロジェクトの作成と起動 # HBuilderXでの開発を推奨します # sass、TypeScriptなどの必要なプラグインは自動的にインストールされます # 注意: Viteは現在WeChatミニアプリをサポートしておらず、Vue3のテンプレートは複数ルートタグをサポートしていません npx degit dcloudio/uni-preset-vue#vite- ...

ナビゲーションガードの実装 グローバルガード const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'top', component: TopView }, { path: '/profile', name: 'profile', component: ProfileView } ] }) // グローバル前置ガード router.beforeEach((destination, origin) => { if (destination.name === 'profil ...

Vue3アプリケーションでAxiosインターセプターを活用し、再利用可能なrequestモジュールを作成する方法を説明します。 まず、新しいファイルを「httpService.js」として作成し、Axiosをインポートします。 import axios from 'axios'; 次に、カスタム設定を持つAxiosインスタンスを作成し、それを変数clientとして保存します。ここで、タイムアウトやベースURLなどの基本 ...

カスタムディレクティブと高度な機能 ディレクティブの実装 コンポーネント内でのローカルディレクティブ定義: <template> <input type="text" v-select> </template> <script> export default { directives: { select: { mounted(element) { element.select(); } } } } </script> グローバルディレク ...

Node.js環境の準備 Vue 3の開発環境を構築，首先要安装Node.js运行环境。Node.jsの公式ウェブサイトから最新のLTSバージョンをダウンロードしてインストールしてください。インストールが完了したら、コマンドプロンプトまたはターミナルで以下のコマンドを実行して、正常にインストールされているか確認します。 node -v バージョン番号が表示されれば、インストール ...

テンプレート構文 Vue3はHTMLベースのテンプレート構文でDOMとデータを同期します。テンプレートは有効なHTMLで、内部的に最適化されたJavaScriptにコンパイルされます。 データバインディング <script setup> let greeting = "こんにちは Vue3" let userAge = 20 let items = [ {name:"本", cost:1500, qty:2}, {name:"ペン", cost:300, qty:5} ] function ca ...

環境構築と設定方法 LodashはJavaScript開発において、特に配列・オブジェクトの操作を簡素化するための強力なユーティリティライブラリです。npmで簡単に導入できます。 npm install lodash Viteプロジェクトにおける自動インポート設定 unplugin-auto-import を利用することで、毎回import _ from 'lodash'と記述する手間を省けます。 // vite.config.ts import Auto ...

浅いリアクティビティAPI shallowRef shallowRefは、値そのものへの変更のみを追跡し、その値がオブジェクトや配列であっても、その内部プロパティへの変更は追跡しないリアクティブな参照を作成します。 基本的な使い方 import { shallowRef } from 'vue' const shallowState = shallowRef({ count: 0 }) この例では、shallowState.value全体を新しいオブジェクトに置き ...