Vue2に基づくElementUIコンポーネントライブラリの基本的な使用テスト

要素UIのインストール

• npmインストール。

  npm i element-ui -S
  

  エラーが発生した場合は、私の最後の記事をチェックしてください！

要素UIの紹介

• グローバルにインポートされます。

  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)
  });
  

  次に、プロジェクトを開始します。エラーがなければ、成功します。

  npm run serve
  

  

• オンデマンドでインポートします。

  これは、プロジェクトが比較的大きい場合に適しています。オンデマンドでインポートすると、パッケージ化後にファイルが小さくなり、初心者にとっては面倒になります。

要素UIの使用法

• プロジェクト内のデフォルトコンポーネントHelloWorldを削除してから、プロジェクト内のメインコンポーネントアプリのコンテンツとスタイルをいくつか削除し、element uiの公式Webサイトから基本的なボタンを見つけて、ElementUIの使用のテストを開始します。

  <template>
    <div id="app">
     <el-button type="success">成功按钮</el-button> 
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'App',
    components: {
      
    }
  }
  </script>
  
  <style>
  
  </style>
  

• 演算結果。

  

テストが完了すると、実際のプロジェクトが作成されます。

今後このページでどのようなスタイルを使用したいのか、element uiの公式ウェブサイトにアクセスし、プルして使用してください。