ホームページ > 記事 > ウェブフロントエンド > vue の iView とは何ですか?

vue の iView とは何ですか?

青灯夜游オリジナル: 2020-11-11 11:45:135928ブラウズ

vue では、iView は Vue.js に基づくオープンソース UI コンポーネントライブラリのセットであり、主に PC インターフェイスのミッドエンド製品とバックエンド製品を提供します。 iView は、ほとんどの Web サイトのシナリオに対応できる豊富なコンポーネントと機能を提供し、すぐに使える管理システムとハイエンドのコンポーネントライブラリを提供して、開発コストを大幅に節約します。

vue の iView とは何ですか?

iView は、Vue.js に基づくオープンソース UI コンポーネントライブラリのセットで、主に PC インターフェイス用のミッドエンド製品とバックエンド製品を提供します。 npm webpack babel に基づいて開発された単一ファイルの Vue コンポーネント開発モデルを使用し、ES2015 高品質で機能豊富で使いやすい API をサポートし、スペースを自由かつ柔軟に使用できます。多くの有名なインターネット企業によって提供されています。

公式Webサイトアドレス: https://www.iviewui.com/

iViewの特徴

豊富なコンポーネントとほとんどの Web サイトのシナリオに対応する機能
# すぐに使える管理システムとハイエンドのコンポーネントライブラリを提供し、開発コストを大幅に節約します

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>

vue の iView とは何ですか?

関連記事