首頁 > web前端 > Vue.js > 主體

vue中iView是什麼?

青灯夜游
發布: 2020-11-17 16:35:44
原創
5937 人瀏覽過

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

vue中iView是什麼?

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 &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
import App from &#39;components/app.vue&#39;; // 路由挂载
import Routers from &#39;./router.js&#39;; // 路由列表
import iView from &#39;iview&#39;; // 导入组件库
import &#39;iview/dist/styles/iview.css&#39;; // 导入样式
Vue.use(VueRouter);
Vue.use(iView);
// 路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
    el: &#39;#app&#39;,
    router: router,
    render: h => h(App)
});
登入後複製

2) 按需引用

在webpack中按需使用元件,可減少檔案體積:

import Input from &#39;iview/src/components/input&#39;;
登入後複製

注意:

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

#② 按需引用是直接引用的元件庫原始碼,需要藉助babel 編譯,以webpack 為例:

module: {
    	rules: [
        	{ test: /iview.src.*?js$/, loader: &#39;babel&#39; },
        	{ test: /\.js$/, loader: &#39;babel&#39;, exclude: /node_modules/ }
    	]
}
登入後複製

元件使用規範

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

正確的使用方法:

<Page :current="1" :total="10"></Page>
登入後複製

錯誤的使用方法:

<Page current="1" total="10"></Page>
登入後複製

相關推薦:

##2020年前端vue面試題大匯總(附答案)

vue教學推薦:2020最新的5個vue.js影片教學精選

更多程式相關知識,請造訪:

程式設計影片課程! !

以上是vue中iView是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板