说明
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>