vue3 + Bootstrap5

小机城 Azure
小机城

vue3プロジェクト作成

user1@amebb:~/acre/air$ vue create boot


Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in /home/user1/acre/air/boot.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 842 packages in 4m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages in 27s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project boot.
👉  Get started with the following commands:

 $ cd boot
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

選択は、Vue3(babel, eslint)。

時間がかかった。

BootStrap 5

vue3 + Bootstrap5 参考記事

Attention Required! | Cloudflare

Bootstrap5 インストール

user1@amebb:~/acre/air/boot$ npm install bootstrap
user1@amebb:~/acre/air/boot$ npm install @popperjs/core

Bootstrap5 使用を記述

main.jsにインポート記述

main.jsにBootstrapのimportを記述

import { createApp } from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

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

Bootstrapのボタンを記述

ついでに新しいコンポーネント BootButtons.vue を追加してみる。

ファイル src/components/BootButtons.vue

<template>
  <h1>Boot Buttons.</h1>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>

  <h2>Toggle sample</h2>
  <div>
    <button class="btn btn-primary" data-bs-target="#collapseTarget" data-bs-toggle="collapse"> Bootstrap collapse</button>
    <div class="collapse py-2" id="collapseTarget"> This is the toggle-able content! </div>
  </div>
</template>

<script>
export default {
  name: 'BootButtons',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  margin: 20px 0 0;
}
</style>

ファイル src/App.vue

<template>
  <BootButtons />
  <HelloWorld msg="Welcome-0501-1719 Vue.js App"/>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import BootButtons from './components/BootButtons.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    BootButtons
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

起動

user1@amebb:~/acre/air/boot$ npm run serve

localhost:8080 表示できた。

App Serviceへのデプロイ

VSCodeからデプロイ

VSCodeによるAzure App Serviceへのデプロイも成功した。

デプロイ中に作成されるzipファイルが大きめ(34MB)のためかデプロイが固まったように見えてあせった。

App Serviceのスタートアップ コマンド

pm2 serve /home/site/wwwroot/dist --no-daemon --spa
スポンサーリンク

コメント

タイトルとURLをコピーしました