IView组件化之部署

IView是什么？

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

Npm安装IView

npm install iview

在main.js中配置Iview

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　IView按钮

颜色：

通过设置type为primary、dashed、text、info、success、warning、error创建不同样式的按钮，不设置为默认样式。

注意：非 template/render 模式下，需使用 i-button。ghost为幽灵模式  即没有样式 只有边框

圆形及icon内嵌：

icon直接写在标签内，原型直接shape="circle"，如何按钮的内容过长的时候就不再是圆形了，拉长了。

 按钮大小：

通过设置size为large和small将按钮设置为大和小尺寸，不设置为默认（中）尺寸,长按钮可直接long 这样就达到了100%，当然你也可以直接style进行修饰。