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})  }}

布局组件的使用

效果:

代码

            
     
      Sider
             
                 
      
       Header
      
            
      
       Content
                  
              
         
    

效果:

代码:

栅格组件实现响应式布局

我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。

我们定义了两个概念，行row和列col，具体使用方法如下：

• 使用row在水平方向创建一行
• 将一组col插入在row中
• 在每个col中，键入自己的内容
• 通过设置col的span参数，指定跨越的范围，其范围是1到24
• 每个row中的col总和应该为24

注意：非 template/render 模式下，需使用 i-col。