diff --git a/package.json b/package.json index 689fd2cc6..0f651147b 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "autwh": "0.0.1", "bcryptjs": "2.4.3", "body-parser": "1.18.2", + "bootstrap-vue": "^2.0.0-rc.1", "cache-loader": "1.2.0", "cafy": "3.2.1", "chai": "4.1.2", diff --git a/src/web/app/dev/script.ts b/src/web/app/dev/script.ts index 757bfca49..2f4a16fab 100644 --- a/src/web/app/dev/script.ts +++ b/src/web/app/dev/script.ts @@ -2,6 +2,11 @@ * Developer Center */ +import Vue from 'vue'; +import BootstrapVue from 'bootstrap-vue'; +import 'bootstrap/dist/css/bootstrap.css'; +import 'bootstrap-vue/dist/bootstrap-vue.css'; + // Style import './style.styl'; @@ -11,6 +16,11 @@ import Index from './views/index.vue'; import Apps from './views/apps.vue'; import AppNew from './views/new-app.vue'; import App from './views/app.vue'; +import ui from './views/ui.vue'; + +Vue.use(BootstrapVue); + +Vue.component('mk-ui', ui); /** * init @@ -22,7 +32,7 @@ init(launch => { // Routing app.$router.addRoutes([ { path: '/', component: Index }, - { path: '/app', component: Apps }, + { path: '/apps', component: Apps }, { path: '/app/new', component: AppNew }, { path: '/app/:id', component: App }, ]); diff --git a/src/web/app/dev/style.styl b/src/web/app/dev/style.styl index cdbcb0e26..e635897b1 100644 --- a/src/web/app/dev/style.styl +++ b/src/web/app/dev/style.styl @@ -1,5 +1,10 @@ @import "../app" @import "../reset" +// Bootstrapのデザインを崩すので: +* + position initial + background-clip initial !important + html background-color #fff diff --git a/src/web/app/dev/views/app.vue b/src/web/app/dev/views/app.vue index 9eddabbec..2c2a3c83c 100644 --- a/src/web/app/dev/views/app.vue +++ b/src/web/app/dev/views/app.vue @@ -1,16 +1,12 @@