IDEAは最初のシンプルなElementUI+Vueプロジェクトを構築します(デモ)

コンテンツ

1.最初のvueプロジェクトを作成します

2.プロジェクトを開いて、実行します

3.element-uiをインストールして使用します

4.axiosプラグインをインストールします


1.最初のvueプロジェクトを作成します

        cmdを開き、次のコマンドを入力してプロジェクトの作成を開始します

vue init webpack [项目名称]

2.プロジェクトを開いて、実行します

1> IDEAを開き、[ファイル]--->[開く]---->プロジェクトプロジェクトのルートディレクトリを選択します

2>ターミナルに次のコマンドを入力して実行します

npm run dev

3>ブラウザに入力します:http:// localhost:8080テストページにアクセスします

3.element-uiをインストールして使用します

1>ターミナルで次のコマンドを入力して、element-uiをインストールします

npm install --save element-ui

2> node_modulesフォルダーの下のpackage-lock.jsonで、ElementUIがインストールされており、バージョンが2.15.6であることがわかります。

 3>使用ElementUI

import ElementUI from 'element-ui'
Vue.use(ElementUI)

4>ボタンコントロールの追加

<el-button type="primary" v-on:click="btnClick" >小蓝宝子</el-button>

5>イベントをボタンにバインドします(ボタンをクリックしてBaiduページにジャンプします)

methods:{
    btnClick:function () {
      window.location.href = 'http://www.baidu.com';
    }
  }

6> npm run devともう一度入力して、プロジェクトを開始します

7>「リトルサファイア」のボタンがページに表示されているのがわかります

8>「LittleBlueTreasure」ボタンをクリックして、Baiduインターフェースにジャンプします

4.axiosプラグインをインストールします

(後で使用するためにのみインストールされ、ここでは詳しく説明しません)

1>次のコマンドを入力して、axiosプラグインをインストールします

 npm install --save axios

2>axiosプラグインを使用する

import axios from "axios";
Vue.use(axios)

おすすめ

転載: blog.csdn.net/qq_43554335/article/details/123745092