エレメントの紹介
以前に説明したフロントエンド開発モデルの MVVM を学生がまだ覚えているかどうかはわかりませんが、以前に学習した vue は VM 開発に焦点を当てており、主にデータをビューにバインドするために使用されていました。次に学習する ElementUI は、次のモデルです。 VM 開発に重点を置いており、V によって開発されたフロントエンド フレームワークは主に美しいページの開発に使用されます。
Element: これは、Web ページを迅速に構築するために Ele.me のフロントエンド開発チームによって提供される、Vue ベースの Web サイト コンポーネント ライブラリのセットです。
Element は、私たちが使用できる多くのコンポーネント (Web ページを構成する部分) を提供します。たとえば、ハイパーリンク、ボタン、画像、表などです。以下の図に示すように、私たちが開発したページと ElementUI が提供するページの効果を比較します。ElementUI が提供するさまざまな美しいボタンが見つかります。
ElementUI の学習方法はこれまでの学習方法とは異なり、バックエンド開発者としてElementUI の公式 Web サイトからコンポーネントを自分のページにコピーし、いくつかの修正を加える方法を学習するだけで済みます。公式サイトアドレス：https://element.eleme.cn/#/zh-CN ElementUIで提供される共通コンポーネントを中心に学習しますが、その他のコンポーネントについては、これらのコンポーネントを学習することでElementUIを習得できます。そして授業後は自分で勉強します。
クイックスタートの例
まず、ElementUI のクイック スタートをマスターする必要があります。その後、生徒が一緒に手順に従います。
まず、ElementUI コンポーネント ライブラリをインストールし、VS Code を開いて前のプロジェクトを停止し、コマンド ラインで次のコマンドを入力する必要があります。
npm install [email protected]
具体的な操作を次の図に示します。
次に、ElementUI コンポーネント ライブラリをエントリ js ファイル main.js に導入する必要があります。コードは次のとおりです。
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
具体的な操作を図に示します。
次に、vue プロジェクトの開発仕様に従って、 src/viewsディレクトリに vue コンポーネント ファイルを作成する必要があります。コンポーネント名のサフィックスは .vue であることに注意し、コンポーネント ファイルに前に紹介した基本的なコンポーネント構文を記述します。コードは次のとおりです。
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
具体的な操作を図に示します。
最後に、ElementUI の公式 Web サイトにアクセスし、コンポーネント ライブラリを見つけて、ボタン コンポーネントを見つけてコードをコピーするだけで、具体的な操作は次の図のようになります。
次に、以下に示すように、ボタンのコードを見つけます。
次に、以下の図に示すように、コンポーネント コードを vue コンポーネント ファイルにコピーします。
最後に、カスタム コンポーネントをデフォルトでアクセスされるルート コンポーネントsrc/App.vueに導入する必要があります。具体的な手順は次のとおりです。
App.vue コンポーネントの具体的なコードは以下の通りで、上記の手順で element-view コンポーネントを導入すると自動的にコードが生成されます。
<template>
<div id="app">
<!-- {
{message}} -->
<element-view></element-view>
</div>
</template>
<script>
import ElementView from './views/Element/ElementView.vue'
export default {
components: {
ElementView },
data(){
return {
"message":"hello world"
}
}
}
</script>
<style>
</style>
次に、vue プロジェクトを実行すると、ブラウザは前の 7000 ポートに直接アクセスし、表示効果は次のようになります。
この時点で、ElementUI 入門プログラムは正常に作成されました。