dapanda-front-core

このプロジェクトは vue3 + vite + typescript によるフロントエンドアプリケーションを構築するための基本的な枠組みを提供します。

node, npm の導入

最新のものを導入します。プロジェクト作成時点（2022/04/12）では、以下のものを MacPorts で導入しました。

parrot:dapanda-front-core tueda$ node -v
v17.9.0
parrot:dapanda-front-core tueda$ npm -v
8.6.0

nvm の導入

便利そうなので nvm でも良いかも。node と npm のバージョンを合わせてくれるので便利。

nvm を MacPorts で導入後、~/.bash_profile に

# nvm
source /opt/local/share/nvm/init-nvm.sh

と追記。初回は手動でソース実行。

最新 lts が v16.15.1 だったので（2022/06/29時点）、上田の手元では v17.9.1 と2バージョン入れてみました。

parrot:dapanda-front-core tueda$ nvm ls
       v16.15.1
->      v17.9.1
         system
default -> v17.9.1
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v17.9.1) (default)
stable -> 17.9 (-> v17.9.1) (default)
lts/* -> lts/gallium (-> v16.15.1)

プレビュー

デバグモードで実行

npm run dev

本番モードをローカルプレビュー

npm run build
npm run preview

blancoFramework

コンポーネント、ストア、i18nのラベル定義、VeeValidation 定義は blancoFramework により自動生成されます。

Java 11 の導入

blancoFramework を使用するために、Java 11 を導入しておく必要があります。OpenJDK で良いです。

コンポーネントの作成

画面等のコンポーネントは以下の手順で作成します。

1. コンポーネント定義書の作成
2. ./gradlew meta を実行
3. ./gradlew metaLabels を実行(忘れると LabelsJa、LabelsEn が空になる)
4. 手動作成するソースコードの作成

• 自動生成されるソースコード（blanco/main/typescript 以下に生成）
  • .vue : コンポーネント定義
  • .ts : コンポーネント定義 (composition API)
  • Props.ts : プロパティ定義 (optional)
  • Emits.ts : Emits定義 (optional)
• 手動生成するソースコード (src/ 以下に生成)
  • .html : テンプレート (optional)
  • Render.ts : render 関数 (optional, テンプレートを使用しない場合は必須)
  • .scss : スタイルシート (optional)
  • Setup.ts : setup 関数 (optional)
  • Data.ts : data 関数 (optional, 非推奨)

Store の作成

ストアの定義は以下の手順で行います。

1. ストア定義書の作成
2. ./gradlew meta の実行
3. 手動作成するソースコードの作成

• 自動生成されるソースコード（blanco/main/typescript 以下に生成）
  • .ts : store 定義
  • DefineActions.ts : actions 定義
  • DefineGetters.ts : getters 定義
  • State.ts : state 定義
• 手動生成するソースコード (src/ 以下に生成)
  • Actions.ts : actions 実装
  • Getters.ts : getters 実装

i18n ラベル定義

作成中

VeeValidate バリデーション定義

作成中

プロジェクトの生成

基本的には git clone して npm install すれば良いだけなので以下の情報は不要となるはずですが、今後のために記述しておきます。

vite プロジェクトの初期化

node v7 以降で新しいviteプロジェクトを作成する場合は以下のコマンドでプロジェクトを初期化します。

npm init vite@latest dapanda-front-core -- --template vue-ts

vue-ts を指定していますが、結局、画面上で選択肢が表示されるので選択する必要があります。 init が終わったら、ディレクトリに入って以下を実行します。（ git clone などで既存のプロジェクトを取得した場合はここから始めます。）

npm install

以下のコマンドでdebugモードでローカルサーバが立ち上がり、http://localhost:3000/ で動作確認ができます。

npm run dev

tsconfig.json の編集

この状態で npm run build を実行すると、isolatedModules フラグに関わるエラーが発生します。これは、node_modules に配置された既存のコードまでチェックしてしまうために発生します。isolatedModules 自体は true としておく事が必須とされているので、エラーを避ける為に "skipLibCheck": true を tsconfig.json に追記します。

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

参考: https://github.com/vitejs/vite/issues/5814#issuecomment-1021556882

npm で導入するパッケージの確認

開発開始時には vue 関連のパッケージは 3 未対応のものがある (vuetifyとか)ので、@latest でインス取るしていいかどうか確認する必要がある。

$ npm view vuetify
（中略）
dist-tags:
latest: 2.6.4       next: 3.0.0-beta.1  stable: 1.5.24

この場合は

npm install vuetify@next

とする必要がある。

@types/node の導入

npm install --save-dev @types/node

sass の導入

npm install sass@latest

vuetify (3.0.0 beta) の導入

• 4/23 時点では 3.0.0.beta.1 が最新。
  • ただし vue add vuetify だけでは beta.0 が入る
  • main.ts, App.vue, HelloWorld.vue, vite.config.ts などが上書きされるので注意。
  • tsconfig.json で "esModuleInterop": true を設定しているが、vite.config.ts で @vuetify/vite-plugin で default export が無いエラーになる（IntelliJ の不具合？）
    • 参考: https://numb86-tech.hatenablog.com/entry/2020/07/11/160159
    • コマンドラインからはコンパイルできるので一旦無視しておく(@ts-ignoreを付与)
• vite プロジェクトであっても、導入に vue-cli (5.0 later) が必要

sudo npm install -g @vue/cli

$ vue --version
@vue/cli 5.0.4

vue add vuetify

? Choose a preset:
  Configure (advanced)
  Default (recommended)
❯ Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  Vuetify 3 Preview (Vuetify 3)

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

npm install [email protected]

vue-router の導入

npm install vue-router@latest 

pinia の導入

npm install pinia@latest

vue-i18n の導入

npm install vue-i18n@latest

vee-validate の導入

npm install vee-validate@latest
npm install @vee-validate/rules@latest
npm install @vee-validate/i18n@latest

axios の導入

npm install axios

これで @latest が入った模様。0.27.1。

uuidv4

uuidv4 が、uuid に取り込まれた模様？

npm install uuid
npm install --save-dev @types/uuid

として、使う時は

import { v4 as uuidv4 } from "uuid"
const id = uuidv4();

とかする。

icon, font関連

npm install -D @mdi/js
npm install -D @mdi/font

library-mode

• https://vitejs.dev/guide/build.html#library-mode
• https://blog.potproject.net/2022/03/02/vite-vue-react-svelte-js-library-mode
• https://zenn.dev/drop_table_user/articles/7b043bef6cec29

gradle の導入

Mac の場合

sudo port install [email protected]

初期化

parrot:dapanda-front-core tueda$ gradle init
Starting a Gradle Daemon (subsequent builds will be faster)

Select type of project to generate:
  1: basic
  2: application
  3: library
  4: Gradle plugin
Enter selection (default: basic) [1..4] 1

Select build script DSL:
  1: Groovy
  2: Kotlin
Enter selection (default: Groovy) [1..2] 2

Generate build using new APIs and behavior (some features may change in the next

Project name (default: dapanda-front-core):

> Task :init
Get more help with your project: Learn more about Gradle by exploring our samples at https://docs.gradle.org/7.4.2/samples

BUILD SUCCESSFUL in 3m 38s
2 actionable tasks: 2 executed

build.gradle を設定

blancoの自動生成用。

FAQ

Component is missing template or render function ERROR

• 親コンポーネントの TS ファイルで、コンポーネント import 時に .vue が抜けて居る

import HelloVuetify from "@/sample/pages/HelloVuetify/HelloVuetify";

これだと ts ファイルを見に行く

import HelloVuetify from "@/sample/pages/HelloVuetify/HelloVuetify.vue";

コンポーネントをimportするならこうでないといけない。