iview自定义配置

说明

iview是一套基于 Vue.js 的高质量 UI 组件库。主要用户PC端页面设计。
官网：https://www.iviewui.com/

1、在vue-cli项目中，添加该框架

• 第一步，安装
  npm install iview --save

• 第二步 配置 在main.js中，配置如下

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

• 第三步 按需引用 安装插件

npm install babel-plugin-import --save-dev

• 第四步 按需引用 配置.babel文件（好处不用我说，可以实现按需加载组件，减少文件体积）

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

2、在项目中使用这个框架 然后重启项目

<template>	
		<div class="userIndex">	
			这是首页
			 <v-button>Default</v-button>
	    <v-button type="primary">Primary</v-button>
	    <v-button type="ghost">Ghost</v-button>
	    <v-button type="dashed">Dashed</v-button>
	    <v-button type="text">Text</v-button>

	    <Slider v-model="value4" :step="10"></Slider>
    	<Slider v-model="value5" :step="10" range></Slider>
		</div>

</template>

<script type="text/javascript">
import { Button ,Slider } from 'iview';
	export default {
		data(){
			return {
				value4:70,
				value5:10
			}
		},
		components:{
			"v-button":Button,Slider
		}
	}
</script>