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'

}

});

總結

以上是生活随笔為你收集整理的iview template模式_使用Iview Menu 导航菜单(非 template/render 模式)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。