在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:
npm install --save iview
2) CDN引入:
<link rel="stylesheet" href="css/iview.css"> <script src="js/iview.min.js"></script>
#引入iView
#1 ) 一般在webpack 入口頁 main.js 中如下配置:
import Vue from 'vue'; import VueRouter from 'vue-router'; import App from 'components/app.vue'; // 路由挂载 import Routers from './router.js'; // 路由列表 import iView from 'iview'; // 导入组件库 import 'iview/dist/styles/iview.css'; // 导入样式 Vue.use(VueRouter); Vue.use(iView); // 路由配置 const RouterConfig = { routes: Routers }; const router = new VueRouter(RouterConfig); new Vue({ el: '#app', router: router, render: h => h(App) });
2) 按需引用
在webpack中按需使用元件,可減少檔案體積:
import Input from '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>
錯誤的使用方法:
<Page current="1" total="10"></Page>
更多程式相關知識,請造訪:相關推薦:
程式設計影片課程! !
以上是vue中iView是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!