為了避開即使用vue，又使用jquery的尷尬，找了uiv這個基於vue和bootstrap寫的元件UI。
https://uiv.wxsm.space/getting-started/

首先把遇到的坑說下：
uiv用的是bootstrap3，然而使用cnpm install bootstrap –save下載下來的是bootstrap4版本，所以顯示出來的ui是亂的。
如果已經安裝了boot4，使用命令cnpm install –save bootstrap#3.3.7切換成boot3版本，所有的uiv元件UI就能使用了。

1、首先是簡歷vue-cli

npm install
 
 vue-cli -g

vue init webpack my-project

cd myproject;

npm install;

npm run dev;

2、安裝uiv依賴

npm install uiv --save

npm install bootstrap --save

3、修改main.js

import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import * as uiv from 'uiv'
import App from './App'
import router from
 
 './router'

Vue.config.productionTip = false

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

4、按uiv文件的程式碼，修改uiv元件HelloWorld.vue

<template>
    <navbar>
      <a class="navbar-brand" slot="brand" href="#"
 
>Brand</a>
      <template slot="collapse">
        <navbar-nav>
          <li class="active"><a role="button">Link <span class="sr-only">(current)</span></a></li>
          <li><a role="button">Link</a></li>
        </navbar-nav>
        <navbar-form left>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <btn>Submit</btn>
        </navbar-form>
        <navbar-nav right>
          <li><a role="button">Link</a></li>
          <dropdown tag="li">
            <a class="dropdown-toggle" role="button">Dropdown <span class="caret"></span></a>
            <template slot="dropdown">
              <li><a role="button">Action</a></li>
              <li><a role="button">Another action</a></li>
              <li><a role="button">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a role="button">Separated link</a></li>
            </template>
          </dropdown>
        </navbar-nav>
      </template>
    </navbar>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>