vue-cli中使用uiv

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_21859119/article/details/82745744

为了避开即使用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>