Vue3利用の基礎情報まとめ

備忘録的にVue.jsをインストールして基本的な環境を構築するまでに必要になった情報をまとめておきます。

Vue-cliのインストール

簡単に利用するにはCDN経由で利用するのが便利なのですが、bootstrapやvue-routerを使おうと思うとやはりVue-cliを使うのが便利です。

vue-routerのインストール

画面遷移を行おうと思うと必須。

Bootstrapの利用

デザインを簡単に整えるのに便利なのでいつも使っています。
bootstrap-vueはどうもVue3ではうまく動きませんでした。まだアルファ版ですがbootstrap-vue-3というものがありますのでそちらを利用してみました。

※その後、bootstrap-vue-3はbootstrap-vueプロジェクトに移行し、bootstrap-vue-nextパッケージとなったようです。

npm run serve時に利用するポートを変更する

Docker上でVue.jsを利用しようと思ったのでポートバインドをするのに設定変更しました。

vueのインストール

ということでまずは以下を実行してvue3と必要なライブラリをインストール

$ npm install -g @vue/cli
$ vue create [プロジェクト名]
$ cd ./[プロジェクト名]
$ npm install bootstrap-vue-next

vue-routerとbootstrap-vueの利用設定

src/main.js

import router from './router'
import {createApp} from 'vue'
import App from './App.vue'
import BootstrapVue3 from 'bootstrap-vue-3'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(router)
app.use(BootstrapVue3)
app.mount('#app')

src/router.js

import {createRouter,createWebHashHistory} from 'vue-router'
import [コンポーネント名] from './[コンポーネントファイル].vue'
・・・

const routes = [
  {path:'/[設定したいページへのパス]',component:[コンポーネント名]},
  ・・・
]

const router = createRouter({
  history:createWebHashHistory(),
  routes,
})

export default router;

フロントエンド開発開始

あとは常の通り、npm run serveで開発用のサーバを起動して開発開始。

npm run buildで./distフォルダにビルド済みファイルが出来上がります。

大体半日くらいかけてやっとVue3の環境を構築できました。
もっと短い時間で構築できるといいなと思ってます。