[A-00121]Viteを使ってみる

viteを使ってvue+typescriptのプロジェクトを作成してみたいと思います。

npm公式ページは下記

https://www.npmjs.com/package/vite?activeTab=code

・インストール

npm i vite

・プロジェクトを作成する

任意のディレクトリで下記のコマンドを実行します。

npm init vite@latest

プロジェクト名をvue_vite_test1にし、frameworkをVue、variantをTypeScriptに選択します。

MacBook-Pro:js$ npm init vite@latest
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y) y
✔ Project name: … vue_vite_test1
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /Users/anonymous/Documents/js/vue_vite_test1...

Done. Now run:

  cd vue_vite_test1
  npm install
  npm run dev

作成されたvue_vite_test1に移動してnpmコマンドを実行します。

cd vue_vite_test1
npm install

MacBook-Pro:js$ cd vue_vite_test1/
MacBook-Pro:vue_vite_test1$ npm install

added 43 packages, and audited 44 packages in 10s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm run dev

MacBook-Pro:vue_vite_test1$ npm run dev

> vue_vite_test1@0.0.0 dev
> vite


  VITE v4.4.9  ready in 1256 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

下記のURLにアクセスして動作確認します。

http://localhost:5173/

上記の画面が表示されれば動作確認完了です。

・アプリケーションをカスタマイズしてみる

Vue+TypeScriptの動きを確認する為、上記で表示したアプリケーションを少しいじってみます。

VSCodeでviteで作成したvue_vite_test1を開きます。

App.vueをコピーしてHome.vueを作成し、次にcomponentsディレクトリ配下のHelloWorld.vueをコピーしてSubPage.vueを作成します。

各ソースは下記のように修正します。

<script setup lang="ts">
import SubPage from './components/SubPage.vue'
</script>

<template>
  <SubPage msg="This is SubPage View." />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

<script setup lang="ts">
defineProps<{ msg: string }>()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

次にバックエンドロジックであるmain.tsを下記のとおり修正します。

import { createApp } from 'vue'
import './style.css'
import Home from './Home.vue'

createApp(Home).mount('#app')

修正したらターミナルで下記のコマンドを実行してビルド＆サーバーを起動します。

npm run build
nom run dev

下記のURLにアクセスして画面表示してください。

http://localhost:5173/

上記が表示されれば動作確認完了です。

・ポート番号を変更する

viteアプリのport番号はデフォルトだと5173ですがこれを別のポートに変える方法を記載します。

プロジェクト直下にある[vite.config.ts]を開きます。[plugins]下にserverプロパティを追加します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {       // START
    port:5000     // START〜ENDまでを追記
  }               // END
})

保存して[npm run dev]を実行すると下記のようにポート:5000で起動されます。

MacBook-Pro:vue_vite_test1$ npm run dev

> vue_vite_test1@0.0.0 dev
> vite


  VITE v4.4.9  ready in 1470 ms

  ➜  Local:   http://localhost:5000/
  ➜  Network: use --host to expose
  ➜  press h to show help