0

问题描述

iview里面不能使用i-icon 和i-menu-item 但是可以用i-menu,为什么?

问题出现的环境背景及自己尝试过哪些方法

  1. 修改过webpack.config.js里面的iview-loader的prefix为true
  2. 使用的是vue的完整版本

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            test
        </title>
    </head>
    <body>
        <div id="app">
            <i-menu theme="light" active-name="1" mode="horizontal">
                <i-menu-item name="1">
                    <i-icon type="ios-paper"></i-icon>
                    内容管理
                </i-menu-item>
            </i-menu>
        </div>
    <script type="text/javascript" src="/public/dist/js/main.bundle.js"></script></body>
</html>

webpack.config.js

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // mode: 'production',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js',
        publicPath: '/public/dist/'
    },
    module: {
        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']
        }]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './view/index.html',
            inject: 'body',
        }),
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    }
}

你期待的结果是什么?实际看到的错误信息又是什么?

错误信息

[Vue warn]: Unknown custom element: <i-menu-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
jaysun 447
2019-05-09 提问
0 个回答

撰写答案

推广链接