zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    vue 中的单元测试
    redux-学习总结
    React-学习总结
    vuecli 中 chainWebpack 的常用操作
    常用 vue-config.js 配置
    JavaScript 中的 MVC、MVP、MVVM
    日常工作中 @vue/cli 需要关注的一些配置
    Electron 构建超时问题
    JSBridge 原理与封装
    Three.js 之相机
  • 原文地址:https://www.cnblogs.com/lulianlian/p/7865669.html
Copyright © 2011-2022 走看看