码迷,mamicode.com
首页 > 其他好文 > 详细

iview自定义配置

时间:2017-11-20 14:28:12      阅读:684      评论:0      收藏:0      [点我收藏+]

标签:time   ast   www.   好处   imp   javascrip   res   引用   vue-cli   

说明

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>

iview自定义配置

标签:time   ast   www.   好处   imp   javascrip   res   引用   vue-cli   

原文地址:http://www.cnblogs.com/lulianlian/p/7865669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!