フロントエンド|vue.jsシリーズチュートリアル4の統合Elementスタイルライブラリ

多くのパートナーは、フロントエンドベースの1つであるcssに接触し始めたとき、その属性が直交していない特性に苦しみ、障害が重い.
では、今日は外部uiライブラリを導入してみましょう.他の人がカプセル化したスタイルで、「サボる」時間を増やすことができます.
まず、技術兄がネット上で見つけたvueオープンソースプロジェクトライブラリをお届けします.uiライブラリ、vueベースの開発フレームワーク、他の人が書いたdemoがそろっています.今日使用しているelementコンポーネントもここにあります.https://juejin.im/entry/58bf745fa22b9d0058895a58
Element-お腹すいた?公式uiコンポーネントライブラリ
Element公式サイトアドレス:http://element.eleme.io/#/zh-CN
Elementはお腹が空いたか公式出品のvue 2に基づくセットです.0のuiライブラリは、vue開発に広く応用され、angular、reactなどのフレームワークの導入もサポートされています.
Elementは開発者の生態圏が大きく、業務コンポーネントが全面的で、機能が豊富でSSRをサポートするなどの特徴がある.
elementコンポーネントライブラリの導入方法

まずelement公式サイトに入り、右上の「コンポーネント」をクリックして、「開発ガイド」欄の下の「インストール」ページに入ります.

vscodeでコンポーネントライブラリを導入する必要があるvueプロジェクトを開き、「端末」欄にnpmインストールコマンドを入力し、車に戻る:npm i element-ui -S

「クイックハンド」をクリックして次のページに進み、工事下のmain.jsファイルはelementコンポーネントをグローバルに導入します.

上の図の:import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);の3行のコードを私たちの工事のmainにコピーして貼り付けます.js里:main.js導入element
これでelementコンポーネントの導入が完了します.
注意:導入方法は「グローバル導入」と「オンデマンド導入」の2種類があります.
elementコンポーネントの使用方法
elementのカラーセレクタコンポーネントを例にとると、ソースコードを開くことができます.
次に、ソースコードのhtml部分、js部分をそのままハローワールドにコピーして貼り付けることができる.vueで実行:
ブラウザのデバッグを開くと、次のような効果が得られます.
もちろん、公式ドキュメントで与えられた調整可能なパラメータを変更することで、他の効果を実現することもできます.
同様に、他のelementコンポーネントも同様の使用方法です.
elementのようなコンポーネントを原生cssで実現するには,時間と実現の難しさが必要であり,element,iViewなどのuiライブラリにより,巨人の肩に立って開発し,フロントエンドの作業量を軽減することができる.