共计 2316 个字符，预计需要花费 6 分钟才能阅读完成。
vue-cli3.0 中使用 iview
1. 全局引入
在项目入口文件./main.js 中需要配置如下：
import Vue from ‘vue’
import iview from ‘iview’
import ‘iview/dist/styles/iview.css’
Vue.use(iview)
2. 按需引入
首先你需要安装一个 babel 插件: npm install babel-plugin-import –save-dev
在 vue-cli3 生成的项目中，babel 的配置文件是 babel.config.js，默认配置是这样的：
module.exports = {
presets: [
‘@vue/app’
]
}
你需要将刚刚安装的插件添加进去，添加后的内容如下：
module.exports = {
presets: [
‘@vue/app’
],
‘plugins’: [[‘import’, {
‘libraryName’: ‘iview’,
‘libraryDirectory’: ‘src/components’
}]]
}
接下来在 main.js 里你可以这样按需引入：
import ‘iview/dist/styles/iview.css’ // iview 的样式文件还是要引入的
import {Button, Table} from ‘iview’
Vue.component(‘Button’, Button)
在非 template/render 模式下，包括 JSX 写法中，组件名要用分隔形式，如 DatePicker 要写为 date-picker。而对于 iview 中名称和原生 HTML 标签名相同的组件，需要加 i - 前缀，如 Button 要写为 i -button。
我们可以通过配置 iview-loader 来解决 Switch 在任何模式下都必须写为 i -switch，Circle 要写为 i -circle 的问题。
3.vue-cli3.0 中配置 iview-loader
首先需要安装 iview-loader：
npm install iview-loader –save-dev
接下来在 vue.config.js 中添加 iview-loader：
module.exports = {
chainWebpack: config => {
config.module
.rule(‘vue’)
.use(‘iview’)
.loader(‘iview-loader’)
.options({prefix: false})
}
}
布局组件的使用
效果:
代码
<Layout>
<Sider hide-trigger>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
效果:
代码:
<template>
<div class=”layout-wrapper”>
<Layout class=”layout-outer”>
<Sider collapsible breakpoint=”sm” reverse-arrow v-model=”collapsed”></Sider>
<Layout>
<Header class=”header-wrapper”>
<Icon :class=”triggerClasses” @click.native=”handleCollapsed” type=”md-menu” :size=”32″/>
</Header>
<Content class=”content-con”>
<Card shadow class=”page-card”>
<router-view/>
</Card>
</Content>
</Layout>
</Layout>
</div>
</template>
<script>
export default {
data () {
return {
collapsed: false
}
},
computed: {
triggerClasses () {
return [
‘trigger-icon’,
this.collapsed ? ‘rotate’ : ”
]
}
},
methods: {
handleCollapsed () {
this.collapsed = !this.collapsed
}
}
}
</script>
<style lang=”less”>
.layout-wrapper, .layout-outer{
height: 100%;
.header-wrapper{
background: #fff;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .1);
padding: 0 23px;
.trigger-icon{
cursor: pointer;
transition: transform .3s ease;
&.rotate{
transform: rotateZ(-90deg);
transition: transform .3s ease;
}
}
}
.content-con{
padding: 10px;
}
.page-card{
min-height: ~”calc(100vh – 84px)”;
}
}
</style>
栅格组件实现响应式布局
我们采用了 24 栅格系统，将区域进行 24 等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。
我们定义了两个概念，行 row 和列 col，具体使用方法如下：
使用 row 在水平方向创建一行
将一组 col 插入在 row 中
在每个 col 中，键入自己的内容
通过设置 col 的 span 参数，指定跨越的范围，其范围是 1 到 24
每个 row 中的 col 总和应该为 24
注意：非 template/render 模式下，需使用 i-col。
