npm安装
npm install iview --save
配置.babelrc
这里只讨论按需引入,按需引入需要安装babel-plugin依赖包
npm install babel-plugin-import --save-dev
在.babelrc文件中的plugins这一项中加入如下代码(注意不是替换原先的代码)
"plugins": [
["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]
]
使用
main.js中引入import 'iview/dist/styles/iview.css'总样式文件
main.js中import { Button, Badge, Circle, Icon, Switch } from 'iview' 引入需要用到的组件
main.js中引入必须Vue.component('Button', Button)引号里面的是什么标签就是什么 注意事项
Switch(开关)和Circle(圆形进度条)这两个组件的使用法法比较特殊
Vue.component('i-circle', Circle)
Vue.component('i-switch', Switch)
<i-circle :percent="35" stroke-color="#ff5500">
<span class="demo-Circle-inner">
<Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
</span>
</i-circle>
<i-switch v-model="switch1" @change="change" />
下面是使用成功的效果图

|