8步生成 vue+bootstrap+Electron 可执行文

目标：利用 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 效果生效了。

完成收工！

---

1. 这里是注脚章节的内容 ↩