VUE生命周期与工程化开发入门（附带详细案例）

Bertha 。 2024-02-22 03:22 36阅读 0赞

#### 文章目录 ####

*  发现宝藏
 *  前言
 *  一、生命周期
 *   *  1.生命周期 & 生命周期四个阶段
     *  2. 生命周期钩子
     *  3. 生命周期案例 - create应用 - 新闻列表
     *  4. 生命周期案例 - mounted应用 - 输入框获取焦点
 *  二、综合案例:小黑记账清单
 *   *  1. 列表渲
     *  2. 添加 和 删除
     *  3. 饼图渲染
 *  三、工程化开发入门
 *   *  1. 工程化开发和脚手架
     *  2. 脚手架目录&项目运行流程
     *  3. 组件化
     *  4. 组件注册
 *  四、综合案例:小兔鲜首页
 *   *  1. 拆分模块-局部注册
     *  2. 拆分组件-全局注册
 *  五、好书推荐
 *  总结

--------------------

## 发现宝藏 ##

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【[宝藏入口][Link 1]】。

## 前言 ##

为了巩固所学的知识，作者尝试着开始发布一些学习笔记类的博客，方便日后回顾。当然，如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚，文章中如果有记录错误，欢迎读者朋友们批评指正。

## 一、生命周期 ##

### 1.生命周期 & 生命周期四个阶段 ###

![在这里插入图片描述][fd9c762faf8847ed8523e180e826bb02.png]

### 2. 生命周期钩子 ###

![在这里插入图片描述][b650ed3d4f374b64af7ebcecbe530c17.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
      <div id="app">
        <h3>{
       { title }}</h3>
        <div>
          <button @click="count--">-</button>
          <span>{
       { count }}</span>
          <button @click="count++">+</button>
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            count: 100,
            title: '计数器'
          },
          // 1. 创建阶段（准备数据）
          beforeCreate () {
          
            console.log('beforeCreate 响应式数据准备好之前', this.count)
          },
          created () {
          
            console.log('created 响应式数据准备好之后', this.count)
            // this.数据名 = 请求回来的数据
            // 可以开始发送初始化渲染的请求了
          },
    
          // 2. 挂载阶段（渲染模板）
          beforeMount () {
          
            console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
          },
          mounted () {
          
            console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
            // 可以开始操作dom了
          },
    
          // 3. 更新阶段(修改数据 → 更新视图)
          beforeUpdate () {
          
            console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
          },
          updated () {
          
            console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
          },
    
          // 4. 卸载阶段
          beforeDestroy () {
          
            console.log('beforeDestroy, 卸载前')
            console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
          },
          destroyed () {
          
            console.log('destroyed，卸载后')
          }
        })
      </script>
    </body>
    </html>

![在这里插入图片描述][1a9911709c374798ae8ddbc46172e015.png]

### 3. 生命周期案例 - create应用 - 新闻列表 ###

![在这里插入图片描述][b1f7493339f24843a00cddaa5f3a5956.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          
          margin: 0;
          padding: 0;
          list-style: none;
        }
        .news {
          
          display: flex;
          height: 120px;
          width: 600px;
          margin: 0 auto;
          padding: 20px 0;
          cursor: pointer;
        }
        .news .left {
          
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 10px;
        }
        .news .left .title {
          
          font-size: 20px;
        }
        .news .left .info {
          
          color: #999999;
        }
        .news .left .info span {
          
          margin-right: 20px;
        }
        .news .right {
          
          width: 160px;
          height: 120px;
        }
        .news .right img {
          
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      </style>
    </head>
    <body>
    
      <div id="app">
        <ul>
          <li v-for="(item, index) in list" :key="item.id" class="news">
            <div class="left">
              <div class="title">{
       { item.title }}</div>
              <div class="info">
                <span>{
       { item.source }}</span>
                <span>{
       { item.time }}</span>
              </div>
            </div>
            <div class="right">
              <img :src="item.img" alt="">
            </div>
          </li>
        </ul>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <script>
        // 接口地址：http://hmajax.itheima.net/api/news
        // 请求方式：get
        const app = new Vue({
          
          el: '#app',
          data: {
          
            list: []
          },
          async created () {
          
            // 1. 发送请求获取数据
            const res = await axios.get('http://hmajax.itheima.net/api/news')
            // 2. 更新到 list 中，用于页面渲染 v-for
            this.list = res.data.data
          }
        })
      </script>
    </body>
    </html>

![在这里插入图片描述][5a6e98bec2554d77838827c2e0221dfa.png]

### 4. 生命周期案例 - mounted应用 - 输入框获取焦点 ###

![在这里插入图片描述][6cd7403ce2b54da4bfa338fa59ede03a.png]

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>示例-获取焦点</title>
      
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
      
      <style>
        html,
        body {
          
          height: 100%;
        }
        .search-container {
          
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
        }
        .search-container .search-box {
          
          display: flex;
        }
        .search-container img {
          
          margin-bottom: 30px;
        }
        .search-container .search-box input {
          
          width: 512px;
          height: 16px;
          padding: 12px 16px;
          font-size: 16px;
          margin: 0;
          vertical-align: top;
          outline: 0;
          box-shadow: none;
          border-radius: 10px 0 0 10px;
          border: 2px solid #c4c7ce;
          background: #fff;
          color: #222;
          overflow: hidden;
          box-sizing: content-box;
          -webkit-tap-highlight-color: transparent;
        }
        .search-container .search-box button {
          
          cursor: pointer;
          width: 112px;
          height: 44px;
          line-height: 41px;
          line-height: 42px;
          background-color: #ad2a27;
          border-radius: 0 10px 10px 0;
          font-size: 17px;
          box-shadow: none;
          font-weight: 400;
          border: 0;
          outline: 0;
          letter-spacing: normal;
          color: white;
        }
        body {
          
          background: no-repeat center /cover;
          background-color: #edf0f5;
        }
      </style>
    </head>
    
    <body>
    <div class="container" id="app">
      <div class="search-container">
        <img src="https://www.itheima.com/images/logo.png" alt="">
        <div class="search-box">
          <input type="text" v-model="words" id="inp">
          <button>搜索一下</button>
        </div>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
          
        el: '#app',
        data: {
          
          words: ''
        },
        // 核心思路：
        // 1. 等input框渲染出来 mounted 钩子
        // 2. 让input框获取焦点 inp.focus()
        mounted () {
          
          document.querySelector('#inp').focus()
        }
      })
    </script>
    
    </body>
    
    </html>

![在这里插入图片描述][e5b23be2936d4f3397df9af8e02a1e46.png]

## 二、综合案例:小黑记账清单 ##

![在这里插入图片描述][2c2ef5ba05fc4d66849b3afec7a26573.png]

### 1. 列表渲 ###

![在这里插入图片描述][5229b321a65342fd820bbfc9846c959d.png]

### 2. 添加 和 删除 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        />
        <style>
          .red {
          
            color: red!important;
          }
          .search {
          
            width: 300px;
            margin: 20px 0;
          }
          .my-form {
          
            display: flex;
            margin: 20px 0;
          }
          .my-form input {
          
            flex: 1;
            margin-right: 20px;
          }
          .table > :not(:first-child) {
          
            border-top: none;
          }
          .contain {
          
            display: flex;
            padding: 10px;
          }
          .list-box {
          
            flex: 1;
            padding: 0 30px;
          }
          .list-box  a {
          
            text-decoration: none;
          }
          .echarts-box {
          
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
          }
          tfoot {
          
            font-weight: bold;
          }
          @media screen and (max-width: 1000px) {
          
            .contain {
          
              flex-wrap: wrap;
            }
            .list-box {
          
              width: 100%;
            }
            .echarts-box {
          
              margin-top: 30px;
            }
          }
        </style>
      </head>
      <body>
        <div id="app">
          <div class="contain">
            
            <div class="list-box">
    
              
              <form class="my-form">
                <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                <button @click="add" type="button" class="btn btn-primary">添加账单</button>
              </form>
    
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in list" :key="item.id">
                    <td>{
       { index + 1 }}</td>
                    <td>{
       { item.name }}</td>
                    <td :class="{ red: item.price > 500 }">{
       { item.price.toFixed(2) }}</td>
                    <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">消费总计： {
       { totalPrice.toFixed(2) }}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
            
            
            <div class="echarts-box" id="main"></div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script>
          /**
           * 接口文档地址：
           * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
           * 
           * 功能需求：
           * 1. 基本渲染
           *    (1) 立刻发送请求获取数据 created
           *    (2) 拿到数据，存到data的响应式数据中
           *    (3) 结合数据，进行渲染 v-for
           *    (4) 消费统计 => 计算属性
           * 2. 添加功能
           *    (1) 收集表单数据 v-model
           *    (2) 给添加按钮注册点击事件，发送添加请求
           *    (3) 需要重新渲染
           * 3. 删除功能
           *    (1) 注册点击事件，传参传 id
           *    (2) 根据 id 发送删除请求
           *    (3) 需要重新渲染
           * 4. 饼图渲染
           */
          const app = new Vue({
          
            el: '#app',
            data: {
          
              list: [],
              name: '',
              price: ''
            },
            computed: {
          
              totalPrice () {
          
                return this.list.reduce((sum, item) => sum + item.price, 0)
              }
            },
            created () {
          
              // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          
              //   params: {
          
              //     creator: '小黑'
              //   }
              // })
              // this.list = res.data.data
    
              this.getList()
            },
            methods: {
          
              async getList () {
          
                const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          
                  params: {
          
                    creator: '小黑'
                  }
                })
                this.list = res.data.data
              },
              async add () {
          
                if (!this.name) {
          
                  alert('请输入消费名称')
                  return
                }
                if (typeof this.price !== 'number') {
          
                  alert('请输入正确的消费价格')
                  return
                }
    
                // 发送添加请求
                const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
          
                  creator: '小黑',
                  name: this.name,
                  price: this.price
                })
                // 重新渲染一次
                this.getList()
    
                this.name = ''
                this.price = ''
              },
              async del (id) {
          
                // 根据 id 发送删除请求
                const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${ id}`)
                // 重新渲染
                this.getList()
              }
            }
          })
        </script>
      </body>
    </html>

![在这里插入图片描述][dffd0bbaee364e0bb78184cb08f55e62.png]

### 3. 饼图渲染 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        />
        <style>
          .red {
          
            color: red!important;
          }
          .search {
          
            width: 300px;
            margin: 20px 0;
          }
          .my-form {
          
            display: flex;
            margin: 20px 0;
          }
          .my-form input {
          
            flex: 1;
            margin-right: 20px;
          }
          .table > :not(:first-child) {
          
            border-top: none;
          }
          .contain {
          
            display: flex;
            padding: 10px;
          }
          .list-box {
          
            flex: 1;
            padding: 0 30px;
          }
          .list-box  a {
          
            text-decoration: none;
          }
          .echarts-box {
          
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
          }
          tfoot {
          
            font-weight: bold;
          }
          @media screen and (max-width: 1000px) {
          
            .contain {
          
              flex-wrap: wrap;
            }
            .list-box {
          
              width: 100%;
            }
            .echarts-box {
          
              margin-top: 30px;
            }
          }
        </style>
      </head>
      <body>
        <div id="app">
          <div class="contain">
            
            <div class="list-box">
    
              
              <form class="my-form">
                <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                <button @click="add" type="button" class="btn btn-primary">添加账单</button>
              </form>
    
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in list" :key="item.id">
                    <td>{
       { index + 1 }}</td>
                    <td>{
       { item.name }}</td>
                    <td :class="{ red: item.price > 500 }">{
       { item.price.toFixed(2) }}</td>
                    <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">消费总计： {
       { totalPrice.toFixed(2) }}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
            
            
            <div class="echarts-box" id="main"></div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script>
          /**
           * 接口文档地址：
           * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
           * 
           * 功能需求：
           * 1. 基本渲染
           *    (1) 立刻发送请求获取数据 created
           *    (2) 拿到数据，存到data的响应式数据中
           *    (3) 结合数据，进行渲染 v-for
           *    (4) 消费统计 => 计算属性
           * 2. 添加功能
           *    (1) 收集表单数据 v-model
           *    (2) 给添加按钮注册点击事件，发送添加请求
           *    (3) 需要重新渲染
           * 3. 删除功能
           *    (1) 注册点击事件，传参传 id
           *    (2) 根据 id 发送删除请求
           *    (3) 需要重新渲染
           * 4. 饼图渲染
           *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
           *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
           */
          const app = new Vue({
          
            el: '#app',
            data: {
          
              list: [],
              name: '',
              price: ''
            },
            computed: {
          
              totalPrice () {
          
                return this.list.reduce((sum, item) => sum + item.price, 0)
              }
            },
            created () {
          
              // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          
              //   params: {
          
              //     creator: '小黑'
              //   }
              // })
              // this.list = res.data.data
    
              this.getList()
            },
            mounted () {
          
              this.myChart = echarts.init(document.querySelector('#main'))
              this.myChart.setOption({
          
                // 大标题
                title: {
          
                  text: '消费账单列表',
                  left: 'center'
                },
                // 提示框
                tooltip: {
          
                  trigger: 'item'
                },
                // 图例
                legend: {
          
                  orient: 'vertical',
                  left: 'left'
                },
                // 数据项
                series: [
                  {
          
                    name: '消费账单',
                    type: 'pie',
                    radius: '50%', // 半径
                    data: [
                      // { value: 1048, name: '球鞋' },
                      // { value: 735, name: '防晒霜' }
                    ],
                    emphasis: {
          
                      itemStyle: {
          
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              })
            },
    
            methods: {
          
              async getList () {
          
                const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          
                  params: {
          
                    creator: '小黑'
                  }
                })
                this.list = res.data.data
    
                // 更新图表
                this.myChart.setOption({
          
                  // 数据项
                  series: [
                    {
          
                      // data: [
                      //   { value: 1048, name: '球鞋' },
                      //   { value: 735, name: '防晒霜' }
                      // ]
                      data: this.list.map(item => ({
           value: item.price, name: item.name}))
                    }
                  ]
                })
              },
              async add () {
          
                if (!this.name) {
          
                  alert('请输入消费名称')
                  return
                }
                if (typeof this.price !== 'number') {
          
                  alert('请输入正确的消费价格')
                  return
                }
    
                // 发送添加请求
                const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
          
                  creator: '小黑',
                  name: this.name,
                  price: this.price
                })
                // 重新渲染一次
                this.getList()
    
                this.name = ''
                this.price = ''
              },
              async del (id) {
          
                // 根据 id 发送删除请求
                const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${ id}`)
                // 重新渲染
                this.getList()
              }
            }
          })
        </script>
      </body>
    </html>

![在这里插入图在这里插入图片描述 片描述][f6aa33bbc923430ba1d9c10b8bf27a24.png]

## 三、工程化开发入门 ##

### 1. 工程化开发和脚手架 ###

![在这里插入图片描述][ad0da1ff21c5431f8dbca71921c24ed6.png]  
![在这里插入图片描述][f763d77829274e389ced75ff059d4af1.png]  
![在这里插入图片描述][881925d8787242ce9fb35eab246b04cf.png]

![在这里插入图片描述][d7f0aecc24f14da08a7c6df52bc470b3.png]  
![在这里插入图片描述][bec37f1ef5f340e3969b586c57918b67.png]  
![在这里插入图片描述][c7f894c29b934096918deb4128c0f317.png]

### 2. 脚手架目录&项目运行流程 ###

![在这里插入图片描述][74fe2cc9bb1f4bb68409845f85031250.png]

![在这里插入图片描述][e963f112820f42bfb4dbd3c4b7f0e69e.png]

### 3. 组件化 ###

![在这里插入图片描述][a22823cd09294f9db56b9b02cde9e878.png]  
![在这里插入图片描述][0800dd99fdbd4fd08379c1ae8e059d40.png]

*  **main.js**

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
    // 1. 导入 Vue 核心包
    import Vue from 'vue'
    
    // 2. 导入 App.vue 根组件
    import App from './App.vue'
    
    // 提示：当前处于什么环境 (生产环境 / 开发环境)
    Vue.config.productionTip = false
    
    // 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
    new Vue({
        
      // el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
      // render: h => h(App),
      render: (createElement) => {
        
        // 基于App创建元素结构
        return createElement(App)
      }
    }).$mount('#app')

*  **App.vue**

<template>
    // vue2只允许有一个根元素
      <div class="App">
        <div class="box" @click="fn"></div>
      </div>
    </template>
    
    <script>
    // 导出的是当前组件的配置项
    // 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
    export default {
        
      created () {
        
        console.log('我是created')
      },
      methods: {
        
        fn () {
        
          alert('你好')
        }
      }
    }
    </script>
    
    <style lang="less">
    /* 让style支持less
       1. 给style加上 lang="less"
       2. 安装依赖包 less less-loader
          yarn add less less-loader -D (开发依赖)
    */
    .App {
        
      width: 400px;
      height: 400px;
      background-color: pink;
      .box {
        
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    }
    </style>

*  **index.html**

<!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
    
        
        <div id="app">
          
        </div>
    
        
      </body>
    </html>

![在这里插入图片描述][1289bd4354d544b98f6ac952a6bc35bb.png]

### 4. 组件注册 ###

**1. 普通组件的注册**

![在这里插入图片描述][1b63e47e031c477b97366ea15bd38e24.png]

*  **HmFooter.vue**

<template>
      <div class="hm-footer">
        我是hm-footer
      </div>
    </template>
    
    <script>
    export default {
        
    
    }
    </script>
    
    <style>
    .hm-footer {
        
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      background-color: #4f81bd;
      color: white;
    }
    </style>

*  **HmHeader.vue**

<template>
      <div class="hm-header">
        我是hm-header
      </div>
    </template>
    
    <script>
    export default {
        
    
    }
    </script>
    
    <style>
    .hm-header {
        
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      background-color: #8064a2;
      color: white;
    }
    </style>

*  **HmMain.vue**

<template>
      <div class="hm-main">
        我是hm-main
      </div>
    </template>
    
    <script>
    export default {
        
    
    }
    </script>
    
    <style>
    .hm-main {
        
      height: 400px;
      line-height: 400px;
      text-align: center;
      font-size: 30px;
      background-color: #f79646;
      color: white;
      margin: 20px 0;
    }
    </style>

*  **App.vue**

<template>
      <div class="App">
        
        <HmHeader></HmHeader>
        
        <HmMain></HmMain>
        
        <HmFooter></HmFooter>
    
        
      </div>
    </template>
    
    <script>
    import HmHeader from './components/HmHeader.vue'
    import HmMain from './components/HmMain.vue'
    import HmFooter from './components/HmFooter.vue'
    export default {
        
      components: {
        
        // '组件名': 组件对象，同名可以简写
        HmHeader: HmHeader,
        HmMain,
        HmFooter
      }
    }
    </script>
    
    <style>
    .App {
        
      width: 600px;
      height: 700px;
      background-color: #87ceeb;
      margin: 0 auto;
      padding: 20px;
    }
    </style>

**2. 普通组件的全局注册**

![在这里插入图片描述][1d7970953eeb4d03a958911190932f0b.png]  
![在这里插入图片描述][c8957fe5bd9b4a6aac7250bbcc04d8ba.png]  
![在这里插入图片描述][b0386d1122514ac79a543b2c57c2a785.png]

## 四、综合案例:小兔鲜首页 ##

![在这里插入图片描述][bdb59930061a47fba92abf4942e09e55.png]

![在这里插入图片描述][8c64ca2e51d74f3b831e704826437309.png]

### 1. 拆分模块-局部注册 ###

*  **App.vue**

<template>
      <div class="App">
        
        <XtxShortCut></XtxShortCut>
        
        <XtxHeaderNav></XtxHeaderNav>
        
        <XtxBanner></XtxBanner>
        
        <XtxNewGoods></XtxNewGoods>
        
        <XtxHotBrand></XtxHotBrand>
        
        <XtxTopic></XtxTopic>
        
        <XtxFooter></XtxFooter>
      </div>
    </template>
    
    <script>
    import XtxShortCut from './components/XtxShortCut.vue'
    import XtxHeaderNav from './components/XtxHeaderNav.vue'
    import XtxBanner from './components/XtxBanner.vue'
    import XtxNewGoods from './components/XtxNewGoods.vue'
    import XtxHotBrand from './components/XtxHotBrand.vue'
    import XtxTopic from './components/XtxTopic.vue'
    import XtxFooter from './components/XtxFooter.vue'
    export default {
        
      data () {
        
        return {
        
          count: 0
        }
      },
      components: {
        
        XtxShortCut,
        XtxHeaderNav,
        XtxBanner,
        XtxNewGoods,
        XtxHotBrand,
        XtxTopic,
        XtxFooter,
      }
    }
    </script>
    
    <style>
    
    </style>

### 2. 拆分组件-全局注册 ###

*  **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'
    import BaseBrandItem from './components/BaseBrandItem'
    Vue.component('BaseGoodsItem', BaseGoodsItem)
    Vue.component('BaseBrandItem', BaseBrandItem)
    
    Vue.config.productionTip = false
    
    new Vue({
        
      render: h => h(App),
    }).$mount('#app')

![在这里插入图片描述][7b087c29b73e485abb464fbb32a6511b.png]

## 五、好书推荐 ##

![在这里插入图片描述][9e42bde172304ef18ff47c1b1e0c9962.png_pic_center]  
![在这里插入图片描述][22117ff9fced43cab6c4bf984f1f13c4.png]  
![在这里插入图片描述][251ca839c6f34bd5b5446fa64cba684f.jpeg]

京东购买链接：[https://item.jd.com/14140678.html][https_item.jd.com_14140678.html]

## 总结 ##

欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注,点赞，收藏支持一下。  
（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）

[Link 1]: https://www.captainbed.cn/dl
[fd9c762faf8847ed8523e180e826bb02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/25b395a8bfe34aa2b37f27e6c45e9eaf.png
[b650ed3d4f374b64af7ebcecbe530c17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/e7c5e9f127254d95818f7af8b63d55db.png
[1a9911709c374798ae8ddbc46172e015.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/a89abe31bc7a477d9071e6d2690ba81a.png
[b1f7493339f24843a00cddaa5f3a5956.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/870ec5b8e2fd49a7bac6733ec906f5a6.png
[5a6e98bec2554d77838827c2e0221dfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/34593d7531de46db8aa2f3c965b4630e.png
[6cd7403ce2b54da4bfa338fa59ede03a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/84c311ffc1c24483ac704e23d6b510d6.png
[e5b23be2936d4f3397df9af8e02a1e46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/0c3621033971463baf21782d9b4f2ed8.png
[2c2ef5ba05fc4d66849b3afec7a26573.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/7edeb999c61645dfbd5f4ec035357d9f.png
[5229b321a65342fd820bbfc9846c959d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/9c7705431fe642d68504896cbcc82eb3.png
[dffd0bbaee364e0bb78184cb08f55e62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/267bada2b3374bff91383ffe071ae14a.png
[f6aa33bbc923430ba1d9c10b8bf27a24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/67f62fa8235f4be98f51d0b6fc6f968c.png
[ad0da1ff21c5431f8dbca71921c24ed6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/0d0b07b1978a44e8b71762bc07727a24.png
[f763d77829274e389ced75ff059d4af1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/5542d9816d0b4f08aae42c063ab9b27b.png
[881925d8787242ce9fb35eab246b04cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/637d2025e04c4c5fb6b59faaa9268eb6.png
[d7f0aecc24f14da08a7c6df52bc470b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/3773523882304244ab21774c770a1ce7.png
[bec37f1ef5f340e3969b586c57918b67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/7775e3ceb81441189126054a733cb05b.png
[c7f894c29b934096918deb4128c0f317.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/1785c627351340908ac1d1eb2c34a7b9.png
[74fe2cc9bb1f4bb68409845f85031250.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/e1c80f8fbc5b4dc9adc074486902256a.png
[e963f112820f42bfb4dbd3c4b7f0e69e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/ee4a10b228e6459db98ba53b2a23c7b2.png
[a22823cd09294f9db56b9b02cde9e878.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/b920a0689adc4781ac94efece8713776.png
[0800dd99fdbd4fd08379c1ae8e059d40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/f4342308beb14ffdbc761bada83ce7bf.png
[1289bd4354d544b98f6ac952a6bc35bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/4a98fe594b7a40569d539d65168046ac.png
[1b63e47e031c477b97366ea15bd38e24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/9746e3b2807546eeaec71ad06e9bcc99.png
[1d7970953eeb4d03a958911190932f0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/37df037f98784716862d389fcec8bc39.png
[c8957fe5bd9b4a6aac7250bbcc04d8ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/36e32ff8974f450abf798eea6e6a62d2.png
[b0386d1122514ac79a543b2c57c2a785.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/4a226d3c0903475dbd0ee943107459fd.png
[bdb59930061a47fba92abf4942e09e55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/b306c6601b274742b9a656ea97d555cf.png
[8c64ca2e51d74f3b831e704826437309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/ef1d1987559b4ebb9e87c929b04e0ca1.png
[7b087c29b73e485abb464fbb32a6511b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/8718c3af562c46f6ab057ff9006baa12.png
[9e42bde172304ef18ff47c1b1e0c9962.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/10979236a55f4267ba2cd428034bc9d0.png
[22117ff9fced43cab6c4bf984f1f13c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/0912fc560a734359b05d60f455d31838.png
[251ca839c6f34bd5b5446fa64cba684f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/6f9e63ea6ddc410c94267e731162739a.png
[https_item.jd.com_14140678.html]: https://item.jd.com/14140678.html