前言
首先,把新创建的项目导入 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 标签:
到此,页面构建的假数据就成功显示出来了。