Vue使用iview组件库

步骤一、使用npm下载ivew组件库

npm install --save iview

步骤二、在main.js中配置iview

//导入iView组件库
import iView from 'iview'
//导入iView样式
import 'iview/dist/styles/iview.css'

//使用iView组件库
Vue.use(iView)

步骤三、使用iview组件
官网随便找一个来看看效果。这里以官网的按钮为例:
在这里插入图片描述
我们直接抄他代码就完事了,比如,在我们的App.vue里面我们打算加一个蓝色的按钮和红色的按钮,那么就是:

<template>
  <div id="app">
    <Button type="info">蓝色的按钮</Button>
    <br>
    <Button type="error">红色的按钮</Button>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

效果如下:
在这里插入图片描述
其他的组件也是这么扣,然后我们再给他写个样式啥的,这不就搞定了嘛。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐