0

BootstrapVueのサイトにある"Complete example"のサンプルを利用したいのですがうまく表示されません。
特にソート・フィルターなどの表以外の部分でサンプルの表示と異なります。
どうやらb-form-selectが上手く表示されていないようなのでそちらのサンプルも試しましたがやはりサンプルと同じように表示されません。

以下作業内容とソースになります。間違っていそうなところがないかご確認いただけないでしょうか?

  1. パッケージの作成

    vue create paging-table
    ※Vue2を選択しております。

  2. パッケージのインストール

    npm install bootstrap bootstrap-vue

  3. パッケージの内容

    {
      "name": "paging-table",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "serve:backend": "node ./src/server.js",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "axios": "^0.27.2",
        "bootstrap": "^5.1.3",
        "bootstrap-vue": "^2.22.0",
        "core-js": "^3.8.3",
        "express": "^4.18.1",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-plugin-router": "~5.0.0",
        "@vue/cli-plugin-vuex": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-vue": "^8.0.3",
        "prettier": "^2.4.1",
        "sass": "^1.32.7",
        "sass-loader": "^12.0.0",
        "vue-template-compiler": "^2.6.14"
      }
    }
  1. main.jsの編集
    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    
    Vue.config.productionTip = false;
    
    import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
    
    // Import Bootstrap and BootstrapVue CSS files (order is important)
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    
    // Make BootstrapVue available throughout your project
    Vue.use(BootstrapVue);
    // Optionally install the BootstrapVue icon components plugin
    Vue.use(IconsPlugin);
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
  1. AboutView.vueの編集
    BootstrapVueのサイトのサンプルをそのままコピペしました。

1 件の回答 1

1

ごめんなさい。解決いたしました。

BootstrapVueの公式サイトにあるサンプルは編集が可能です。で、ここで自分のコードをコピペしてみたのですが当然上手く表示されるわけです(そもそもサンプルをコピペしているので)。

そこで改めてGetting Startedに立ち直ってみたところ、初っ端のメジャーバージョンが4になっていました。
さて、皆様お気づきだと思いますがpackeage.jsonを見てみると5になっています。
そこでサイトのバージョンに合わせるとサンプルと同様に表示されました。安心しました。

くだらない質問になってしまい申し訳ございません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。