Web 開発再入門 #20 ― Vue.js、Vuetify、axios
fmockup
★ 本ページは工事中 ★
はじめに
Web アプリケーションのクライアント・サイド（ブラウザー・サイド）を開発します。
直観的で学習コストが低いといわれる Vue.js を使用します。
レスポンシブな画面を実現するために Vuetify を使用します。
Ajax を実現するために、axios を使用します。axios を使用することで、HTML 画面から Web サーバーの Web API を呼び出すことができます。
レスポンシブ画面：Web アプリケーションにおいて、ユーザーが使用するデバイスに応じて、自動的に画面の表示を最適化する画面のこと。
Ajax：Asynchronous JavaScript + XML
ディレクトリ・ファイル構成
D:\
└ Developments\
└ Workspace\
└ fmockup\
├ build\
├ sql\
├ src\
├ vue-vite\
│ ├ node_modules\
│ ├ pages\ ← コレ
│ │ ├ commons\ ← コレ
│ │ │ ├ header_for_login.vue ← コレ
│ │ │ ├ header.vue ← コレ
│ │ │ └ token.vue ← コレ
│ │ ├ dialogs\
│ │ ├ login_expired.html ← コレ
│ │ ├ login_expired.js ← コレ
│ │ ├ login_expired.vue ← コレ
│ │ ├ login.html ← コレ
│ │ ├ login.js ← コレ
│ │ └ login.vue ← コレ
│ ├ public\
│ │ ├ texts\
│ │ │ ├ text_en.json ← コレ
│ │ │ ├ text_ja.json ← コレ
│ │ │ └ text_zh-CN.json ← コレ
│ │ └ favicon.ico ← コレ
│ ├ package.json ← コレ
│ └ vite.config.js ← コレ
└ WinSW.NET-nnn\
ファイルの文字コード
UTF-8、Unix 改行（LF）でよいように思います。
Vue Vite プロジェクトの作成
- コマンド・プロントで Vue-vite プロジェクトを作成する。
コマンド・プロンプト
C:\Users\xxxx> D: D:\> cd D:\Developments\Workspace\fmockup D:\Developments\Workspace\fmockup> npm create vue Project name: ... vue-vite ← フォルダー名にもなる Add TypeScript? ... No Add JSX Support? ... No Add Vue Router for Single Page Application development? ... No / Yes ← No Add Pinia for state management? ... No / Yes ← No Add Vitest for Unit Testing? ... No Add an End-to-End Testing Solution? » No Add ESLint for code quality? ... Yes Add Prettier for code formatting? ... No D:\Developments\Workspace\fmockup> cd vue-vite D:\Developments\Workspace\fmockup\vue-vite> npm add vuetify D:\Developments\Workspace\fmockup\vue-vite> npm install @mdi/font D:\Developments\Workspace\fmockup\vue-vite> npm install axios D:\Developments\Workspace\fmockup\vue-vite> exit
フォルダーの作成
- エクスプローラーで、フォルダー “D:\Developments\Workspace\fmockup\vue-vite\pages”、“D:\Developments\Workspace\fmockup\vue-vite\pages\commons” を作成する。
ファイルの作成
-
テキスト・エディターで、ファイル “header_for_login.vue”、“header.vue”、“token.vue” を作成する。
各画面の共通画面コンポーネントとなります。header_for_login.vueheader.vuetoken.vue -
テキスト・エディターで、ファイル “login.html”、“login.js”、“login.vue” を作成する。
ログイン画面になります。login.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fmockup</title> </head> <body> <div id="app"></div> <script type="module" src="./login.js"></script> </body> </html>login.jsimport { createApp } from 'vue' import App from './login.vue' import 'vuetify/styles' import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' import { aliases, mdi } from 'vuetify/iconsets/mdi' import '@mdi/font/css/materialdesignicons.css' const vuetify = createVuetify({ components, directives, icons: { defaultSet: 'mdi', aliases, sets: { mdi, } }, }) const app = createApp(App) app.use(vuetify) app.mount('#app')login.vue<template> <v-app> <common_header_for_login :logoutButton="logoutButton" @header_event="receive_header" /> <div v-if="display == ''"> <v-main> </v-main> </div> <div v-if="display == 'error'"> <v-main> <v-container fluid> <v-row no-gutters> <v-col><div style="color: red;">{{ message }}</div></v-col> </v-row> </v-container> </v-main> </div> <div v-if="display == 'normal'"> <v-main> <v-container fluid> <v-row no-gutters> <v-col><h3 class="display-1">{{ text_body_title }}</h3></v-col> </v-row> <v-row no-gutters> <v-col><div style="color: red;">{{ message }}</div></v-col> </v-row> <v-row no-gutters> <v-col> <v-form> <v-container fluid> <v-row no-gutters> <v-col :cols="field_md"> <div style="font-size: small; color: red;">{{ messages.userName }}</div> <v-text-field autocomplete="off" prepend-icon="mdi-account" clearable :label="text_form_userId" v-model="userName" /> </v-col> </v-row> <v-row no-gutters> <v-col :cols="field_md"> <div style="font-size: small; color: red;">{{ messages.password }}</div> <v-text-field autocomplete="off" prepend-icon="mdi-lock" clearable :label="text_form_password" v-model="password" v-bind:type="showPassword ? 'text' : 'password'" v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = ! showPassword" /> </v-col> </v-row> <v-row no-gutters> <v-col cols="auto"> <v-btn variant="outlined" color="success" @click="login()" :loading="loading" style="text-transform: none">{{ text_form_login }}</v-btn> </v-col> </v-row> </v-container> </v-form> </v-col> </v-row> </v-container> </v-main> </div> </v-app> <common_texts @texts_event="receive_texts" /> </template> <script setup> import axios from 'axios' import { ref } from 'vue' const message = ref('') const messages = ref({ 'userName': '', 'password': '', }) const field_md = ref(0) const field_lg = ref(0) const width = window.innerWidth if (width < 600) { field_md.value = 12 field_lg.value = 12 } else if (width < 1024) { field_md.value = 6 field_lg.value = 10 } else { field_md.value = 4 field_lg.value = 8 } const loading = ref(true) const display = ref('') const logoutButton = ref(false) const text_body_title = ref('') const text_form_userId = ref('') const text_form_password = ref('') const text_form_login = ref('') import common_texts from './commons/texts.vue' function receive_texts(texts_status, texts_message, texts_value) { if (texts_status == 'action-ok') { const texts_json = texts_value text_body_title.value = texts_json.login_body_title text_form_userId.value = texts_json.login_form_userId text_form_password.value = texts_json.login_form_password text_form_login.value = texts_json.login_form_login } else { display.value = 'error' message.value = texts_message } } import common_header_for_login from './commons/header_for_login.vue' function receive_header(header_status, header_message) { if (header_status != 'action-ok') { display.value = 'error' message.value = header_message } } const showPassword = ref(false) const userName = ref('') const password = ref('') const formData = new FormData() axios.post('/session/unauth', formData) .then (function(response) { ; }) .catch (function(error) { message.value = 'Network trouble has occurred.' }) async function login() { loading.value = true const formData = new FormData() formData.append('userName', userName.value != null ? userName.value : '') formData.append('password', password.value != null ? password.value : '') await axios.post('/session/auth', formData) .then (function(response) { if (response.data.status == 'action-ok-expired') { window.location.href = '/pages/login_expired.html' return } else if (response.data.status == 'action-ok') { window.location.href = '/pages/home.html' return } else { message.value = response.data.message messages.value = response.data.messageMap } }) .catch (function(error) { message.value = 'Network trouble has occurred.' }) loading.value = false return } loading.value = false if (display.value == '') { display.value = 'normal' } </script>
3. テキスト・エディターで、ファイル “login_expired.html”、“login_expired.js”、“login_expired.vue” を作成する。
初回にログインした後の画面、または、パスワード期限切れの画面になります。
html:login_expired.html
js:login_expired.js
vue:login_expired.vue
- テキスト・エディターで、ファイル “text_en.json”、“text_ja.json”、“text_zh-CN.json” を作成する。
text_en.json
{ "comment_1": "--", "comment_2": "-- fmockup HTML Strings.", "comment_3": "--", "comment_4": "-- Do not write comma at last line.", "comment_5": "--", "common_header_title": "fmockup", "common_header_form_logout": "Logout", "common_footer_company": "Xxxx Technologies Co., Ltd.", "common_menu_home": "Home", "common_menu_xxxx": "ＸＸＸＸ", "common_menu_yyyy": "ＹＹＹＹ", "common_menu_zzzz": "ＺＺＺＺ", "common_menu_user_role": "User / Role", "about_tab_home": "Home", "about_tab_password": "Password", "about_tab_about": "About", "about_notice": "Do not display information in here that threatens security. for example: version information.", "home_tab_home": "Home", "home_tab_password": "Password", "home_tab_about": "About", "home_welcome": "Welcome to the fmockup.", "login_body_title": "Login", "login_form_userId": "User ID", "login_form_password": "Password", "login_form_login": "Login", "login_expired_body_title": "Change Password", "login_expired_form_currentPassword": "Current Password", "login_expired_form_newPassword": "New Password", "login_expired_form_confirmPassword": "Confirm Password", "login_expired_form_save": "Save", "login_expired_form_cancel": "Cancel", "password_tab_home": "Home", "password_tab_password": "Password", "password_tab_about": "About", "password_form_currentPassword": "Current Password", "password_form_newPassword": "New Password", "password_form_confirmPassword": "Confirm Password", "password_form_save": "Save", "password_form_cancel": "Cancel", "password_notice_change": "If change your user's password, you have to use New Password in next Login.", "role_dialog_title_add": "Add Role", "role_dialog_title_modify": "Modify Role", "role_dialog_title_drop": "Drop Role", "role_dialog_form_roleName": "Role Name", "role_dialog_form_remark": "Remark", "role_dialog_form_add": "Add", "role_dialog_form_modify": "Modify", "role_dialog_form_drop": "Drop", "role_dialog_form_cancel": "Cancel", "role_dialog_notice_sure": "Are you sure?", "role_tran_dialog_title_assign": "Assign Transaction", "role_tran_dialog_title_unassign": "Unassign Transaction", "role_tran_dialog_form_roleName": "Role Name", "role_tran_dialog_form_assign": "Assign", "role_tran_dialog_form_unassign": "Unassign", "role_tran_dialog_form_cancel": "Cancel", "role_tran_dialog_notice_sure": "Are you sure?", "role_list_tab_user_list": "User List", "role_list_tab_role_list": "Role List", "user_dialog_title_add": "Add User", "user_dialog_title_modify": "Modify User", "user_dialog_title_drop": "Drop User", "user_dialog_form_userId": "User ID", "user_dialog_form_newPassword": "New Password", "user_dialog_form_confirmPassword": "Confirm Password", "user_dialog_form_remark": "Remark", "user_dialog_form_add": "Add", "user_dialog_form_modify": "Modify", "user_dialog_form_drop": "Drop", "user_dialog_form_cancel": "Cancel", "user_dialog_notice_change": "If change its user's password, its User Account will be locked.", "user_dialog_notice_sure": "Are you sure?", "user_role_dialog_title_assign": "Assign Role", "user_role_dialog_title_unassign": "Unassign Role", "user_role_dialog_form_userId": "User ID", "user_role_dialog_form_assign": "Assign", "user_role_dialog_form_unassign": "Unassign", "user_role_dialog_form_cancel": "Cancel", "user_role_dialog_notice_sure": "Are you sure?", "user_list_tab_user_list": "User List", "user_list_tab_role_list": "Role List", "xxxx_dialog_title_add": "Add Xxxx", "xxxx_dialog_title_modify": "Modify Xxxx", "xxxx_dialog_title_drop": "Drop Xxxx", "xxxx_dialog_form_name": "Xxxx Name", "xxxx_dialog_form_flag": "Xxxx Flag", "xxxx_dialog_form_value": "Xxxx Value", "xxxx_dialog_form_remark": "Remark", "xxxx_dialog_form_add": "Add", "xxxx_dialog_form_modify": "Modify", "xxxx_dialog_form_drop": "Drop", "xxxx_dialog_form_cancel": "Cancel", "xxxx_dialog_notice_sure": "Are you sure?", "xxxx_list_tab_xxxx_list": "Xxxx List", "yyyy_dialog_title_add": "Add Yyyy", "yyyy_dialog_title_modify": "Modify Yyyy", "yyyy_dialog_title_drop": "Drop Yyyy", "yyyy_dialog_form_name": "Yyyy Name", "yyyy_dialog_form_flag": "Yyyy Flag", "yyyy_dialog_form_value": "Yyyy Value", "yyyy_dialog_form_remark": "Remark", "yyyy_dialog_form_add": "Add", "yyyy_dialog_form_modify": "Modify", "yyyy_dialog_form_drop": "Drop", "yyyy_dialog_form_cancel": "Cancel", "yyyy_dialog_notice_sure": "Are you sure?", "yyyy_list_tab_yyyy_list": "Yyyy List", "zzzz_dialog_title_add": "Add Zzzz", "zzzz_dialog_title_modify": "Modify Zzzz", "zzzz_dialog_title_drop": "Drop Zzzz", "zzzz_dialog_form_name": "Zzzz Name", "zzzz_dialog_form_flag": "Zzzz Flag", "zzzz_dialog_form_value": "Zzzz Value", "zzzz_dialog_form_remark": "Remark", "zzzz_dialog_form_add": "Add", "zzzz_dialog_form_modify": "Modify", "zzzz_dialog_form_drop": "Drop", "zzzz_dialog_form_cancel": "Cancel", "zzzz_dialog_notice_sure": "Are you sure?", "zzzz_list_tab_zzzz_list": "Zzzz List", "comment_9": "最后行" }text_ja.json{ "comment_1": "--", "comment_2": "-- fmockup HTML Strings.", "comment_3": "--", "comment_4": "-- 最終行にコンマを付けてはならない。", "comment_5": "--", "common_header_title": "fmockup", "common_header_form_logout": "ログアウト", "common_footer_company": "ＸＸＸＸテクノロジーズ株式会社", "common_menu_home": "ホーム", "common_menu_xxxx": "ＸＸＸＸ", "common_menu_yyyy": "ＹＹＹＹ", "common_menu_zzzz": "ＺＺＺＺ", "common_menu_user_role": "ユーザー・ロール", "about_tab_home": "ホーム", "about_tab_password": "パスワード", "about_tab_about": "アバウト", "about_notice": "ここにセキュリティを脅かす情報を表示してはならない。例えばバージョン情報。", "home_tab_home": "ホーム", "home_tab_password": "パスワード", "home_tab_about": "アバウト", "home_welcome": "fmockup へようこそ。", "login_body_title": "ログイン", "login_form_userId": "ユーザー ID", "login_form_password": "パスワード", "login_form_login": "ログイン", "login_expired_body_title": "パスワード変更", "login_expired_form_currentPassword": "現パスワード", "login_expired_form_newPassword": "新パスワード", "login_expired_form_confirmPassword": "パスワード確認", "login_expired_form_save": "保存", "login_expired_form_cancel": "キャンセル", "password_tab_home": "ホーム", "password_tab_password": "パスワード", "password_tab_about": "アバウト", "password_form_currentPassword": "現パスワード", "password_form_newPassword": "新パスワード", "password_form_confirmPassword": "パスワード確認", "password_form_save": "保存", "password_form_cancel": "キャンセル", "password_notice_change": "パスワードを変更すると、次回のログインから新しいパスワードを使用する必要があります。", "role_dialog_title_add": "ロール追加", "role_dialog_title_modify": "ロール更新", "role_dialog_title_drop": "ロール削除", "role_dialog_form_roleName": "ロール名", "role_dialog_form_remark": "コメント", "role_dialog_form_add": "追加", "role_dialog_form_modify": "更新", "role_dialog_form_drop": "削除", "role_dialog_form_cancel": "キャンセル", "role_dialog_notice_sure": "よろしいですか？", "role_tran_dialog_title_assign": "トランザクション割当て", "role_tran_dialog_title_unassign": "トランザクション解除", "role_tran_dialog_form_roleName": "ロール名", "role_tran_dialog_form_assign": "割当て", "role_tran_dialog_form_unassign": "解除", "role_tran_dialog_form_cancel": "キャンセル", "role_tran_dialog_notice_sure": "よろしいですか？", "role_list_tab_user_list": "ユーザーリスト", "role_list_tab_role_list": "ロールリスト", "user_dialog_title_add": "ユーザー追加", "user_dialog_title_modify": "ユーザー更新", "user_dialog_title_drop": "ユーザー削除", "user_dialog_form_userId": "ユーザー ID", "user_dialog_form_newPassword": "新パスワード", "user_dialog_form_confirmPassword": "パスワード確認", "user_dialog_form_remark": "コメント", "user_dialog_form_add": "追加", "user_dialog_form_modify": "更新", "user_dialog_form_drop": "削除", "user_dialog_form_cancel": "キャンセル", "user_dialog_notice_change": "ユーザーのパスワードを変更すると、そのユーザーのアカウントはロックされます。", "user_dialog_notice_sure": "よろしいですか？", "user_role_dialog_title_assign": "ロール割当て", "user_role_dialog_title_unassign": "ロール解除", "user_role_dialog_form_userId": "ユーザー ID", "user_role_dialog_form_assign": "割当て", "user_role_dialog_form_unassign": "解除", "user_role_dialog_form_cancel": "取消", "user_role_dialog_notice_sure": "よろしいですか？", "user_list_tab_user_list": "ユーザーリスト", "user_list_tab_role_list": "ロールリスト", "xxxx_dialog_title_add": "ＸＸＸＸ追加", "xxxx_dialog_title_modify": "ＸＸＸＸ更新", "xxxx_dialog_title_drop": "ＸＸＸＸ削除", "xxxx_dialog_form_name": "ＸＸＸＸ名", "xxxx_dialog_form_flag": "ＸＸＸＸフラグ", "xxxx_dialog_form_value": "ＸＸＸＸ値", "xxxx_dialog_form_remark": "コメント", "xxxx_dialog_form_add": "追加", "xxxx_dialog_form_modify": "更新", "xxxx_dialog_form_drop": "削除", "xxxx_dialog_form_cancel": "キャンセル", "xxxx_dialog_notice_sure": "よろしいですか？", "xxxx_list_tab_xxxx_list": "ＸＸＸＸリスト", "yyyy_dialog_title_add": "ＹＹＹＹ追加", "yyyy_dialog_title_modify": "ＹＹＹＹ更新", "yyyy_dialog_title_drop": "ＹＹＹＹ削除", "yyyy_dialog_form_name": "ＹＹＹＹ名", "yyyy_dialog_form_flag": "ＹＹＹＹフラグ", "yyyy_dialog_form_value": "ＹＹＹＹ値", "yyyy_dialog_form_remark": "コメント", "yyyy_dialog_form_add": "追加", "yyyy_dialog_form_modify": "更新", "yyyy_dialog_form_drop": "削除", "yyyy_dialog_form_cancel": "キャンセル", "yyyy_dialog_notice_sure": "よろしいですか？", "yyyy_list_tab_yyyy_list": "ＹＹＹＹリスト", "zzzz_dialog_title_add": "ＺＺＺＺ追加", "zzzz_dialog_title_modify": "ＺＺＺＺ更新", "zzzz_dialog_title_drop": "ＺＺＺＺ削除", "zzzz_dialog_form_name": "ＺＺＺＺ名", "zzzz_dialog_form_flag": "ＺＺＺＺフラグ", "zzzz_dialog_form_value": "ＺＺＺＺ値", "zzzz_dialog_form_remark": "コメント", "zzzz_dialog_form_add": "追加", "zzzz_dialog_form_modify": "更新", "zzzz_dialog_form_drop": "削除", "zzzz_dialog_form_cancel": "キャンセル", "zzzz_dialog_notice_sure": "よろしいですか？", "zzzz_list_tab_zzzz_list": "ＺＺＺＺリスト", "comment_9": "最后行" }text_zh-CN.json{ "comment_1": "--", "comment_2": "-- fmockup HTML Strings.", "comment_3": "--", "comment_4": "-- 不允许在最后行里填写顿号。", "comment_5": "--", "common_header_title": "fmockup", "common_header_form_logout": "注销", "common_footer_company": "ＸＸＸＸ技术有限公司", "common_menu_home": "主页", "common_menu_xxxx": "ＸＸＸＸ", "common_menu_yyyy": "ＹＹＹＹ", "common_menu_zzzz": "ＺＺＺＺ", "common_menu_user_role": "用户・角色", "about_tab_home": "主页", "about_tab_password": "密码", "about_tab_about": "关于", "about_notice": "在这里不允许显示出信息安全风险的信息。比如版本信息。", "home_tab_home": "主页", "home_tab_password": "密码", "home_tab_about": "关于", "home_welcome": "欢迎来到 fmockup。", "login_body_title": "登录", "login_form_userId": "用户 ID", "login_form_password": "密码", "login_form_login": "登录", "login_expired_body_title": "更改密码", "login_expired_form_currentPassword": "现密码", "login_expired_form_newPassword": "新密码", "login_expired_form_confirmPassword": "密码确认", "login_expired_form_save": "保存", "login_expired_form_cancel": "取消", "password_tab_home": "主页", "password_tab_password": "密码", "password_tab_about": "关于", "password_form_currentPassword": "现密码", "password_form_newPassword": "新密码", "password_form_confirmPassword": "密码确认", "password_form_save": "保存", "password_form_cancel": "取消", "password_notice_change": "如果更新了密码，下次就在登录时需要用新密码了。", "role_dialog_title_add": "角色追加", "role_dialog_title_modify": "角色更新", "role_dialog_title_drop": "角色删除", "role_dialog_form_roleName": "角色名", "role_dialog_form_remark": "注释", "role_dialog_form_add": "追加", "role_dialog_form_modify": "更新", "role_dialog_form_drop": "删除", "role_dialog_form_cancel": "取消", "role_dialog_notice_sure": "确定了吗？", "role_tran_dialog_title_assign": "绑定事务", "role_tran_dialog_title_unassign": "解开事务", "role_tran_dialog_form_roleName": "事务名", "role_tran_dialog_form_assign": "绑定", "role_tran_dialog_form_unassign": "解开", "role_tran_dialog_form_cancel": "取消", "role_tran_dialog_notice_sure": "确定了吗？", "role_list_tab_user_list": "用户清单", "role_list_tab_role_list": "角色清单", "user_dialog_title_add": "用户追加", "user_dialog_title_modify": "用户更新", "user_dialog_title_drop": "用户删除", "user_dialog_form_userId": "用户 ID", "user_dialog_form_newPassword": "新密码", "user_dialog_form_confirmPassword": "密码确认", "user_dialog_form_remark": "注释", "user_dialog_form_add": "追加", "user_dialog_form_modify": "更新", "user_dialog_form_drop": "删除", "user_dialog_form_cancel": "取消", "user_dialog_notice_change": "如果更新用户密码，这账号就被锁定。", "user_dialog_notice_sure": "确定了吗？", "user_role_dialog_title_assign": "绑定角色", "user_role_dialog_title_unassign": "解开角色", "user_role_dialog_form_userId": "用户 ID", "user_role_dialog_form_assign": "绑定", "user_role_dialog_form_unassign": "解开", "user_role_dialog_form_cancel": "取消", "user_role_dialog_notice_sure": "确定了吗？", "user_list_tab_user_list": "用户清单", "user_list_tab_role_list": "角色清单", "xxxx_dialog_title_add": "ＸＸＸＸ追加", "xxxx_dialog_title_modify": "ＸＸＸＸ更新", "xxxx_dialog_title_drop": "ＸＸＸＸ删除", "xxxx_dialog_form_name": "ＸＸＸＸ名", "xxxx_dialog_form_flag": "ＸＸＸＸ旗标", "xxxx_dialog_form_value": "ＸＸＸＸ值", "xxxx_dialog_form_remark": "注释", "xxxx_dialog_form_add": "追加", "xxxx_dialog_form_modify": "更新", "xxxx_dialog_form_drop": "删除", "xxxx_dialog_form_cancel": "取消", "xxxx_dialog_notice_sure": "确定了吗？", "xxxx_list_tab_xxxx_list": "ＸＸＸＸ清单", "yyyy_dialog_title_add": "ＹＹＹＹ追加", "yyyy_dialog_title_modify": "ＹＹＹＹ更新", "yyyy_dialog_title_drop": "ＹＹＹＹ删除", "yyyy_dialog_form_name": "ＹＹＹＹ名", "yyyy_dialog_form_flag": "ＹＹＹＹ旗标", "yyyy_dialog_form_value": "ＹＹＹＹ值", "yyyy_dialog_form_remark": "注释", "yyyy_dialog_form_add": "追加", "yyyy_dialog_form_modify": "更新", "yyyy_dialog_form_drop": "删除", "yyyy_dialog_form_cancel": "取消", "yyyy_dialog_notice_sure": "确定了吗？", "yyyy_list_tab_yyyy_list": "ＹＹＹＹ清单", "zzzz_dialog_title_add": "ＺＺＺＺ追加", "zzzz_dialog_title_modify": "ＺＺＺＺ更新", "zzzz_dialog_title_drop": "ＺＺＺＺ删除", "zzzz_dialog_form_name": "ＺＺＺＺ名", "zzzz_dialog_form_flag": "ＺＺＺＺ旗标", "zzzz_dialog_form_value": "ＺＺＺＺ值", "zzzz_dialog_form_remark": "注释", "zzzz_dialog_form_add": "追加", "zzzz_dialog_form_modify": "更新", "zzzz_dialog_form_drop": "删除", "zzzz_dialog_form_cancel": "取消", "zzzz_dialog_notice_sure": "确定了吗？", "zzzz_list_tab_zzzz_list": "ＺＺＺＺ清单", "comment_9": "最后行" }
ファイルの編集
- テキスト・エディターで、ファイル “package.json”、“vite.config.js” を編集する。
package.json
{ "name": "vue-vite", "version": "0.0.0", "private": true, "scripts": { "dev": "vite", "build": "vite build --outDir=../src/main/resources/static", ← ココ "preview": "vite preview", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" }, "dependencies": { "axios": "^1.5.1", "vue": "^3.3.4", "vuetify": "^3.3.21" }, "devDependencies": { "@mdi/font": "^7.3.67", "@vitejs/plugin-vue": "^4.3.4", "eslint": "^8.49.0", "eslint-plugin-vue": "^9.17.0", "vite": "^4.4.9" } }vite.config.jsimport { resolve } from 'path'; import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], build: { rollupOptions: { input: { about: resolve(__dirname, './pages/about.html'), home: resolve(__dirname, './pages/home.html'), login: resolve(__dirname, './pages/login.html'), login_expired: resolve(__dirname, './pages/login_expired.html'), password: resolve(__dirname, './pages/password.html'), role_list: resolve(__dirname, './pages/role_list.html'), user_list: resolve(__dirname, './pages/user_list.html'), xxxx_list: resolve(__dirname, './pages/xxxx_list.html'), yyyy_list: resolve(__dirname, './pages/yyyy_list.html'), zzzz_list: resolve(__dirname, './pages/zzzz_list.html'), } } }, })
Vue-Vite プロジェクトのビルド
- コマンド・プロントで、Vue-vite プロジェクトをビルドする。
コマンド・プロンプト
C:\Users\xxxx> D: D:\> cd D:\Developments\Workspace\fmockup\vue-vite D:\Developments\Workspace\fmockup\vue-vite> npm run build D:\Developments\Workspace\fmockup\vue-vite> exit
参考
React vs Vue
Axios から fetch API へリプレース