vue の iView とは何ですか?

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

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

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

iViewの特徴

• 豊富なコンポーネントとほとんどの Web サイトのシナリオに対応する機能

• # すぐに使える管理システムとハイエンドのコンポーネント ライブラリを提供し、開発コストを大幅に節約します

#プロフェッショナルで高品質な 1 対 1 の技術サポートを提供します
フレンドリーな 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>

関連する推奨事項:

##2020 フロントエンド vue の概要面接の質問 (回答付き)

vue チュートリアルの推奨事項: 2020 年最新の 5 つの vue.js ビデオ チュートリアルのセレクション

プログラミング関連の知識について詳しくは、

プログラミングビデオコース

にアクセスしてください! ！

以上がvue の iView とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。