极客观点
项目管理
HarmonyOS
问题描述
iview里面不能使用i-icon 和i-menu-item 但是可以用i-menu，为什么？
问题出现的环境背景及自己尝试过哪些方法
- 修改过
webpack.config.js里面的iview-loader的prefix为true了 - 使用的是
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.