1.npm下安装electron
npm install electron -g
2.安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
3.安装依赖并运行你的程序
cd my-project
npm install
npm run dev
4.webpack环境下安装bootstrapvue
npm i bootstrap-vue bootstrap@4.0.0-beta.2
5.在你的vue入口文件中注册bootstrapvue组件,并且import相应的css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
代码实例
Index.vue
<template>
<div>
<b-alert show>Default Alert</b-alert>
<b-alert variant="success" show>Success Alert</b-alert>
<b-alert variant="danger"
dismissible
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false">
Dismissible Alert!
</b-alert>
<b-alert :show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountdown=0"
@dismiss-count-down="countDownChanged">
<p>This alert will dismiss after {{dismissCountDown}} seconds...</p>
<b-progress variant="warning"
:max="dismissSecs"
:value="dismissCountDown"
height="4px">
</b-progress>
</b-alert>
<b-btn @click="showAlert" variant="info" class="m-1">
Show alert with count-down timer
</b-btn>
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</b-btn>
</div>
</template>
<script>
export default {
data: function() {
return {
dismissSecs: 10,
dismissCountDown: 0,
showDismissibleAlert: false
};
},
methods: {
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
showAlert() {
this.dismissCountDown = this.dismissSecs;
}
}
};
</script>
main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(BootstrapVue)
/* eslint-disable no-new */
new Vue({
components: { App },
router,
store,
template: '<App/>'
}).$mount('#app')