VUE集成Bootstrap开发

Bootstrap是丰富展现能力的前端框架，Bootstrap与JQuery集成非常成熟和易用，VUE DOM数据操作框架是几年推出的，其数据模式与Dom组件双向绑定为开发者提供很大便利性，Bootstrap与VUE的集成框架bootstrap-vue，其官网是https://bootstrap-vue.js.org/，但从功能丰富性方面考察，bootstrap-vue相对Bootstrap+JQuery来说，前台展示功能并不太丰富，我猜测可能是bootstrap很多功能还没有完全移植到bootstrap-vue上面，伴随bootstrap-vue版本升级，功能会日臻完善的。

学习任何框架，最佳实践是首选搭建开发和调试环境，在不断研究在线文档和自己推断中摸索学习。下面首先搭建开发环境

1、搭建Eclipse开发环境

下载最新Eclispe开发工具
在这里插入图片描述

2、在Eclipse上安装CodeMix插件，用于开发VUE工程

在这里插入图片描述

3、安装NodeJS

下载并按照NodeJS工具
https://nodejs.org/en/

在这里插入图片描述
将npm命令所在目录设置到PATH环境变量中

4、使用Eclipse 新建CodeMix VUE Project

在这里插入图片描述

新建OrderVue工程目录结构为
在这里插入图片描述

5、启动命令行，安装VUE依赖

将当前目录转移到新建OrderVue工程目录下
在这里插入图片描述

安装vue bootstrap-vue bootstrap

npm i vue bootstrap-vue bootstrap

安装vue-cli

npm i @vue/cli

6、使用Eclipse IDE工具，修改默认生成VUE模板文件HelloWorld.vue

打开Bootstrap-vue官网，复制Form代码到HelloWorld.vue中
https://bootstrap-vue.js.org/docs/components/alert

<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="Enter name"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Food:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group id="input-group-4">
        <b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
          <b-form-checkbox value="me">Check me out</b-form-checkbox>
          <b-form-checkbox value="that">Check that out</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          name: '',
          food: null,
          checked: []
        },
        foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
        show: true
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        alert(JSON.stringify(this.form))
      },
      onReset(evt) {
        evt.preventDefault()
        // Reset our form values
        this.form.email = ''
        this.form.name = ''
        this.form.food = null
        this.form.checked = []
        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
  }
</script>