目标：利用 vue 框架，引入 bootstrap，并使用 electron 生成一个可执行的演示程序。
说明：node环境、npm 命令等就不做说明和安装了，直接上手。
1、安装 vue/cli[1]
npm install -g @vue/cli
如果已安装 vue/cli，而你又想先卸载的话，请运行：
npm uninstall -g @vue/cli
2、创建项目 vue-bootstrap-electron
任意选一个文件夹（路径里最好不要有中文字符），进入该文件夹后，创建项目，此处项目的名称为：vue-bootstrap-electron，运行命令：
vue create vue-bootstrap-electron
选：
Vue 2
3、安装 bootstrap-vue
cd vue-bootstrap-electron
npm install bootstrap-vue bootstrap axios
4、安装 electron-builder
vue add electron-builder
Choose Electron Version ^13.0.0
5、修改main.js
import Vue from 'vue'
// 增加的演示代码 -开始
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
// 增加的演示代码 -结束
import App from './App.vue'
......
6、修改 app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<!-- 增加的演示代码 开始 -->
<div>
<b-button>Button</b-button>
<b-button variant="danger">Button</b-button>
<b-button variant="success">Button</b-button>
<b-button variant="outline-primary">Button</b-button>
</div>
<!-- 增加的演示代码 结束 -->
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
7、测试运行electron
npm run electron:serve
8、测试生成 electron 执行文件
npm run electron:build
生成可执行文件
mac环境下：vue-bootstrap-electron/dist_electron/vue-bootstrap-electron-0.1.0.dmg
windows环境下：vue-bootstrap-electron\dist_electron\win-unpacked\vue-bootstrap-electron.exe
提示：由于在第7步和第8步的时候，会从github下载相应的包，所以可能会出现下载失败的情况，多运行几次就可以了。
生长的可执行文件运行效果图
注意上图红色框里的按钮，就是用 bootstrap 的 b-button 标签生成的，显示 bootstrap 效果生效了。
完成收工！
-
这里是注脚章节的内容 ↩
