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

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>

最终显示结果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值