项目笔记4（尚品汇）

Home首页组件的拆分

7个组件的拆分

分析Home首页，将Home首页拆分为7个部分，分别为如下7个部分。其中第一个组件（三级联动）在多个页面都进行了使用，因此需要将第一个组件（三级联动）定义为全局组件。

全局组件的定义（组件一）

注册全局组件（所有组件都可以使用的组件）的步骤如下。
首先找到main.js文件。import导入刚才写好的组件。随后利用Vue.component(）具体代码如下所示

注册完成之后，回到Home组件中，将全局组件进行引入。此时因为三级联动组件是全局组件，因此，无需在Home组件中使用import引入TypeNav，直接使用TypeNav即可，具体代码如下所示。

页面渲染结果如下所示。

一般组件的定义（组件二-组件七）

首先书写组件，在pages文件夹的Home文件夹下新建组件二文件夹（ListContainer）并在其中书写index.vue文件。结构样式写完之后，回到Home文件夹下的index.vue，引入刚才写好的组件并使用，具体代码如下（以组件二为例，其他组件同理）。由于这种组件并非全局组件，因此如果使用，需要单独引入。