必威体育Betway必威体育官网
当前位置:首页 > IT技术

iview_入门

时间:2019-08-28 06:40:00来源:IT技术作者:seo实验室小编阅读:76次「手机版」
 

iview

执行npm install iview --save项目中引入iview

引入 iView #

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

import iView from 'iview'
import 'iview/dist/styles/iview.css'
//导入样式

Vue.config.productionTip = false
Vue.use(iView)

在非 template/render 模式下(例如使用 cdn 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker。

以下组件,在非 template/render 模式下,需要加前缀 i-:

Button: i-button

Col: i-col

Table: i-table

Input: i-input

Form: i-form

Menu: i-menu

Select: i-select

Option: i-option

progress: i-progress

以下组件,在所有模式下,必须加前缀 i-,除非使用 iview-loader:

Switch: i-switch

Circle: i-circle

2.因为iView 的所有组件文案默认使用的是中文,通过设置可以使用其它语言。

在 Webpack 中使用 #

完整引入 iView

import Vue from 'vue';
import iView from 'iview';
import locale from 'iview/dist/locale/en-US';

3.

iView Loader

用途 #

统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle。

虽然不推荐,但通过 loader 选项配置,可以开启所有标签前缀的写法了,比如 i-date-picker。

安装 #

首先通过 npm 安装 iview-loader

npm install iview-loader --save-dev

4.栅格

采用了24栅格系统,将区域进行24等分

使用row在水平方向创建一行

将一组col插入在row中

在每个col中,键入自己的内容

通过设置col的span参数,指定跨越的范围,其范围是1到24

每个row中的col总和应该为24

水平排列的布局。

col必须放在row里面。

使用报错:

Parsing ERROR: x-invalid-end-tag :

问题原因

iView将标签渲染为原生html标签时,由于这些标签是自闭合的,所以有end标签会报错。

解决方案

修改配置文件,忽略该项检查:

根目录下 - .eslintrc.js - rules

添加一行:

'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }]

重启dev: npm run dev

5.layout

组件概述 #

Layout:布局容器,其下可嵌套 headersidercontentFooter或 Layout 本身,可以放在任何父容器中。

Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。

Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

相关阅读

新媒体入门:新媒体运营到底是什么?

最近有几位朋友一直在问我什么是新媒体?新媒体到底是什么?怎样才可以做好新媒体,做好新媒体,有什么好的建议或者方法。看到这一连串的

Mercurial与TortoiseHg使用入门教程(转)

原文地址为:Mercurial与TortoiseHg使用入门教程(转)Mercurial与TortoiseHg使用入门教程 文章来源:http://www.keakon.cn/bbs/thre

系统权限设计与实现入门

本文将从权限设计与实现是什么、为什么、怎么做三个方面,以初学者的角度分享一下权限设计与管理的相关心得,不足之处请指正。本来是

UWP入门(七)--SplitView详解与页面跳转

原文:UWP入门(七)--SplitView详解与页面跳转 官方文档,逼着自己用英文看,UWP开发离不开官方文档 1. SplitView 拆分视图控件

element-ui入门

简介element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为: 一致性 Consist

分享到:

栏目导航

推荐阅读

热门阅读