首先需要安装vue cli 3.0版本

点击添加插件,

输入iview

选中后安装


全部导入还是按需导入。
2.是否需要自定义主题变量
3.多语言的设置。
这里我们全部选择为默认


然后点击继续。

启动项目

入口文件导入了iview的插件

Ivewi.js也比较的简单的 完整的导入了iview的组件库。现在我们的项目可以完整的使用ivew了

比如说首页上的button就是在这个地方渲染的。

全局配置

https://www.iviewui.com/docs/guide/global

我们首页上的button没有使用任何的size属性的:

比如说我们这里设置一个全局配置;

页面的button就变成了大尺寸的button了

单独设置button大小为small


我们在select内复制一段代码

复制一段代码

直接替换掉App.vue原来的内容

然后外层加个div包裹住

然后在浏览器中的效果。

设置transfer:true后 浮动窗在body的里面了。并不在下拉菜单的div里面

这是浮动层的元素。

这样设置的好处:

上面的浮层被overflow给切掉了。设置transfer就不会出现此问题了

自定义主题配置

vue-cli3设置iview自定义主题
https://my.oschina.net/zjhlearn/blog/1920642?tdsourcetag=s_pcqq_aiomsg

默认蓝色主题
Iview使用的less和less-loader

注意安装的是2.7.3的版本

再安装less-loader的4.0.6的版本;

注释掉iview默认的css引入:


这里面包含了所有的iview。变量还有各个组件的配置


在webStorm编辑器中是可以直接点击进入对应的less文件中的

直接进入到了index.less文件内。VScode中支持不了

这是一个主色,我们在custom内覆盖这个变量就可以了。

设置为一个紫颜色

重新引入我们的less文件

重新启动项目

查看页面的效果:鼠标放上去 紫色的效果出来了。

我们把下拉修改为一个Button,主意首字母B一定是大写的。Button是最能体现出主题颜色的

页面效果

国际化(多语言)配置

Iview默认是中文的
Iview.js内,支持多种语言

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

直接在这里搜索

复制这一段。


页面上显示效果

例如我们再换成日语

动态切换多语言

这里需要用到一个插件vue-i18n

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

使用Vue.locale把这个变量去覆盖,要不然我们在使用i18n的时候会报错

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

这个时候需要去声明一个列表。把你业务中的多言和iview的语言包进行一个merge合并,。

然后去创建i18n的实例


前后都一样可以用缩写的形式


Key和value的形式是一样的 es6中就可以使用缩写的形式


那么怎么去使用呢

我们使用$t的形式,这里的变量message就是我们之前定义的



我们再改成中文:


Iview-loader

从20分钟开始
Iview-loader是个什么东东呢?我们到文档里面去看一下


Vue里面Swich和Circle无论是大写还是小写都是无法直接被使用的。

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

搜索组件switch:


我们的项目是通过vue-cli3.0来创建的。Iview-loader目前还没有很好的支持它
所以我们使用第二种用法:

https://github.com/iview/iview-project
直接下载:

1:npm install
安装所有依赖


2:npm run init
执行初始化

3:npm run dev
启动服务


出现这个界面就代表我们的服务已经起来了

这个配置里面已经预先安装好了iview-loader

关于iview-laoder的配置已经在这里配置好。 Rules的规则是从下往上走的。
所以先进来的是下面的iview-loader

Iview-loader的配置也是非常的简单 只有一个prefix前缀

如果我们设置为true。开启后。那么我们就可以

或者日期控件

在文档中已经对所有支持的标签做了一个完整的列表

Iview用到的所有的组件都可以在上面找到了。

创建新项目

通过vue-cli去创建新的项目,看一下刚才的配置

在c盘创建iview-custom




安装完成



是否替换iview的less的变量。默认是关闭的。如果我们开启的话刚才上面讲的那些配置就会默认都配置好了。

还有默认去选择一种语言。


点击完成安装的按钮,进行安装


Vue-cli貌似给你标出来了 改动了哪些地方,这里我们提交修改 貌似没作用 我们跳过也是可以的

我们在编辑器中打开


不管用我们还是直接拖拽到VSCode里面吧

这里主题颜色的变量就已经帮你写好了。

在iview的配置里面也引入了less


Api选择快速上手


首先需要安装babel-plugin-import插件

如果刚才通过vue-cli配置安装的时候选择了按需加载的话就不需要在安装babel了。插件已经自动安装好了。你就什么都不用配置了。


目前就选选择了按需加载的话,但是样式文件还是要引入完整的样式文件

iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化的更多相关文章

  1. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇

    1.iView 实战教程之配置篇 点击添加插件,. 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动项目 入口文件导入了 ...

  2. iView 实战系列教程(21课时)_4.iView 实战教程之布局篇(二)

    https://github.com/iview/iview 下载iview的代码 Layout布局大概的样子 Iview的源代码.Layout 组件比较简单,,里面一个slot Sider是最复杂的 ...

  3. iView 实战系列教程(21课时)_3.iView 实战教程之布局篇(一)

    Grid布局 先了解一下iview的24栅格布局 清理一下App.vue 然后从iview的color里面获取推荐的背景色 我们先渲染栅格 24列,然后再讲解他是一个什么东西: 栅格外面row包裹的, ...

  4. iView 实战系列教程(21课时)_2.iView 实战教程之导航、路由、鉴权篇

    在c盘创建一个iview-router的项目 . 然后使用默认的配置 跳过 添加vue-router的插件 编译我们的文件. 编译好之后,我们启动App 默认的页面就打开了. 默认两个路由一个是abo ...

  5. iView 实战系列教程(21课时)_汇总贴

    iView 实战系列教程(21课时)_汇总贴 课程地址; https://segmentfault.com/ls/1650000016424063 iView 实战系列教程(21课时)_1.iView ...

  6. ElasticSearch实战系列二: ElasticSearch的DSL语句使用教程---图文详解

    前言 在上一篇中介绍了ElasticSearch集群和kinaba的安装教程,本篇文章就来讲解下 ElasticSearch的DSL语句使用. ElasticSearch DSL 介绍 Elastic ...

  7. ElasticSearch实战系列三: ElasticSearch的JAVA API使用教程

    前言 在上一篇中介绍了ElasticSearch实战系列二: ElasticSearch的DSL语句使用教程---图文详解,本篇文章就来讲解下 ElasticSearch 6.x官方Java API的 ...

  8. ElasticSearch实战系列六: Logstash快速入门和实战

    前言 本文主要介绍的是ELK日志系统中的Logstash快速入门和实战 ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...

  9. ElasticSearch实战系列一: ElasticSearch集群+Kinaba安装教程

    前言 本文主要介绍的是ElasticSearch集群和kinaba的安装教程. ElasticSearch介绍 ElasticSearch是一个基于Lucene的搜索服务器,其实就是对Lucene进行 ...

随机推荐

  1. arcgis server10.2发布地图服务报错

    发布地图服务时,读取了本机电脑中的切片方案.发布服务,报打包成功,但发布失败错误. 解决办法:给arcgis账户,赋予读写权限即可.重复发布服务,成功发布.

  2. AtCoder Beginner Contest 088 C Takahashi's Information

    Problem Statement We have a 3×3 grid. A number ci,j is written in the square (i,j), where (i,j) deno ...

  3. windows 10 x64系统 jdk1.7、jdk1.8 切换(jdk为exe安装版本)

    电脑先安装的1.7,后来安装1.8,改JAVA_HOME为1.8后cmd->java.javac.java -version可用1.8 后想改为1.7,更改环境变量(步骤1)后cmd->j ...

  4. C#基础知识之DirectorySearcher 类

    活动目录(Active Directory)是从一个数据存储开始的,它采用了类似Exchange Server的数据存储,所以被称为Extensible Storage Service (ESS).其 ...

  5. 磁盘,fdisk分区,MBR,dd命令

    光盘和磁盘.u盘.软盘.硬盘有什么区别 ①光盘: cdrom/dvdrom:光驱(光盘驱动器)    rom:只读    ram:可以擦写    cd:700M    dvd:4G ②软盘:flopp ...

  6. JVM 常量池、运行时常量池、字符串常量池

    常量池: 即class文件常量池,是class文件的一部分,用于保存编译时确定的数据. 保存的内容如下图: D:\java\test\out\production\test>javap -ver ...

  7. window.location对象 获取页面地址

    window.location对象的属性: 属性 含义 值 location.protocol 协议 "http://"或"https://" location ...

  8. MySQL--缓存的使用注意

    几个参数 query_cache_type:为ON时开启,为OFF关闭,为DEMAND时则只有查询语句中有sql cache时才使用缓存 query_cache_size: 缓存的内存空间 query ...

  9. linux下实现web数据同步的四种方式(性能比较)

    实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享2.rsync +inotify实现web数据同步3.rsyn ...

  10. 【NOIP2015模拟10.22】最小代价

    前言 本来在比赛上就想到最小生成树了,但不相信这道题那么简单,然后就没有然后了... 题目 给出一幅由n个点m条边构成的无向带权图. 其中有些点是黑点,其他点是白点. 现在每个白点都要与他距离最近的黑 ...