前端UI框架之pc桌面框架iview-ui

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" />

下面是使用成功的效果图