【完全なプロジェクト構築】vue-cliをベースにvueフロントエンド構築テストシステムを実現 - ②プロジェクト開発にelement-uiを導入【全導入】

1.要素uiの公式ドキュメントを開く

コンポーネントナビゲーションバーの下にインストールディレクトリを入力します。

次のコマンドを入力して、要素 ui をインストールします [このセクションでは、グローバル参照の実装のみを紹介し、ローカル参照は紹介しません]

npm i element-ui -S

my-app で [vscode ターミナルを開き、ファイルを入力して vue-cli を作成し、インストールに入ります]

写真の通り、ダウンロード中です

ダウンロードが完了すると、図のように表示されます

package.json を開いて、インストールが成功したかどうかを確認します。依存関係で element-ui のバージョン番号を照会できることがわかり、成功しています。

2. element-ui の公式 Web サイトで、コンポーネントナビゲーションバーの下にクイックスタートを入力し、要素で完全なインポートを見つけます。

不足しているコードを、作成された vue-cli フォルダーの下にある main.js ファイルに書き込みます。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

インポート後、図のように

3. テスト用の要素 ui コンポーネントを記述します [便宜上、ここで App.vue コンポーネントに追加します]

App.vue のネイティブスタイルを削除する必要があることに注意してください [そうしないと、スタイルに影響を与える可能性があります]

①取り外し前

②取り外し後

最初に導入された HelloWorld コンポーネントに注釈を付ける

要素 ui の el-button コンポーネントを導入します (コードは次のとおりです。詳細は公式ドキュメントを参照してください)。

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

この時点で、App.vue のコードセグメントが図に示されています。

3. プロジェクトを起動し、element-ui が導入されているか確認する

指定したディレクトリに入り、次のコマンドを入力します

npm run serve

オン

正常に開始

プロジェクトを開き、要素 ui が正常に使用されていることを確認します

【完全なプロジェクト構築】vue-cliをベースにvueフロントエンド構築テストシステムを実現 - ②プロジェクト開発にelement-uiを導入【全導入】

おすすめ