iview框架內含很多預定義的組件，可以直接拿來使用，非常方便。

但iview有一個非常大的問題，就是教程實在非常少，尤其是不懂vue的童鞋更是無從下手。

項目創建過程：首先下載一個官方的demo工程，下載地址，下載后解壓放到一個目錄中，如：E:/iview

下載npm

cmd命令行進入E:/iview中，執行npm install下載一些庫文件

如果是第一次使用，需要執行npm run init創建一些運行文件

如果是開發過程中，使用npm run dev，會自動在瀏覽器中打開官方demo，你進行的任何修改都會自動更新

如果已開發完成，執行npm run build，就可以生成最終的項目文件了，生成后只需將E:/iview/index_prod.html和E:iview/dist/整個目錄復制到你的服務器即可(注意：直接打開html文件是無效的)

開發細節：

1.開發過程中基本只需要修改src目錄下的文件，下面內容不再提及

2.打開router.js文件，這個是路由目錄const?routers?=?[

{

path:?'/',??????//定義了主頁的路由

meta:?{??????????//額外信息

title:?''

},

component:?(resolve)?=>?require(['./views/index.vue'],?resolve)?????????//使用的組件

},

{

//你可以再定義多幾個路徑，照著上面部分來寫就可以了

}，

];

export?default?routers;

3.如果你需要和后臺交互，打開main.js文件import?VueResource?from?'vue-resource';????//添加這兩句

Vue.use(VueResource);

打開vendors.js文件import?VueResource?from?'vue-resource';????//添加這一句

4.使用組件，創建一個xx.vue文件，存放位置和是否使用由router.js內決定，寫法參照./views/index.vue即可

前后臺交互的細節

{{value}}

export?default?{

data?()?{

//后臺請求方法，初始化時使用/

this.$http.get('http://localhost:8888/api')

.then((response)?=>?{

this.value=response.data.runRedLight.ItemsPerPage;

})

.catch(function(response)?{

console.log(response);

});

return?{

value:?'',??????//需要先定義一個空值才能更改

}

},

methods:?{

show?(index)?{

/后臺請求方法添加到這里也可以，執行方法后才變更數據/

},

}

}

總結

以上是生活随笔為你收集整理的html 方式使用iview,VUE之iview框架使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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