Vue.js 2 项目实战（七）：小兔鲜首页

前言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是通过采用易于上手的结构和强大的功能，使前端开发变得更加简便和高效。以下是 Vue.js 的一些关键特性和优点：

核心特性

1. 声明式渲染

   • Vue.js 使用声明式语法来描述用户界面，数据和视图是双向绑定的。当数据变化时，视图会自动更新。

2. 组件系统

   • Vue.js 提供了一个灵活的组件系统，允许开发者将 UI 分解成可复用的组件，每个组件都有自己的逻辑和样式。

3. 单文件组件 (SFC)

   • Vue.js 允许开发者将 HTML、CSS 和 JavaScript 放在同一个 .vue 文件中，这样可以更容易地管理组件。

4. 虚拟 DOM

   • Vue.js 使用虚拟 DOM 来优化更新过程，通过最小化实际 DOM 操作来提高性能。

5. 反应式数据绑定

   • Vue.js 提供了响应式的数据绑定系统，使得数据与 DOM 之间的同步变得简单和高效。

6. 指令

   • Vue.js 提供了一组内置指令（如 v-bind、v-model 和 v-for），帮助开发者轻松地操作 DOM。

优点

1. 易于上手

   • Vue.js 的学习曲线较低，适合新手入门，并且文档详细、社区活跃。

2. 灵活性

   • Vue.js 可以与现有项目集成，也可以用于构建复杂的单页面应用（SPA）。

3. 性能高效

   • 得益于虚拟 DOM 和响应式系统，Vue.js 在处理大量数据更新时表现出色。

4. 生态系统

   • Vue.js 拥有丰富的生态系统，包括 Vue Router、Vuex、Vue CLI 等工具和库，支持开发者在不同场景下使用。

5. 强大的社区支持

   • Vue.js 有一个全球活跃的社区，提供了大量的插件、教程和支持资源。

知识点

1. 组件化开发

2. 全局组件注册

项目效果

详细划分组件后

源代码

这里只给出修改部分的参考代码，原视频作者本意是将一个写在 app.vue 中的所有代码划分了多个组件，遇到重复样式时注册全局组件复用代码

代码链接（包含源代码和最终代码）https://pan.baidu.com/s/1fGsO09dS0R9oKVWK0xFcnQ?pwd=6666XtxNewGoods.vue

<script setup>

</script>

<template>
  <div class="goods wrapper">
    <div class="title">
      <div class="left">
        <h3>新鲜好物</h3>
        <p>新鲜出炉 品质靠谱</p>
      </div>
      <div class="right">
        <a href="#" class="more"
        >查看全部<span class="iconfont icon-arrow-right-bold"></span
        ></a>
      </div>
    </div>
    <div class="bd">
      <ul>
        <BaseGoodsItem></BaseGoodsItem>
        <BaseGoodsItem></BaseGoodsItem>
        <BaseGoodsItem></BaseGoodsItem>
        <BaseGoodsItem></BaseGoodsItem>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.goods .bd ul {
  display: flex;
  justify-content: space-between;
}
</style>

BaseGoodsItem.vue 

<script setup>

</script>

<template>
  <li class="base-goods-item">
    <a href="#">
      <div class="pic"><img src="@/assets/images/goods1.png" alt="" /></div>
      <div class="txt">
        <h4>KN95级莫兰迪色防护口罩</h4>
        <p>¥ <span>79</span></p>
      </div>
    </a>
  </li>
</template>

<style scoped>
.base-goods-item {
  width: 304px;
  height: 404px;
  background-color: #EEF9F4;
}
.base-goods-item {
  display: block;
}
.base-goods-item .pic {
  width: 304px;
  height: 304px;
}
.base-goods-item .txt {
  text-align: center;
}
.base-goods-item h4 {
  margin-top: 17px;
  margin-bottom: 8px;
  font-size: 20px;
}
.base-goods-item p {
  font-size: 18px;
  color: #AA2113;
}
.base-goods-item p span {
  font-size: 22px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import './styles/base.css' // css 样式重置
import './styles/common.css' // 公共全局样式
import './assets/iconfont/iconfont.css' // 字体图标的样式

// 注册全局组件
import BaseGoodsItem from "@/components/BaseGoodsItem.vue";
// ue.component("BaseGoodsItem", BaseGoodsItem); 这行代码使用 Vue 的全局方法 Vue.component 注册了一个名为 BaseGoodsItem 的全局组件。
// 第一个参数是组件的名称，第二个参数是组件本身。
Vue.component("BaseGoodsItem", BaseGoodsItem);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')