iview template模式_使用Iview Menu 导航菜单(非 template/render 模式)

1、首先直接参照官网Demo例子，将代码拷贝进项目中运行，

直接报错：

Cannot read property 'mode' of undefined.

然后查看官网介绍，有一行注意文字，好吧。

2、然后将Menu标签改为i-menu.

这下没有报错了，但是样式显示的根本不是想要的：

什么个鬼，然后官网也没有其他什么说明了。。。。

OK，找度娘查找资料，找到这篇文章：http://wallimn.iteye.com/blog/2400663

原来还有几个标签必须得改掉才行：

1、MenuItem  修改为：  Menu-Item

2、  修改为：     (标签必须写完整，Icon标签后文字显示不出来，这是什么骚操作。。。。)

3、RadioGroup 修改为： Radio-Group

修改为之后，效果OK了，真是坑，按照官网介绍，并没有指出这些组件必须要这样写，只是粗略的说了一些，大概可能也许还是我太菜鸟了，这么简单的问题还花了不少时间：

(官网：https://www.iviewui.com/docs/guide/start#TBTX)

在非 template/render 模式下(例如使用 CDN 引用时)，组件名要分隔，例如 DatePicker 必须要写成 date-picker。

以下组件，在非 template/render 模式下，需要加前缀 i-：

Button: i-button

Col: i-col

Table: i-table

Input: i-input

Form: i-form

Menu: i-menu

Select: i-select

Option: i-option

Progress: i-progress

Time: i-time

以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：

Switch: i-switch

Circle: i-circle

附完整示例代码：

iview example

内容管理

用户管理

统计分析

新增和启动

活跃分析

时段分析

用户留存

流失用户

综合设置

Change theme

var vue = new Vue({

el: '#app',

data: {

theme1: 'primary'

}

});