官方文档对非模板模式(非 template/render 模式)语焉不详，一个简单的例子调了好长时间，贴一下代码，帮助一下同道中人。
调试代码，注意修改js、css的路径。官方网站可以下载。
<!DOCTYPE html>
<!--
作者：wallimn
博客：http://wallimn.iteye.com
时间：2017-11-22
-->
<html>
<head>
<meta charset="utf-8">
<title>iview菜单示例</title>
<link rel="stylesheet" type="text/css" href="iview/styles/iview.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="iview/iview.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app2">
<i-menu mode="horizontal" :theme="menuTheme" active-name="1" @on-select="onMenuSelect">
<Menu-Item name="1">
<Icon type="ios-paper"></Icon>时事新闻
</Menu-Item>
<Menu-Item name="2">
<Icon type="ios-people"></Icon>时事评论
</Menu-Item>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>特邀专家
</template>
<Menu-Group title="国际专家">
<Menu-Item name="3-1">张无忌</Menu-Item>
<Menu-Item name="3-2">赵 敏</Menu-Item>
<Menu-Item name="3-3">张三丰</Menu-Item>
</Menu-Group>
<Menu-Group title="国内专家">
<Menu-Item name="3-4">萧 峰</Menu-Item>
<Menu-Item name="3-5">虚 竹</Menu-Item>
</Menu-Group>
</Submenu>
<Menu-Item name="4">
<Icon type="settings"></Icon>http://wallimn.iteye.com
</Menu-Item>
</i-menu>
<br>
<p>修改主题</p>
<Radio-Group v-model="menuTheme">
<Radio label="light"></Radio>
<Radio label="dark"></Radio>
<Radio label="primary"></Radio>
</Radio-Group></div>
<script type="text/javascript">
var vue = new Vue({
el:'#app2',
data:function(){
return {
menuTheme: 'primary'
};
},
methods:{
onMenuSelect:function(name){
console.log(name," is clicked!");
if(name==="4"){
window.location.href='http://wallimn.iteye.com';
}
}
}
});
</script>
</body>
</html>
总结一下：
1.有些元素要加上i-前缀，官方文档都有提示，如Menu改写为i-menu。但有些不需要加，如Icon，很让人困惑。
2.驼峰写法的元素，要用下划线分开。如MenuItem，要改写为menu-item。
3.查看网页源码，如果自定义元素没有被解析，就是写法不对。
分享到：
相关推荐
"OneUI3.1前端框架"是一个专门设计用于构建自适应多平台浏览器界面的WEB前端框架。这个框架的出现，极大地简化了开发人员在创建现代Web应用时对用户体验和跨平台兼容性的处理。以下是关于OneUI3.1的详细知识点： 1....
**H+前端UI框架** H+是一款基于Bootstrap框架深度定制的高性能前端UI解决方案，专为开发者和设计师打造。它的设计风格简洁、现代，且高度可定制化...如果你正在寻找一个高效的前端框架，H+无疑是一个值得考虑的选择。
前端框架的简介及html计算器实例及讲解前端框架的简介及html计算器实例及讲解前端框架的简介及html计算器实例及讲解前端框架的简介及html计算器实例及讲解前端框架的简介及html计算器实例及讲解前端框架的简介及html...
**UI前端框架——Amaze UI深度解析** Amaze UI，这款优秀的前端框架，以其轻量级、高效且全面的特点，在国内UI设计领域中备受推崇。它不仅为开发者提供了丰富的组件和工具，还能够轻松实现PC与移动App端的适配，...
### 蚂蚁科技移动开发平台前端框架与UI组件使用指南关键知识点 #### 一、文档概述 **标题**：“蚂蚁科技移动开发平台前端框架与UI组件使用指南20230208.pdf” **描述**：此文档旨在提供关于蚂蚁科技前端框架和UI...
这个"Vue Element UI 完整版前端框架"提供了完整的源码，意味着你可以深入理解每个组件的工作原理，并根据项目需求进行自定义。 Vue.js 的核心特性包括： 1. **响应式数据绑定**：Vue 使用声明式的数据绑定，使得...
H-ui前端框架是一款广泛应用于网页开发的开源UI框架，它为开发者提供了丰富的组件和模板，以便快速构建美观、响应式的Web界面。H-ui的设计理念是简洁、易用，旨在提高开发效率，降低学习成本，同时保持高度的可定制...
标题中的“整合的功能齐全的前端插件加实用前端框架”暗示了这个压缩包可能包含一个完整的前端开发解决方案，包括各种常用的前端插件和一个高效、易用的前端框架。这样的组合通常是为了帮助开发者快速构建现代Web...
根据给定的内容，我将为您总结和详细说明JQUER UI（应为DWZ富客户端框架）相关的知识点，这些知识点包括框架的基本概念、主要特性、组件使用、API介绍、以及集成和常见问题解决等。 DWZ富客户端框架是一个基于...
Ace Admin 是一个强大的前端框架，专为开发企业级Web应用后台管理系统而设计。这个框架以其高效、可定制性高和用户界面友好而受到广大开发者欢迎。Ace Admin 的核心是基于Bootstrap，一个流行的前端开发框架，这使得...
**CSS前端框架与实例解析** 在网页设计与开发中，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。前端框架则是为了简化这一过程，提供了一套预定义的...
Easy UI 是一个基于 jQuery 的轻量级前端框架，它的设计目标是简化网页界面的构建，提供丰富的组件和直观的API，让开发者能够快速地创建出美观且功能强大的用户界面。这个框架深受开发者喜爱，因为它极大地提高了...
【超好看的前端框架】是一种专为管理后台设计的前端框架，它在提供高效开发工具的同时，也注重用户体验和视觉美感。这款框架与经典的easyUI有相似之处，都包含了一系列常用的前端组件，如表格、表单、按钮、下拉菜单...
总结来说，AdminLTE是一个基于Bootstrap的高性能前端框架，专为后台管理界面设计，具备响应式布局和丰富的UI组件。它简化了开发流程，提供了美观且功能齐全的界面，适用于多种项目需求。通过理解并利用AdminLTE的...
iView Admin是一款基于Vue.js的前端管理后台集成解决方案，它结合了Vue.js的响应式特性和iView UI组件库的强大功能。Vue.js作为轻量级的JavaScript框架，以其简洁的API和高效的虚拟DOM操作，在单页应用(SPA)开发中...
- **跨平台兼容**：大多数前端框架都考虑了浏览器兼容性，确保在多种环境下运行良好。 - **社区支持**：开源意味着有活跃的社区，开发者可以在遇到问题时寻求帮助，共享解决方案。 - **持续更新与优化**：开源...
运行效果：用法：npm install element-ui@next示例代码：import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css'; Vue.use(Element) // or import ...
AmazeUI是一个强大的后台前端框架，专为适应移动互联网时代的需求而设计。它秉持“移动优先”（Mobile first）的设计哲学，将移动端的用户体验作为核心，进而逐步拓展至桌面和其他大屏设备，确保在各种屏幕尺寸下都...
Ace+Admin前端框架是一款广泛应用在企业级Web应用中的开源UI框架，它结合了Ace和AdminLTE两个优秀的前端组件库，提供了丰富的界面元素、布局选项和交互设计，旨在为开发者提供一个高效、美观且易于定制的开发环境。...