iview i-row 标签无法使用?

Question

已经配置了iview-loader

1. webpack.config.js 已配置iview-loader

rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: (loader) => [
                require('autoprefixer')()
            ]
        }
    }]
}, {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: path.resolve(__dirname, 'node_module')
}, {
    test: /\.vue$/,
    use: [{
        loader: 'vue-loader',
        options: {}
    }, {
        loader: 'iview-loader',
        options: {
            prefix: true
        }
    }]
}, {
    test: /\.(png|jpg|gif|svg|ttf|woff2|woff)$/i,
    use: ['file-loader']
}]

2. html里面还是报错

看下面图片的<i-row>标签没有解析

3. 用的是vue.esm.js

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
}

期望结果

引入iview-loader后，可以使用所有的i-前缀的标签

感谢各位大神~求解惑

Answer 1

你试试<i-Row>...

---

追加:
我用的是vue-cli3, 我试了一下, 解析了. iview-loader的版本是1.2.2, 你再看看是不是别的问题吧.

Answer 2

项目服务关掉重新启动下看看呢，webpack配置后需要重启才能生效

Answer 3

由于Vue-CLI3对于Loader的支持不够，用CLI3创建的项目无法使用Loader，这里需要使用官方推荐的iView-project创建项目来使用Loader
在webpack.base.config.js中可以对Loader进行配置

Answer 4

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'
调整下顺序，把iview放前边