脚手架编写vue项目(评论管理)

第一步，拆分组件

共拆分为4个组件

App.vue 中初步布局，引入 commentAdd 组件和 commentList 组件，写入：

<template>
  <div id="app">
    <header>请发表你的评论</header>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <commentAdd/>
        </div>
        <div class="col-md-8">
          <commentList/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commentAdd from "./components/commentAdd";
import commentList from "./components/commentList";

export default {
  name: "App",
  components: {
    commentAdd,
    commentList,
  },
  data: {
    comments: [
      {
        username: "lisa",
        content: "这部电影很好看",
      },
      {
        username: "jack",
        content: "这部电影不好看",
      },
    ],
  },
};
</script>

<style>
header {
  width: 100%;
  height: 300px;
  background: #ddd;
  text-align: center;
  line-height: 300px;
  font-size: 70px;
}
.container {
  padding-top: 30px;
}
</style>