iview(vue中iView指的是什么)

在vue中,iView是一套基于Vue.js的開源UI組件庫,主要服務于PC界面的中后臺產品。iView提供豐富的組件和功能,可滿足絕大部分網站場景;提供開箱即用的Admin系統和高階組件庫,極大程度節省開發成本。

iView 是一套基于 Vue.js 的開源 UI 組件庫,主要服務于 PC 界面的中后臺產品。使用單文件的 Vue 組件化開發模式,基于 npm + webpack + babel 開發,支持 ES2015 高質量、功能豐富 友好的 API ,自由靈活地使用空間,由TalkingData開發維護,有很多知名互聯網企業都在使用。

官網地址:https://www.iviewui.com/

iView的特性

• 豐富的組件和功能,滿足絕大部分網站場景

• 提供開箱即用的 Admin 系統 和 高階組件庫,極大程度節省開發成本

• 提供專業、優質的一對一技術支持

• 友好的 API ,自由靈活地使用空間

• 細致、漂亮的 UI

• 事無巨細的文檔

• 可自定義主題

iView的安裝:

1) 使用npm:

npminstall--saveiview

2) CDN引入:

<linkrel="stylesheet"href="css/iview.css"><scriptsrc="js/iview.min.js"></script>

引入 iView

1) 一般在 webpack 入口頁面 main.js 中如下配置:

importVuefrom'vue';importVueRouterfrom'vue-router';importAppfrom'components/app.vue';//路由掛載importRoutersfrom'./router.js';//路由列表importiViewfrom'iview';//導入組件庫import'iview/dist/styles/iview.css';//導入樣式Vue.use(VueRouter);Vue.use(iView);//路由配置constRouterConfig={routes:Routers};constrouter=newVueRouter(RouterConfig);newVue({el:'#app',router:router,render:h=>h(App)});

2) 按需引用

在webpack中按需使用組件,可以減少文件體積:

importInputfrom'iview/src/components/input';

注意:

①　按需引用仍需要導入樣式,即在 main.js 或根組件執行 import 'iview/dist/styles/iview.css';

②　按需引用是直接引用的組件庫源代碼,需要借助 babel 進行編譯,以 webpack 為例:

module:{rules:[{test:/iview.src.*?js$/,loader:'babel'},{test:/\.js$/,loader:'babel',exclude:/node_modules/}]}

組件使用規范

使用:prop傳遞數據格式為數字、布爾值或函數時,必須帶:(即,使用v-bind),它的值會被當做JavaScript表達式計算,否則會被當做字符串。

正確的使用方法:

<Page:current="1":total="10"></Page>

錯誤的使用方法:

<Pagecurrent="1"total="10"></Page>