vue 项目中ivew按需引入

iview/view-design+vue2实现表单校验 iview是一款基于Vue.js的开源UI组件库,提供了丰富的组件和样式,支持响应式布局和多语言环境。它使用了最新的前端技术,如ES6、Webpack和SASS,让开发者可以快速构建高质量的Web应用程序。View-design是一款基于Vue.js的开源UI组件库,它的设计理念是简单、易用、美观。它提供了众多的组件,如按钮、表单、弹窗、表格等,并且还支持多种主题和组件扩展,开发者可以根据自己的需求进行定制。俩者之间主要的区别是vue的版本不同,这里以vue2为例实现代码。 阅读详情

官方文档中介绍了iview的按需引入:
按需引用 #
借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc 中配置:

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

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

然后这样按需引入组件,就可以减小体积了:

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

但是在我们的实际项目中使用的组件较多,如果都放在main.js中会是这个文件看起来不易理解。因此我们可以新建个js文件来专门存放我们需要引入的组件如下:
1.新建文件加iview/index.js

import { Card, Button, Table, Menu, Row, Col, Icon, Input, Select, Option, Form, Modal, MenuItem, MenuGroup, Submenu, Tabs, TabPane, Radio, RadioGroup} from 'iview';

const iview = {
    install: function (Vue) {
        Vue.component('Card', Card);
        Vue.component('Button', Button);
        Vue.component('Table', Table);
        Vue.component('Menu', Menu);
        Vue.component('Submenu', Submenu);
        Vue.component('MenuGroup', MenuGroup);
        Vue.component('MenuItem', MenuItem);
        Vue.component('Row', Row);
        Vue.component('Col', Col);
        Vue.component('Icon', Icon);
        Vue.component('Input', Input);
        Vue.component('Select', Select);
        Vue.component('Option', Option);
        Vue.component('Modal', Modal);
        Vue.component('Tabs', Tabs);
        Vue.component('TabPane', TabPane);
        Vue.component('Radio', Radio);
        Vue.component('RadioGroup', RadioGroup)
    }
}

export default iview

2.在main.js中引入

import iview  from "../iview"
Vue.use(iview)

这样我们就可以将需要的组件直接放入index.js文件中了

iview ui 和elment ui 的按需引用,减小项目体积_viewui 按需引入 ]]// 导入自己需要的组件。 阅读详情

相关推荐

mpvue中使用ivew组件及更改主题颜色

vue工程更改ivew组件主题颜色 1、描述 更改ivew组件的主题颜色,如下比较: 2、实现步骤 通过webpack搭建好了一个vue工程,安装ivew插件,所有程序正常使用的情况下: 1、终端执行命令 npm i iview-theme -g 2、项目工程下,新建一个文件夹my-theme, 在该文件夹下新建文件index....

我的blog屋 703

iView与element ui组件库差异大盘点(理论分析)

总而言之,iview和element各有优缺,前者在简洁性上非常优秀,而后者在拓展性上也有自己的一席之地,在进行比较大型的业务时element的使用性较高,而iview通常使用于一些中小型项目。

qq_52730657的博客 1865

Iview实例

Iview项目实例1、Menu菜单实例(1)实例1 (用API里事件,稍许复杂)(2)实例2 (简便)(3)菜单栏自动选中当前功能名 (实例)2、验证是否为登录状态(案例)第一步 在需要存储token的页面绑定事件写入或释放token第二步 路由文件添加存储token的属性及值第三步 添加判断并导向需跳转的路径(可在路由js里写也可在ivew.js里写)3、根据不同客户端加载不同页面 1、Menu菜单实例 (1)实例1 (用API里事件,稍许复杂) //跳转查找name属性,再寻找跳转路径 Home About

iview起步

ivew是一套基于vue的高质量的ui组件库。使用它我们可以非常简单的得到非常美观的页面和非常棒的用户体验。 1.获取源码 前往github下载源码,下载地址:https://github.com/iview/iview-admin。 2.安装模块包 (1)将下载的源码解压,放在D盘,重命名 iview-admin; (2)打开cmd,进入源码目录,执行命令cdd:/i...

dikong9237的博客 357

ICCompiler II学习笔记(一)ICC II使用全流程 overview

学习笔记同步发布在我的个人网站上,欢迎来访查看。 个人学识有限,理解可能有误,仅供参考。 文章目录一、前言二、 ICC II 简介和 GUI2.1 Blocks 和 Design Libraries2.2 Objects2.3 Application Options三、Design Setup四、APR flow五、 课程主题:如何用 ICC II来实现最好的PPA 一、前言 现在的芯片都在追求一个极致的PPA 芯片的生成可以分为以下 5大步骤: Front-end Design:前端设计,最终产生

一名FPGA芯片设计爱好者的技术博客 2万+

快手极速版抓包实战:安卓/iOS双端获取client_salt全流程解析(避坑指南)

本文详细解析了在安卓和iOS平台上获取快手极速版关键参数`client_salt`的全流程,包括环境配置、抓包工具使用、参数识别与转换等实战技巧。特别针对双端差异和反抓包机制提供了避坑指南,帮助开发者高效安全地完成数据获取任务。

weixin_29021195的博客 714

尝试实现了国外大佬用Web做出来跨窗口渲染动画效果_跨窗口渲染的交互效果(1)

整体思路就是先用**canvas**里获取其它窗口的坐标信息,然后在自己窗口里画出连接线以及其它窗口的圆。本文只是提供个思路,把多窗口实时移动、互动效果实现出来了,其它银河系云图粒子效果、以及移动窗口时的阻尼缓冲效果,还需要其它大佬启发了。

2401_84411767的博客 210

【环境搭建】使用openSfM+MVSNet重建稠密点云

本帖详细介绍了如何使用openSfM+MVSNet对真实采集的数据进行稀疏重建与稠密重建,并针对一些真实场景下可能遇到的问题进行了整理。

YuhsiHu的博客 1972

vue引入iview 组件按需加载并修改组件原先样式方法

因为要做一个移动端需求,有一个页面是排行榜。点击下拉框是选择不同的组别渲染不同组别的排行榜那,因为项目紧张加上兼容性的要求所以打算找一个现在比较流行的框架来用。再三选择后选择了 iview组件! 先看一下组件库本身的样式 还有 页面的效果吧 其实中间的过程无比艰辛。。。 开始吧 第一步:引入iview组件 或者其中的部分组件,我只是用了一个Sel...

Awen_liang1002 2615

机器人关节电机发热难题:从工程化角度拆解热管理解决方案(下)

摘要:本文系统分析了机器人关节电机与驱动系统的热管理方案,重点解决局部热点问题。针对不同功率场景提出了热管/均热板散热(适用于中小功率)和液冷散热(适用于高功率)的具体实施方案,详细比较了结构参数、材料选择、安装工艺和散热效果。特别强调了电机-驱动协同热管理的重要性,提出"工况联动+热路径共享"的核心理念,包括一体化散热结构设计和动态控制策略。最后介绍了热仿真与测试验证方法,确保方案的有效落地。通过系统级热管理,可显著降低温升(热点区域降温30-60℃),同时优化体积和能耗。

bother3000的博客 3329

随机向量函数链神经网络(RVFLNN)简介——附测试代码

宽度学习(Broad Learning System)原理介绍:随机向量函数链神经网络(RVFLNN) 目录宽度学习(Broad Learning System)原理介绍:随机向量函数链神经网络(RVFLNN)结构分析和训练优化 函数链神经网络(Functional-link neural network,简称FLNN)的结构如下图。 和深度神经网络结构不同的是,FLNN相当于把隐层放到了输入层中,作为增强结点(Enhancement nodes)。也可以理解成FLNN在输入层就对输入向量进行了非线性变换

weixin_44517742的博客 1万+

vue项目如何载入ivew

vue项目引入ivew其实很简单,只需要在创建好项目后,打开package.json文件。 在dependencies属性内加入: “ivew”: “版本号” 小知识点:package.json内dependcies和devDependencies的区别: dependencies: 应用能够正常运行所依赖的包。这种 dependencies 是最常见的,用户在使用 npm instal...

weixin_43439494的博客 954

TC8:SOMEIPSRV_SD_MESSAGE_07-09

TTL为服务实例的生命周期。在此生命周期之后,不提供服务实例。

jasonj333 908

vue项目搭建及UI引入

文章目录vue项目搭建及UI引入一、vue项目创建二、vue项目引入iview三、vue项目引入element vue项目搭建及UI引入 一、vue项目创建 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue脚手架vue-cli cnpm install -g vue cnpm insta...

yh_1524的博客 484

【推荐100个unity插件】将UE的资源导出到unity使用—— Exporter for Unreal to/for Unity插件

Unreal to Unity导出器是一款帮助开发者将Unreal Engine项目转换为Unity的工具。文章详细介绍了使用步骤:1)安装虚幻引擎并创建项目;2)在Plugins文件夹中安装导出插件;3)导入UE资产到Content文件夹;4)配置导出参数并完成转换。文末推荐了多个Unity开发专栏,涵盖C#编程、2D/3D开发、特效制作等内容。作者向宇提供了博客地址,欢迎读者交流学习。该工具能有效提升项目迁移效率,适合需要跨引擎开发的用户使用。

向宇的博客,专注php/web全栈 unity游戏开发,欢迎大家评论纠错 850

Taro React组件使用(5) —— RuiPasswordInput 密码输入框显示隐藏和清空

初始化时,需要将传入的 value 赋值给当前组件的 value, 不能直接修改 props 的 value;在组件内输出组件内的变量时,最好先判断输出函数是否定义,再输出,否则很容易引起报错。

止于至善 891

vue 使用fs_在vue里面使用iVew框架

iVew框架的文档 https://www.iviewui.com/docs/guide/install这里使用的是 npm 来安装,在项目下执行下面命令npm install iview --save:$ npm install iview --savenpm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is ...

weixin_42363388的博客 1338

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Vue使用ivew组件实现响应式布局

1.vue-cli3.0中使用iview 链接: Vue-cli3.0中使用iview. 1.在控制台启动vue ui 2.在vue ui中搜索并安装iview 或者直接在控制台输入 cnpm install iview 3.安装好后重启项目 4.在main.js中引入 import iview from 'iview' import 'iview/dist/styles/iview.css'...

qq_40547061的博客 2332

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

java工程如何使用ivew_创建Vue项目以及引入Iview的方法示例

创建Vue项目 以及引入Iview# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ npm install$ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项...

weixin_39923572的博客 247

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Vue组件实战之ivew源码button篇

源码 template> div :class="wrapClasses"> template v-if="type !== 'textarea'"> div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotRead

小花的前端博客 3015

java工程如何使用ivew_iview 按需引入

安装npm install iview -D全部引入import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.use(iView);简单使用Primaryexport default {name: 'App',data() {return {value: 2}},methods: {click() {this.$Messa...

weixin_34569101的博客 297

创建vue项目以及引入ivew/element-ui(基于node)

创建vue项目,以及引入ivew(基于node) 准备: 1.检查电脑是否安装node:win+R --&gt; cmd --&gt; node -v ---看是否会显示出当前node的版本;如果未安装,请移步https://nodejs.org/en/ 2.安装好node后检查同上npm : npm -v 注:如果不希望node安装的依赖在c盘(会占一定的空间),可以修改相关配...

qq_32092505的博客 2045

java工程如何使用ivew_vue+iview搭建项目

1、安装配置vue前提是已经安装并配置好node和npm环境,先搭建vue脚手架 vue-cli# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project 切换到你创建的文件夹下$ npm install ...

weixin_30126739的博客 377

创建Vue项目 以及引入Iview

创建Vue项目 以及引入Iview官方文档# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令

晚灯看街的博客 3万+
上一篇: vue.js的使用总结(2)原理篇
下一篇: 解决iview中表格导出Excel时单元格内不换行的问题
厌笔不萧生
博客等级 码龄10年 5粉丝 36原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值