iview i-row 标签无法使用?

已经配置了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里面还是报错

clipboard.png

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

clipboard.png

3. 用的是vue.esm.js

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

期望结果

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

感谢各位大神~求解惑

阅读 1.2k
评论 2019-05-13 提问
    4 个回答

    你试试<i-Row>...


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

    clipboard.png

    clipboard.png

    clipboard.png

    评论 赞赏

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

      评论 赞赏
        captainLuo
        • 3
        • 新人请关照

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

        评论 赞赏
          fans
          • 62

          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放前边

          评论 赞赏
            撰写回答

            登录后参与交流、获取后续更新提醒