浅谈Vue的iView

墨蓝 2022-06-16 01:44 291阅读 0赞

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

1、iView的特性

1) 高质量、功能丰富

2) 友好的API ，自由灵活地使用空间

3) 细致、漂亮的 UI

4) 事无巨细的文档

5) 可自定义主题

2、iView的安装：

1) 使用npm：

npm install --save iview

2) CDN引入：

<link rel="stylesheet" href="css/iview.css">
    <script src="js/iview.min.js"></script>

3、引入 iView

1) 一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
    import VueRouter from 'vue-router';
    import App from 'components/app.vue'; // 路由挂载
    import Routers from './router.js'; // 路由列表
    import iView from 'iview'; // 导入组件库
    import 'iview/dist/styles/iview.css'; // 导入样式
    Vue.use(VueRouter);
    Vue.use(iView);
    // 路由配置
    const RouterConfig = {
        routes: Routers
    };
    const router = new VueRouter(RouterConfig);
    new Vue({
        el: '#app',
        router: router,
        render: h => h(App)
    });

2) 按需引用

在webpack中按需使用组件，可以减少文件体积：

import Input from 'iview/src/components/input';

注意：

①　按需引用仍需要导入样式，即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css';

②　按需引用是直接引用的组件库源代码，需要借助 babel 进行编译，以 webpack 为例：

module: {
        	rules: [
            	{ test: /iview.src.*?js$/, loader: 'babel' },
            	{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
        	]
    }

3、组件使用规范

使用:prop传递数据格式为数字、布尔值或函数时，必须带:(即，使用v-bind)，它的值会被当做JavaScript表达式计算，否则会被当做字符串。

正确的使用方法：

<Page :current="1" :total="10"></Page>

错误的使用方法：

<Page current="1" total="10"></Page>

发表评论取消回复

表情：

评论列表（有 0 条评论，291人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中的$emit参数浅谈

正常使用 vue中的$emit常用与子组件与父组件通信，网上很多博客均已讨论该问题，在此就不多做记录了，直接复制一段过来： > 1、父组件可以使用 props 把数据传

我会带着你远行/ 2023年10月11日 11:41/ 0 赞/ 49 阅读

相关 Vue3---浅谈setup函数

setup函数执行时机位于 beforeCreate 和 created 之前。该函数共有两个参数，第一个是props，可以拿到该组件定义的组件参数。第二个参数

太过爱你忘了你带给我的痛/ 2022年08月28日 11:51/ 0 赞/ 247 阅读

相关浅谈Vue的生命周期模型

浅谈Vue的生命周期模型 Vue实例从创建到销毁的过程，就是生命周期。 Vue的生命周期包括：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程

Bertha 。/ 2022年06月16日 08:37/ 0 赞/ 196 阅读

相关浅谈Vue的iView

iView 是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。 1、iView的特性 1) 高质量、功能丰富 2) 友好的API ，自由灵

墨蓝/ 2022年06月16日 01:44/ 0 赞/ 292 阅读

相关浅谈用webpack构建Vue

1、创建基本结构 1) 通过以下命令创建一个项目空文件夹myApp并进入该文件夹： mkdir myApp cd myApp/ 2) 通过以下命令创建pa

朱雀/ 2022年06月16日 01:41/ 0 赞/ 342 阅读

相关浅谈vue之生命周期

\\ 浅谈vue之生命周期 \\ 环境搭建在讲解vue生命周期之前我们先准备好演示环境搭建vue的方式一般有三种是使用npm搭建集成开发环境，

拼搏现实的明天。/ 2022年05月09日 23:03/ 0 赞/ 659 阅读

相关 Vue中的生命周期（浅谈）

Vue中的声明周期是什么？ vue实例从创建到销毁的过程称之为vue的生命周期用Vue框架，熟悉它的生命周期可以让开发更好的进行。首先先看看官网的图，详细的给出

约定不等于承诺〃/ 2022年04月17日 00:15/ 0 赞/ 352 阅读

相关浅谈vue $mount()

Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不

浅浅的花香味﹌/ 2021年11月26日 20:48/ 0 赞/ 314 阅读

相关浅谈vue $mount()

Vue 的`$mount()`为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上

灰太狼/ 2021年10月13日 02:41/ 0 赞/ 333 阅读

相关浅谈 Vue 项目优化

前几天看到大家说 vue 项目越大越难优化，带来很多痛苦，这是避免不了的，问题终究要解决，框架的性能是没有问题的，各大测试网站都有相关数据。下面进入正题基础优化所谓

分手后的思念是犯贱/ 2021年09月14日 04:52/ 0 赞/ 481 阅读