BootstrapVueのサイトにある"Complete example"のサンプルを利用したいのですがうまく表示されません。
特にソート・フィルターなどの表以外の部分でサンプルの表示と異なります。
どうやらb-form-selectが上手く表示されていないようなのでそちらのサンプルも試しましたがやはりサンプルと同じように表示されません。
以下作業内容とソースになります。間違っていそうなところがないかご確認いただけないでしょうか?
パッケージの作成
vue create paging-table
※Vue2を選択しております。パッケージのインストール
npm install bootstrap bootstrap-vue
パッケージの内容
{
"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"
}
}
- 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");
- AboutView.vueの編集
BootstrapVueのサイトのサンプルをそのままコピペしました。