Vue プロジェクトで mock.js を使用するための完全な手順

npm i 要素UI -S

'element-ui' から ElementUI をインポートします。
import 'element-ui/lib/theme-chalk/index.css'; //スタイルファイルはVue.use(ElementUI)に導入する必要があります

<テンプレート>
<div>
  <el-テーブル
  :data="テーブルデータ"
  スタイル="幅: 100%">
  <el-テーブル列
   label="日付"
   幅="180">
   <テンプレート スロット スコープ="スコープ">
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
   </テンプレート>
  </el-table-column>
  <el-テーブル列
   label="名前"
   幅="180">
   <テンプレート スロット スコープ="スコープ">
    <el-popover トリガー="ホバー" 配置="上">
     <p>名前: {{ scope.row.name }}</p>
     <p>アドレス: {{ scope.row.address }}</p>
     <div スロット="参照" クラス="名前ラッパー">
      <el-tag size="medium">{{ scope.row.name }}</el-tag>
     </div>
    </el-popover>
   </テンプレート>
  </el-table-column>
  <el-table-column label="操作">
   <テンプレート スロット スコープ="スコープ">
    <el-ボタン
     サイズ="ミニ"
     @click="handleEdit(scope.$index, scope.row)">編集</el-button>
    <el-ボタン
     サイズ="ミニ"
     タイプ="危険"
     @click="handleDelete(scope.$index, scope.row)">削除</el-button>
   </テンプレート>
  </el-table-column>
 </el-table>
</div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  データ（） {
   戻る {
    テーブルデータ: [{
     日付: '2016-05-02'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1518号'
    }, {
     日付: '2016-05-04'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1517号'
    }, {
     日付: '2016-05-01'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1519号'
    }, {
     日付: '2016-05-03'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1516号'
    }]
   }
  },
  メソッド: {
   ハンドル編集(インデックス、行) {
    console.log(インデックス、行);
   },
   handleDelete(インデックス、行) {
    console.log(インデックス、行);
   }
  }
 }
</スクリプト>

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
// コンポーネントをインポートするimport List from '../views/main/List.vue'

Vue.use(VueRouter)

定数ルート = [
 {
  パス： '/'、
  名前: 'リスト',
  コンポーネント: リスト
 },

]

const ルーター = 新しい VueRouter({
 ルート
})

デフォルトルーターをエクスポートする

npm インストール --save-dev mockjs
npm インストール --save axios

'axios' から axios をインポートします
constサービス = axios.create({
  ベースURL: "http://localhost:8080",
})
デフォルト サービスをエクスポートする

'../request' から axios をインポートします
//データリストインターフェース export const getList = () => axios.get("/list")

'mockjs' から Mock をインポートします。
// './data.json' からデータをインポート

Mock.mock('http://localhost:8080/list', {
  コード: 0、データ:
  {
    'データ|1000': [
      {  
        id: '@id', //ランダムID
        name: '@name', //ランダムな名前 nickName: '@last', //ランダムなニックネーム phone: /^1[34578]\d{9}$/, //ランダムな電話番号 'age|11-99': 1, //年齢 address: '@county(true)', //ランダムな住所 email: '@email', //ランダムなメールアドレス isMale: '@boolean', //ランダムな性別 createTime: '@datetime', //作成時刻 avatar() {
          //ユーザーアバター return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

'./mock/mockServer' をインポートします

<テンプレート>
 <div>
  <el-table :data="tableData" スタイル="幅: 600px;マージン: 0 自動">
   <el-table-column label="ランダムID" width="200">
    <テンプレート スロット スコープ="スコープ">
     <i class="el-icon-time"></i>
     <span style="margin-left: 10px">{{ スコープ行ID }}</span>
    </テンプレート>
   </el-table-column>
   <el-table-column label="名前" width="180">
    <テンプレート スロット スコープ="スコープ">
     <el-popover トリガー="ホバー" 配置="上">
      <p>名前: {{ scope.row.name }}</p>
      <p>アドレス: {{ scope.row.address }}</p>
      <div スロット="参照" クラス="名前ラッパー">
       <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
      <p>メールアドレス: {{ scope.row.email }}</p>
      <p>性別: {{ scope.row.isMale }}</p>
      <p>ニックネーム: {{ scope.row.nickName }}</p>
      <p>電話番号: {{ scope.row.phone }}</p>
      <p>アバター:</p>
     </el-popover>
    </テンプレート>
   </el-table-column>
   <el-table-column label="操作">
    <テンプレート スロット スコープ="スコープ">
     <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
      >編集</el-button
     >
     <el-ボタン
      サイズ="ミニ"
      タイプ="危険"
      @click="handleDelete(scope.$index, scope.row)"
      >削除</el-button
     >
    </テンプレート>
   </el-table-column>
  </el-table>
 </div>
</テンプレート>

<スクリプト>
「../../api/getData」から getList をインポートします。
エクスポートデフォルト{
 データ（） {
  戻る {
   テーブルデータ: [
    // {
    // 日付: "2016-05-02",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1518号"、
    // },
    // {
    // 日付: "2016-05-04",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1517号"、
    // },
    // {
    // 日付: "2016-05-01",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1519号"、
    // },
    // {
    // 日付: "2016-05-03",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1516号"、
    // },
   ]、
  };
 },
 メソッド: {
  ハンドル編集(インデックス、行) {
   console.log(インデックス、行);
  },
  handleDelete(インデックス、行) {
   console.log(インデックス、行);
  },

  非同期getMockList() {
   試す {
    const 結果 = getList() を待機します。
    //console.log(結果);
    結果データコード == 0 の場合
     this.tableData = 結果データ.データ.データ;
    }
    //console.log(結果データ.データ.データ);
   } キャッチ（エラー）{
    コンソール.log(エラー);
   }
  },
 },

 マウント() {
  this.getMockList();
 },

};
</スクリプト>