Vue基础入门（2）- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

Vue基础入门（2）- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

文章目录

  • Vue基础入门（2）- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程
    • 5 生命周期
      • 5.1 Vue生命周期钩子
      • 5.2 在created中发送数据
      • 5.3 在mounted中获取焦点
      • 5.4 案例-小黑记账清单
        • 5.4.1 需求分析
        • 5.4.2 思路分析
        • 5.4.3 基本渲染
        • 5.4.4 添加功能
        • 5.4.5 删除功能
        • 5.4.6 饼图渲染
    • 6 工程化开发和脚手架
      • 6.1 脚手架Vue CLI
      • 6.2 创建项目
        • 6.2.1 全局安装脚手架 vue-cli
        • 6.2.2 vue-cli2.x脚手架构建项目
        • 6.2.3 vue-cli3.x脚手架构建项目
    • 7 项目目录介绍和运行流程
      • 7.1 项目目录介绍
      • 7.2 运行流程

5 生命周期

Vue生命周期：就是一个Vue实例从 创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

watch是监听的数据修改就触发，updated是整个组件的dom更新才触发

4.销毁阶段：销毁Vue实例

两种调用方法：

  • 关闭当前浏览器
  • 调用app.$destroye()方法
68206593781

5.1 Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

Vue生命过程图：

68206604029 
<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>

演示效果：

test23

5.2 在created中发送数据

需求：

一打开页面，便发送请求，获取包含几条新闻信息的数组，将结果展示在页面上。

获取的数据格式如下：

{
    "message": "获取新闻列表成功",
    "data": [
        {
            "id": 1,
            "title": "5G渗透率持续提升，创新业务快速成长",
            "source": "新京报经济新闻",
            "cmtcount": 58,
            "img": "http://ajax-api.itheima.net/images/0.webp",
            "time": "2222-10-28 11:50:28"
        },
        {
            "id": 5,
            "title": "为什么说中美阶段性协议再近一步，读懂周末的这些关键信息",
            "source": "澎湃新闻",
            "cmtcount": 131,
            "img": "http://ajax-api.itheima.net/images/4.webp",
            "time": "2222-10-24 09:08:34"
        },
        {
            "id": 6,
            "title": "阿根廷大选结果揭晓：反对派费尔南德斯有话要说",
            "source": "海外网",
            "cmtcount": 99,
            "img": "http://ajax-api.itheima.net/images/5.webp",
            "time": "2222-10-23 17:41:15"
        },
        {
            "id": 8,
            "title": "LV母公司当年史上最大并购：报价145亿美元购Tiffany",
            "source": "澎湃新闻",
            "cmtcount": 119,
            "img": "http://ajax-api.itheima.net/images/7.webp",
            "time": "2222-10-22 03:59:44"
        },
        {
            "id": 9,
            "title": "黄峥当年1350亿蝉联80后白手起家首富：1年中财富每天涨1个亿",
            "source": "胡润百富",
            "cmtcount": 676,
            "img": "http://ajax-api.itheima.net/images/8.webp",
            "time": "2222-10-21 06:19:37"
        }
    ]
}

代码示例：（在created函数中写上相关请求，发送数据）

<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>

为什么这里发送请求要用async和await关键字？

axios的网络请求是异步的，这意味着它会在后台发送请求，并且JavaScript代码会继续执行而不等待请求完成。

而这里**不需要它的异步性**，需要等他执行完之后，再运行下面的代码。

使用async和await关键字的目的正是为了在等待异步操作完成之后再继续执行后续代码。

async关键字： 表示该函数是一个异步函数，允许在函数内部使用await关键字来等待异步操作的完成。

await关键字： 用于等待一个Promise对象的解析。

演示效果：

image-20240119150135012

5.3 在mounted中获取焦点

一打开某个含搜索框的页面，自动让搜索框获取焦点

核心思路：

  1. 等input框渲染出来 mounted 钩子
  2. 让input框获取焦点 inp.focus()
<body>
<div class="container" id="app">
  <div class="search-container">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.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>

演示效果：

image-20240119153342626

5.4 案例-小黑记账清单

需求效果：

image-20240119153536806

5.4.1 需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

5.4.2 思路分析

1.基本渲染

  • 立刻发送请求获取数据 created
  • 拿到数据，存到data的响应式数据中
  • 结合数据，进行渲染 v-for
  • 消费统计 → 计算属性

2.添加功能

  • 收集表单数据 v-model，使用指令修饰符处理数据
  • 给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
  • 请求成功后，对文本框内容进行清空
  • 重新渲染列表

3.删除功能

  • 注册点击事件，获取当前行的id
  • 根据id发送删除请求
  • 需要重新渲染

4.饼图渲染

  • 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
  • 根据数据试试更新饼图 echarts.setOptions({…})
5.4.3 基本渲染

相关代码：

<body>
<div id="app">
  <div class="contain">
    <!-- 左侧列表 -->
    <div class="list-box">

      <!-- 添加资产 -->
      <form class="my-form">
        <input type="text" class="form-control" placeholder="消费名称" />
        <input type="text" class="form-control" placeholder="消费价格" />
        <button 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 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. 添加功能
   * 3. 删除功能
   * 4. 饼图渲染
   */
  const app = new Vue({
    el: '#app',
    data: {
      list: []
    },
    computed: {
      totalPrice () {
        return this.list.reduce((sum, item) => sum + item.price, 0)
      }
    },
    async created () {
      const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
        params: {
          creator: '小黑'
        }
      })
      this.list = res.data.data
    }
  })
</script>
</body>
5.4.4 添加功能

步骤：

  1. 判断输入数据是否符合标准
  2. 采用等待异步的方式发送请求
  3. 重新刷新页面数据

相关代码：

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 = ''
  }
5.4.5 删除功能

相关代码：

async del (id) {
    // 根据 id 发送删除请求
    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
    // 重新渲染
    this.getList()
  }
5.4.6 饼图渲染

1 添加饼图

<div class="echarts-box" id="main"></div>

2 添加依赖

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

3 初始化：（钩子函数实现渲染饼图）

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)'
          }
        }
      }
    ]
  })
},

4 在刷新数据的函数中添加刷新饼图的函数

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()
  }
}

5 渲染饼图：

created () {
  this.getList()
},

整体代码：

<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>

6 工程化开发和脚手架

开发Vue的两种方式：

  • 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。（前面学习的内容）
  • 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。
image-20240119165705247

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

  • webpack配置不简单
  • 雷同的基础配置
  • 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

6.1 脚手架Vue CLI

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

  1. 开箱即用，零配置
  2. 内置babel等工具
  3. 标准化的webpack配置

使用步骤（搭建一个项目）：

  1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g

    image-20240119170546970

  2. 查看vue/cli版本： vue --version

    用管理员身份运行：

    image-20240119171423976

  3. 创建项目架子：vue create project-name(项目名不能使用中文)

    image-20240119194749656

    没能创建成功。因为这是vue3.0的创建方法

  4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

6.2 创建项目

6.2.1 全局安装脚手架 vue-cli
  • npm install -g vue-cli (vue-lcli2，使用vue-cli2.x初始化项目安装这个)
  • npm install -g @vue/cli (vue-cli3，使用vue-cli3.x初始化项目安装这个）

vue2和vue3的版本呢可以一起安装吗？

不可以。

下载脚手架3（vue-cli3）之前一定要卸载脚手架2（vue-cli2）

6.2.2 vue-cli2.x脚手架构建项目

  • 检查vue-cli是否安装成功

    image-20240119210544841

  • 全局安装 webpack和全局安装 webpack-cli

    安装指令：

    npm i -g webpack

    npm i -g webpack-cli

    使用npm ls -g指令，可以查看全局下安装的所有包及其版本

    image-20240119210823124

  • vue init webpack 项目名（可以不使用管理员身份）

    image-20240119211247241

    可能会遇到下载失败：

    image-20240119211900511

    解决方法：

    • 检查镜像源

      image-20240119212206892

    • 使用V-P-N

    • 原因：仓库总是安装在d盘，而非c盘，全局下使用webpack命令构建项目总会去c盘找template，而那里实际是空的

      从github仓库中下载vue-templates/webpack，然后解压到本地。地址链接：https://github.com/vuejs-templates/webpack

      下载完成后，解压到本地用户目录下的 .vue-templates 目录，并命令为 webpack。

      image-20240120135114633

      然后执行命令vue init webpack XXX（项目名） --offline

    这里使用第二种解决方法

  • 依次选择是或否

    image-20240120135902562

    image-20240120143654207

    image-20240120140121041

    image-20240120140714913

  • 运行项目

    image-20240120140902789

    进入浏览器，输入相关地址：

    image-20240120140942345

6.2.3 vue-cli3.x脚手架构建项目

下载脚手架3（vue-cli3）之前一定要卸载脚手架2（vue-cli2）

  • 卸载老版本

    npm uninstall -g vue-cli

    可以查看vue版本，如果没有出现2.x.x（x表示0-9的数字），说明卸载成功

    image-20240120141914626

  • 下载vue-cli3

    npm i @vue/cli -g

    image-20240120142317199

    下载完成

    image-20240120142525013

    vue-cli3及以上版本不支持vue init webpack vue-project命令，如果想支持，需要安装@vue/cli-init包

    这样的话用vue init webpack vue-project命令依然创建的是vue2项目

    //如果你需要用旧版本（vuecli<3）的vue init功能，可以全局安装一个桥接工具：
cnpm i -g @vue/cli-init

    image-20240120142910475

  • vue-cli3构建vue项目

    vue create vue-demo2

    选择安装方式：

    • 选择创建Vue2的项目
    • 选择创建Vue3的项目
    • 手动配置

    image-20240120143233684

    说明： vue-cli3+可以创建vue2项目，vue-cli2只能创建vue2项目，只不过vue-cli3创建的vue2项目目录和vue-cli2创建的vue2项目目录不同

    用vue-cli3+创建出来的的vue2和vue3项目，除了vue版本差别，还有一个区别是：

    vue3没有vue-template-compiler包，vue2项目有
    如果需要vue-router或者vuex等插件，可以选择第三个，自定义安装

  • 出现报错

    image-20240120150539528

    依照上面的提示方案解决，运行Git

    git config --global --add safe.directory E:/FilesForTest/vue-test2/vue-demo2

    image-20240120151149263

  • 再次创造之前的demo2，运行成功

    image-20240120151259827

  • 运行项目

    image-20240120151532960

    image-20240120151553894

    image-20240120151612736

    创建成功。

7 项目目录介绍和运行流程

7.1 项目目录介绍

image-20240120204411303

虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可

  1. main.js 入口文件

  2. App.vue App根组件

  3. index.html 模板文件

    <div id="app">
  <!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染 -->
</div>

    index.html和之前不同了，**之前是我们直接在这个div中写模板语法；**而现在工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染

7.2 运行流程

image-20240120204548940

// 文件核心作用：导入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')

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/431547.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

面向对象高级编程上

面向对象高级编程上

面向对象高级编程 一、面向对象高级编程上&#xff08;1&#xff09;C代码基本形式&#xff08;2&#xff09;Header中的防卫式声明&#xff08;3&#xff09;不带指针类的实现过程1. 防卫式声明2. 访问级别3.构造函数4.重载4.1 成员函数&#xff08;有this&#xff09;4.2 非成…
阅读更多...
Igraph入门指南 1

Igraph入门指南 1

Igraph入门指南 一、图的结构 图是顶点和边的集合&#xff0c;而边是通过顶点来描述。顶点和边&#xff0c;要用集合的理念去操作。 1、igraph中与图结构相关的函数 .igraph(), add_edges(), add_vertices(), complementer(),compose(), connect(), contract(), delete_ed…
阅读更多...
自我对比： 通过不一致的解决视角更好地进行反思

自我对比： 通过不一致的解决视角更好地进行反思

一、写作动机&#xff1a; LLM 在自我评价时往往过于自信或随意性较大&#xff0c;提供的反馈固执或不一致&#xff0c;从而导致反思效果不佳。为了解决这个问题&#xff0c;作者提倡 "自我对比"&#xff1a; 它可以根据要求探索不同的解决角度&#xff0c;对比差异…
阅读更多...
并发编程并发安全性之Lock锁及原理分析

并发编程并发安全性之Lock锁及原理分析

ReentrantLock 用途:锁是用来解决线程安全问题的 重入锁-> 互斥锁 满足线程的互斥性意味着同一个时刻&#xff0c;只允许一个线程进入到加锁的代码中。多线程环境下&#xff0c;满足线程的顺序访问 锁的设计猜想 一定会涉及到锁的抢占&#xff0c;需要有一个标记来实现互…
阅读更多...
论文学习—Model-based Adversarial Meta-Reinforcement Learning

论文学习—Model-based Adversarial Meta-Reinforcement Learning

Model-based Adversarial Meta-Reinforcement Learning Abstract1. Introduction2. Related work3 Preliminaries基于模型的强化学习&#xff08;MBRL&#xff09;:区别和联系&#xff1a; 4 Model-based Adversarial Meta-Reinforcement Learning4.1 Formulation 4.2 Computin…
阅读更多...
java实现文件上传到本地

java实现文件上传到本地

很多时候我们都需要进行文件上传和下载的操作&#xff0c;具体怎么实现网上的代码其实也是挺多的&#xff0c;刚好我的项目中也遇到了文件上传和下载的需求&#xff0c;本篇博文具体讲解上传操作&#xff0c;下篇博文讲解下载操作。 我们具体来想一想要将一个从前端传来的文件…
阅读更多...
【原理图PCB专题】Allegro模块化移动器件报...has the LOCKED property怎么解锁？

【原理图PCB专题】Allegro模块化移动器件报...has the LOCKED property怎么解锁？

在模块化原理图时，PCB也需要做一个模块.mdd文件。这时需要先画好图纸然后再制作模块化文件。 修改文件时会发现模块化器件报错，无法编辑模块内部器件和走线，器件和走线都被LOCKED，如下所示报错内容： Symbol "U1" Selected Cannot edit Symbol "U1". M…
阅读更多...
磁性机器人在医学领域取得进展

磁性机器人在医学领域取得进展

磁性医疗机器人利用磁场梯度来控制设备的运动&#xff0c;并最终以高精度进入体内的目标组织。这些磁性机器人可以采用导管和微型或纳米机器人的形式&#xff0c;并由磁导航系统操纵。磁性机器人最近取得了一些进展&#xff0c;为临床诊断和治疗用途开辟了新的可能性。在本期的…
阅读更多...
数据结构与算法：堆排序和TOP-K问题

数据结构与算法：堆排序和TOP-K问题

朋友们大家好&#xff0c;本节内容来到堆的应用&#xff1a;堆排序和topk问题 堆排序 1.堆排序的实现1.1排序 2.TOP-K问题3.向上调整建堆与向下调整建堆3.1对比两种方法的时间复杂度 我们在c语言中已经见到过几种排序&#xff0c;冒泡排序&#xff0c;快速排序&#xff08;qsor…
阅读更多...
2024.3.5

2024.3.5

作业1、使用select实现tcp服务器端&#xff0c;poll实现tcp客户端 服务器端&#xff1a; #include <myhead.h> #define SER_IP "192.168.199.131" //服务端IP #define SER_PORT 8888 //服务端端口号int main(int argc, const char *argv[])…
阅读更多...
星瑞格数据库管理系统

星瑞格数据库管理系统

一. 产品介绍 随着信息化的到来&#xff0c;数据安全成为保障信息化建设的一个关键问题&#xff1b;数据库作为信息化系统的基础软件其自身安全以及对数据的保障是至关重要。现阶段国内重要部门的信息系统存放着大量敏感数据&#xff0c;为了保障其数据的安全性&#xff0c;使用…
阅读更多...
Mathcad tips_table相关

Mathcad tips_table相关

1. 可以插入表格&#xff0c;或者2. 从excel 文件导入 选择列 选择其中一行的数值
阅读更多...
Batch Normalization和Layer Normalization和Group normalization

Batch Normalization和Layer Normalization和Group normalization

文章目录 前言一、Group normalization二、批量规范化(Batch Normalization)三、层规范化&#xff08;Layer Normalization&#xff09; 前言 批量规范化和层规范化在神经网络中的每个批次或每个层上进行规范化&#xff0c;而GroupNorm将特征分成多个组&#xff0c;并在每个组内…
阅读更多...
HarmonyOS创建项目和应用—设置数据处理位置

HarmonyOS创建项目和应用—设置数据处理位置

项目和应用介绍 关于项目 项目是资源、应用的组织实体。资源包括服务器、数据库、存储&#xff0c;以及您的应用、终端用户的数据等。在您使用部分服务时&#xff0c;您是数据的控制者&#xff0c;数据将按照您设置的数据处理位置来存储在指定区域。 通常&#xff0c;您不需…
阅读更多...
Mybatis实现分页查询数据（代码实操讲解）

Mybatis实现分页查询数据（代码实操讲解）

在MyBatis中实现分页查询的常见方式有两种&#xff1a;使用MyBatis内置的分页插件如PageHelper&#xff0c;或者手动编写分页的SQL语句。下面我将为你提供两种方式的示例代码。 使用PageHelper分页插件 首先&#xff0c;确保你的项目中已经添加了PageHelper的依赖。在Maven项…
阅读更多...
ZYNQ--关于一些SDK调试问题记录

ZYNQ--关于一些SDK调试问题记录

Debug configuaration中没有debug applicaton 问题如下图&#xff1a; 解决方法&#xff1a; 在Target Setup中的Debug Type中选择如下即可 注意选完之后application中必须勾选运行内核&#xff0c;否则不运行main文件。
阅读更多...
Java项目：36 springboot图书个性化推荐系统的设计与实现003

Java项目：36 springboot图书个性化推荐系统的设计与实现003

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 springboot003图书个性化推荐系统的设计与实现 管理员&#xff1a;首页、个人中心、学生管理、图书分类管理、图书信息管理、图书预约管理、退…
阅读更多...
2195. 深海机器人问题（网络流，费用流，上下界可行流，网格图模型）

2195. 深海机器人问题（网络流，费用流，上下界可行流，网格图模型）

活动 - AcWing 深海资源考察探险队的潜艇将到达深海的海底进行科学考察。 潜艇内有多个深海机器人。 潜艇到达深海海底后&#xff0c;深海机器人将离开潜艇向预定目标移动。 深海机器人在移动中还必须沿途采集海底生物标本。 沿途生物标本由最先遇到它的深海机器人完成采…
阅读更多...
vue3基础教程（2）——创建vue3+vite项目

vue3基础教程（2）——创建vue3+vite项目

博主个人微信小程序已经上线&#xff1a;【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 前言2.node版本检测3.创建vue项目 专栏简介 本系列文章由浅入深&#xff0c;从基础知识到实战开发&#xff0c;非常适合入门同学。 零基础读者也能成功由本系列文章入门&#x…
阅读更多...
循环队列:一道使数据结构萌新知道什么是“愁滋味“的题目

循环队列:一道使数据结构萌新知道什么是“愁滋味“的题目

这破题目肝了我一天半才搞明白,也正是因为这道题目,我才豁然明白了李煜所说的"剪不断,理还乱...别是一般滋味在心头"到底是什么"滋味".在完全搞明白之前,真的是放有放不下,理也理不清... 但是理解之后你会发现,嘛い---,也就那么个回事嘛O(∩_∩)O 目录 1…
阅读更多...
最新文章

Copyright @ 2022~2023