Electron-Vue 创建跨平台桌面应用程序 UI

0. 开发准备

安装好 vscode 、npm / yarn，安装方法见百度。

1. Electron-vue 安装

# 如果没有 vue-cli 的话需要全局安装
npm install -g vue-cli

# 然后使用 vue-cli 来安装 electron-vue 的模板
vue init simulatedgreg/electron-vue grpc-client-electron-vue

# 安装依赖
cd grpc-client-electron-vue
yarn # or npm install

# 进入开发模式
yarn run dev # or npm run dev

注1：运行完命令 vue init simulatedgreg/electron-vue hello-world 后，除了 ESLint 选项按 N 键选 no 外，其他一路按 Enter 键选择默认配置即可。如下图所示：

（EsLint 校验，主要用来规范开发人员的代码。但有些像缩进、空格、空白行之类的规范，会导致在开发过程中一直报错，选择关闭）

Electron-Vue 创建跨平台桌面应用程序 UI

注2：当 node 版本高于 12 的时候，会报错：

Html Webpack Plugin:

  ReferenceError: process is not defined

解决方法：打开.electron-vue 文件夹中的 webpack.web.config.js 和 .electron-vue/webpack.renderer.config.js，

在 HtmlWebpackPlugin，添加 templateParameters，如下图所示：

templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },

Electron-Vue 创建跨平台桌面应用程序 UI

注：后面的内容（2/3/4/5）如果不用 BootStrap 则忽略。

2. 将 Bootstrap 和 BootstrapVue 添加到项目中

# With yarn
yarn add bootstrap-vue bootstrap axios

# With npm
npm install bootstrap-vue bootstrap axios

3. 设置 BootstrapVue

接下来，让我们设置刚刚安装的 BootstrapVue 包。转到 src/render/main.js 文件并将这行代码添加到顶部：

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

在这里做的事情非常简单，我们导入了 BoostrapVue 包，然后用 Vue.use() 函数在程序中注册它，以便 Vue 程序可以识别。

我们还需要将 Bootstrap CSS 文件导入到项目中。将这段代码段添加到 main.js 文件中：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

在将必要的模块导入 Vue 程序后，你的 main.js 文件应该和下面的代码段类似：

import Vue from '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'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

View Code