前言

首先，把新创建的项目导入 idea 中。
不修改任何文件内容，直接运行，可以看到成功之后的页面。

如果对这部分不熟悉，请参考：idea 导入 Vue 项目并运行（超级详细步骤）

新建 vue 文件

这里我选择之后弹出一个对话框：

输入 vue 文件名。
点击 OK 即可。

修改新建的 vue 文件

在<template> 标签中，只能出现一个子标签，因此先要在其中写一个 <div> 标签，以便后续操作。

增加标签和样式

以下是修改过的 User.vue 的内容：

<template>
    <div>
      <table>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>生日</th>
          <th>备注</th>
        </tr>
        <!-- for 循环拉取数据 -->
        <tr v-for="user in users">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.birthday}}</td>
          <td>{{user.note}}</td>
        </tr>
      </table>
    </div>
</template>

<script>
    export default {
        data() {
          return {
            users: [
              {
                id: '1001',
                name: '小冯',
                birthday: '2020-02-24',
                note: '太帅了'
              },
              {
                id: '1002',
                name: '小王',
                birthday: '2019-03-23',
                note: '漂亮'
              }
            ]
          }
        }
    }
</script>

<style scoped>
  table {
    border: red;
    color: forestgreen;
    background-color: burlywood;
  }
</style>

在 App.vue 的文件中增加信息

修改的内容只涉及到：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user">User</router-link>
    </div>
    <router-view/>
  </div>
</template>

index.js 文件的修改

涉及到的代码有：

import User from "../views/User";

{
    path: '/user',
    name: 'User',
    component: User
}

这里需要注意，冒号后边要接一个空格之后，再添加内容。

运行测试

在运行了npm run serve 之后，控制台报出了以下信息：

问题解决：
在 package.json 文件中修改：

这一步，如果你修改之后，运行出错：

这有可能是网络、缓存之类的问题，重新运行即可。

点击 User 标签：

到此，页面构建的假数据就成功显示出来了。