vue-cli3.0中使用iview1.全局引入在项目入口文件./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。