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。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。