iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化

摘要:
首先,您需要安装vuecli 3.0版,单击Add Plug-in,输入iview,然后选择install All或Import On Demand。2.是否自定义主题变量3.多语言设置。在这里,我们选择所有作为默认值,然后单击“继续”。启动项目的入口文件导入iview插件Ivewi Js,也简单完整地导入iview的组件库。现在我们的项目可以完全使用ivew了。例如,主页上的按钮在此处呈现。全局配置https://www.ivie

首先需要安装vue cli 3.0版本
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第1张
点击添加插件,
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第2张
输入iview
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第3张
选中后安装
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第4张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第5张
全部导入还是按需导入。
2.是否需要自定义主题变量
3.多语言的设置。
这里我们全部选择为默认
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第6张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第7张
然后点击继续。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第8张
启动项目
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第9张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第10张

入口文件导入了iview的插件
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第11张

Ivewi.js也比较的简单的 完整的导入了iview的组件库。现在我们的项目可以完整的使用ivew了
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第12张
比如说首页上的button就是在这个地方渲染的。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第13张

全局配置

https://www.iviewui.com/docs/guide/global
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第14张

我们首页上的button没有使用任何的size属性的:
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第15张

比如说我们这里设置一个全局配置;
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第16张
页面的button就变成了大尺寸的button了
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第17张
单独设置button大小为small
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第18张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第19张
我们在select内复制一段代码
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第20张
复制一段代码

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第21张

直接替换掉App.vue原来的内容
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第22张

然后外层加个div包裹住
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第23张
然后在浏览器中的效果。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第24张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第25张

设置transfer:true后 浮动窗在body的里面了。并不在下拉菜单的div里面
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第26张

这是浮动层的元素。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第27张
这样设置的好处:
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第28张

上面的浮层被overflow给切掉了。设置transfer就不会出现此问题了
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第29张

自定义主题配置

vue-cli3设置iview自定义主题
https://my.oschina.net/zjhlearn/blog/1920642?tdsourcetag=s_pcqq_aiomsg
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第30张
默认蓝色主题
Iview使用的less和less-loader

注意安装的是2.7.3的版本
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第31张
再安装less-loader的4.0.6的版本;
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第32张
注释掉iview默认的css引入:

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第33张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第34张
这里面包含了所有的iview。变量还有各个组件的配置
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第35张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第36张
在webStorm编辑器中是可以直接点击进入对应的less文件中的
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第37张
直接进入到了index.less文件内。VScode中支持不了
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第38张
这是一个主色,我们在custom内覆盖这个变量就可以了。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第39张
设置为一个紫颜色
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第40张
重新引入我们的less文件
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第41张
重新启动项目
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第42张
查看页面的效果:鼠标放上去 紫色的效果出来了。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第43张



我们把下拉修改为一个Button,主意首字母B一定是大写的。Button是最能体现出主题颜色的
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第44张

页面效果

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第45张
 

国际化(多语言)配置

Iview默认是中文的
Iview.js内,支持多种语言
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第46张


iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第47张

Button替换不来我们换成DatePicker的插件,会比较明显。会根据不同的语言显示不同的文本

直接在这里搜索
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第48张

复制这一段。

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第49张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第50张
页面上显示效果
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第51张

例如我们再换成日语
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第52张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第53张
 

动态切换多语言

这里需要用到一个插件vue-i18n
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第54张

使用Vue.use注册一下i18n的插件

使用Vue.locale把这个变量去覆盖,要不然我们在使用i18n的时候会报错
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第55张

这两语言包只是iview里面组件的语言包
这个时候还没有引入自己业务的语言包

这个时候需要去声明一个列表。把你业务中的多言和iview的语言包进行一个merge合并,。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第56张
然后去创建i18n的实例

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第57张
前后都一样可以用缩写的形式

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第58张
Key和value的形式是一样的 es6中就可以使用缩写的形式

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第59张
那么怎么去使用呢

我们使用$t的形式,这里的变量message就是我们之前定义的
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第60张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第61张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第62张
我们再改成中文:

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第63张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第64张

Iview-loader

从20分钟开始
Iview-loader是个什么东东呢?我们到文档里面去看一下
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第65张


iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第66张
Vue里面Swich和Circle无论是大写还是小写都是无法直接被使用的。

如果你使用iview-loader的话 你就要写成i-switch和i-circle这种的标签的形式


搜索组件switch:
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第67张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第68张
我们的项目是通过vue-cli3.0来创建的。Iview-loader目前还没有很好的支持它
所以我们使用第二种用法:
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第69张

https://github.com/iview/iview-project
直接下载:
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第70张
1:npm install
安装所有依赖

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第71张
2:npm run init
执行初始化
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第72张

3:npm run dev
启动服务

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第73张
出现这个界面就代表我们的服务已经起来了
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第74张
这个配置里面已经预先安装好了iview-loader

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第75张

关于iview-laoder的配置已经在这里配置好。 Rules的规则是从下往上走的。
所以先进来的是下面的iview-loader
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第76张
Iview-loader的配置也是非常的简单 只有一个prefix前缀
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第77张
如果我们设置为true。开启后。那么我们就可以
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第78张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第79张

或者日期控件
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第80张

在文档中已经对所有支持的标签做了一个完整的列表
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第81张
Iview用到的所有的组件都可以在上面找到了。

创建新项目

通过vue-cli去创建新的项目,看一下刚才的配置
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第82张
在c盘创建iview-custom

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第83张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第84张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第85张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第86张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第87张

安装完成
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第88张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第89张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第90张
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第91张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第92张

是否替换iview的less的变量。默认是关闭的。如果我们开启的话刚才上面讲的那些配置就会默认都配置好了。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第93张

还有默认去选择一种语言。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第94张

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第95张
点击完成安装的按钮,进行安装

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第96张
Vue-cli貌似给你标出来了 改动了哪些地方,这里我们提交修改 貌似没作用 我们跳过也是可以的
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第97张
我们在编辑器中打开

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第98张
不管用我们还是直接拖拽到VSCode里面吧

这里主题颜色的变量就已经帮你写好了。
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第99张
在iview的配置里面也引入了less

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第100张
Api选择快速上手

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第101张
首先需要安装babel-plugin-import插件
iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第102张
如果刚才通过vue-cli配置安装的时候选择了按需加载的话就不需要在安装babel了。插件已经自动安装好了。你就什么都不用配置了。

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第103张
目前就选选择了按需加载的话,但是样式文件还是要引入完整的样式文件

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化第104张
 

免责声明:文章转载自《iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇计算数组的实际长度让html的text输入框只能输入数字和1个小数点下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)

http://www.jizhuomi.com/software/255.html  上一节中鸡啄米讲了为Ribbon Bar添加控件的方法。本节教程鸡啄米将继续完善前面的实例,讲解一些稍复杂的控件的添加方法,及如何为它们添加消息处理函数。        一、为Ribbon Bar添加更多Ribbon控件        鸡啄米将在上一节实例的基础上,继续添...

PySide教程:一个简单的点击按钮示例 狼人:

在这篇文章里,我们将为你展示如何使用PySide使用信号、槽机制。基本来说,这是Qt提供给你的允许一个图形控件与其他图形控件或者python代码进行通讯的特性。 我们将要创建一个应用,你点击应用中的按钮后将在Python终端里显示"Hello World"字样。 下面让我们引入必要的Qt类以及python sys类。 importsysfromPySi...

Python3 tkinter 界面布局(转自https://blog.csdn.net/junjun5156/article/details/72510927)

所谓布局,就是指控制窗体容器中各个控件(组件)的位置关系。tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。 pack布局 使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。 1 from tkinter import * 2 3 root =Tk() 4 5 #创建三...

Cypress web自动化39-.trigger()常用鼠标操作事件

前言 在web页面上经常遇到的鼠标事件有:鼠标悬停操作,鼠标右键,鼠标长按,拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件 语法使用示例 .trigger(eventName) .trigger(eventName, position) .trigger(eventName, options) .trigger(even...

android之手机震动Vibrate

[java] view plaincopy  package cn.com.chenzheng_java;      import android.app.Activity;   import android.media.AudioManager;   import android.os.Bundle;   import android.os.Vi...

Bootstrap框架(3)

一 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 1.1 用法 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置d...