【vue】vuikit的使用(uikit已经在vuikit内部集成)

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

vuikit基本上支持uikit的所有语法，所以无论是你想用uikit还是vuikit，都可以只装这一个

而且集成的时候，要远远比单独去集成uikit简单的多，因为很多事情都已经被vuikit做完了

一、首先用npm 安装三方包

npm install vuikit

npm install @vuikit/icons

npm install @vuikit/theme

二、在main.js 中添加全局使用

// later in your source files

import Vue from 'vue'

import Vuikit from 'vuikit'

import VuikitIcons from '@vuikit/icons'

import '@vuikit/theme'

Vue.use(Vuikit)

Vue.use(VuikitIcons)

三、uikit和vuikit混合使用

<template>

  <div id="app">

    <select class="uk-select">

        <option>uk-select item1</option>

        <option>uk-select item2</option>

    </select>

    <button class="uk-button uk-button-default"> 我是一个ukbtn</button>

    <vk-button> 我是一个vkbtn </vk-button>

  </div>

</template>



<script>

export default {

  name: 'App',

}

</script>



<style>

#app{

}

</style>

最终显示结果：