WindowsでAIプログラミング

Vue.js3(Composition API、Vite、TailwindCSS)とPython(FastAPI)でAI Webアプリの開発①:Vue.js3の環境設定

はじめに

AIで遊ぶとき基本はpythonのFlaskやFastAPIなどで、
フロントエンドとバックエンドの両方を扱っておりまふたが、
Vue.js3のComposition APIを知り、
これはコードが書きやすいと思い
(Options APIは、pythonからプログラミングに入ったおいらにとっては、
まどろっこしくてかなわない、、、
なんで辞書型、、、
thisがわかりづらいのは、
その構造だと、
あたりまえだろ、、、
などなど)、
最近は、フロントエンドをVue.js3でつくって(俗に言うSPAでふね)、
FlaskやFastAPIのテンプレートに当て込んでおりまふ。
備忘録もかねておいらの開発手法を公開していきまふ(‘ω’)ノ

開発環境

  • Windows11
  • VSCode(導入方法は、省略させていただきまふm(__)m)
  • node.js (導入方法は、省略させていただきまふm(__)m)
  • Vue.js3(Composition API)
  • Vite
  • Tailwind
  • Python(FastAPI or Flask)

Vite

Viteを使ってVue.jsをインストール

power shellなどでコマンド実行

下記の様に、開発環境の設定が始まりまふ

とりあえず、フォルダ名は、『penta_vite』という名前で進ませていただきまふ。

Vueを選択しまふ

JavaScriptを選択しまふ(Typescriptは説明が長くなるので、、、割愛m(__)m)

カレントディレクトリを作成したフォルダへ移動

VSCodeの起動

VSCodeからターミナルを起動しまふ

インストール

これで基本的なフロントエンドの初期設定が完了しまふ(‘ω’)ノ

仮想環境サーバー起動

npm run dev

TailwindCSS

要らない部分の削除

App.vue

cssが被るので、styleを削除します。

Tailwindのインストール、設定

関連ライブラリをインストール

TailwindCSSの初期化

tailwind.config.cjsに追記

contentの箇所に追記

style.cssファイルを書き換え

src/main.jsは、style.cssをインポートしまふ。これを書き換えまふ

この記事を書いた人
化学系で博士号を取得したが、 あるとき、これからの時代はプログラミング!、と目覚める。 pythonを用いてデータ解析や機械学習に没頭。 最近は、フロントにVue.js、バックにFastAPIを用いて、 PytorchやTensorflowを実装したWebサービスを開発中。☆('ω')☆
SNSでフォローする

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA