git-bash で node + vite + vue + bootstrap + sass の SPA を作成する

git-bash で node + vite + vue + bootstrap + sass の SPA を作成する

2024/04/27 12:00:00
Program
Git-Bash, Node, Vite, Vue, Bootstrap, Sass, SPA

前提 #

  • 動作環境は git-bash とする
    構築手順は以下を参考にする
    https://blog.oya3.net/posts/2023/10/03/00_git/
  • node21 + vite5 + vue3 + bootstrap5 + sass を使用する
  • vue-router でルーティングできるところまでのサンプルを作成

vite プロジェクトを作成 # 

$ npm create vite@latest
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y) y
√ Project name: ... erma-vite
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\home\developer\work\hp\erma-vite...
Done. Now run:
  cd erma-vite
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.5.0 -> 10.6.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.6.0
npm notice Run npm install -g npm@10.6.0 to update!
npm notice

# npm を更新メッセージが表示されるので実施
$ npm install -g npm@10.6.0
removed 17 packages, and changed 59 packages in 8s

# vite プロジェクトに移動
$ cd erma-vite/
$ npm i
added 27 packages, and audited 28 packages in 4s
4 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

# 起動確認
$ npm run dev
> erma-vite@0.0.0 dev
> vite
  VITE v5.2.10  ready in 1511 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

# git に登録
$ git init
$ git add .
$ git commit -m "first commit"

popperjsをインストール(bootstrapもインストールされる) # 

$ npm install --save bootstrap @popperjs/core
added 2 packages, and audited 30 packages in 4s
6 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

$ git commit -am "add popperjs(bootstrap)"

sass をインストール # 

$ npm install --save-dev sass
added 16 packages, and audited 46 packages in 2s
9 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

# ファイル構成の設定:
$ mkdir src/scss
$ touch src/scss/styles.scss

bootstrap & sass 読み込み追加

$ emacs src/main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// Import our custom CSS
import './scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

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

$ emacs src/scss/styles.scss

// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";

git 登録

$ git commit -am "add sass"

動作確認
※ここでは bootstrap 側のcssに変更しているので既存のvite-vueの初期画面とは違う画面が出てしまうが無視。

$ npm run dev

ファイル構成を確認（node_modules以外) # 

# ※tree コマンドは、管理者権限でgit-bashを起動し $ pacman -S tree を実行
$ tree -I node_modules .
.
├── index.html
├── package.json
├── package-lock.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── scss
│   │   └── styles.scss
│   └── style.css
└── vite.config.js
7 directories, 12 files

ルーティング機能を導入する #

Home, About ページを作成しルーティングする

# vue-router をインストール
$ npm install vue-router
$ git commit -am "add vue-router"

Home, About ページのルーティング設定を追加 #

/src/router.js 新規作成

$ emacs /src/router.js

import { createRouter, createWebHistory } from 'vue-router'
import home from './components/home.vue'
import about from './components/about.vue'

const routes = [
  { path: '/', name: 'home', component: home },
  { path: '/about', name: 'about', component: about },
]

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

export default router

システムにルーティング設定を反映 #

src/main.js 編集

$ emacs src/main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router'
// Import our custom CSS
import './scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

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

トップページに Home, About ページのリンクを張る #

src/App.vue 編集

$ emacs src/App.vue

<script setup>
import home from './components/home.vue'
import about from './components/about.vue'
</script>

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">home</router-link> |
      <router-link to="/about">about</router-link>
    </div>
    <router-view />
  </div>
</template>

<style scoped lang="scss">
</style>

Home ページ作成 #

src/components/Home.vue 編集

$ emacs src/Home.vue

<template>
  <div class="container py-4 px-3 mx-auto">
    <h1>Home</h1>
    <button class="btn btn-primary">Home button</button>
  </div>
</template>

About ページ作成 #

src/components/About.vue 編集

$ emacs src/About.vue

<template>
  <div class="container py-4 px-3 mx-auto">
    <h1>About</h1>
    <button class="btn btn-primary">About button</button>
  </div>
</template>

動作確認 # 

$ npm run dev

その他 #

@ path指定できるようにする #

$ emacs vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'  // <-- ここ追加

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // <-- ここ追加
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }})

参考URL #