使用vite搭建vue2的练习使用

vite

Vite（发音为"veet"，法语中的“快速”意思）是一款由Evan You（Vue.js的创始人）创建的下一代前端构建工具。Vite的目标是提供一个快速、简单且功能强大的开发环境，特别是针对现代JavaScript框架（如Vue.js和React）的项目。Vite的核心理念是利用现代浏览器的原生ES模块支持，通过提供即时开发（Instant Server Start）和按需编译（On-Demand Compilation）来实现极速的开发体验。官网

特点

• 快速的开发服务器：Vite利用现代浏览器的原生ES模块支持，启动开发服务器的速度非常快。在开发过程中，Vite会根据需要动态编译模块，因此可以快速地响应文件更改，实现毫秒级的热更新。
• 按需编译：Vite只编译你的代码中引入的模块，而不是整个项目。这意味着如果你的应用程序只引入了部分功能模块，那么Vite只会编译这些模块，而不会浪费时间编译整个应用程序。这种按需编译的方式可以显著提高开发和构建的速度。
• 内置开箱即用的插件：Vite内置了许多常用的插件，例如支持TypeScript、CSS预处理器（如Sass、Less）、自动前缀等。这些插件可以通过简单的配置启用，无需额外安装和配置。
• 支持现代JavaScript：Vite完全支持ES模块，并默认情况下使用原生ES模块作为构建输出，这使得它成为现代JavaScript开发的理想选择。
• 支持热更新：Vite提供了热更新功能，可以在开发过程中实时更新浏览器中的页面，而无需手动刷新浏览器。

在vite+vue2项目中了解vue的生命周期

gitee地址

<script>
export default {
  name: 'App',
  data: function () {
    return {
      msg: 'Hello Vue 2 + Vite'
    }
  },
  methods: {
    sayHello: function () {
      alert('Hello!');
    },
    delayChange(str, timer) {
      setTimeout(() => {
        this.msg = str;
      }, timer);
    }
  },
  beforeCreate() {
    // 在实例初始化之后，数据观测和事件配置之前调用。在这个阶段，实例的初始化还没有完成，因此你不能访问到实例的数据和方法。
    this.delayChange('vue2 + vite beforeCreate', 1000)

  },
  created() {
    // 在实例创建完成后被立即调用。在这个阶段，实例已经完成了数据观测、属性和方法的运算，但是尚未挂载到DOM上。你可以在这个阶段进行数据的初始化、异步请求等操作。
    this.delayChange('vue2 + vite created', 2000)
  },
  beforeMount() {
    // 在挂载开始之前被调用。在这个阶段，Vue已经编译了模板，但尚未将其挂载到DOM上。
    this.delayChange('vue2 + vite beforeMount', 3000)
  },
  mounted() {
    // 在挂载完成后被调用。在这个阶段，Vue实例已经被挂载到DOM上，你可以访问到DOM元素，并且可以执行DOM操作、访问外部库等操作。
    setTimeout(() => {
      this.msg = 'vue2 + vite mounted'
    }, 4000);
  },
  beforeUpdate() {
    // 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。在这个阶段，你可以访问到更新之前的数据状态。
    setTimeout(() => {
      this.msg = 'vue2 + vite beforeUpdate'
    }, 5000);
  },
  updated() {
    // 在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。在这个阶段，你可以执行一些需要依赖DOM的操作，但是要注意避免无限循环更新
    setTimeout(() => {
      this.msg = 'vue2 + vite updated'
    }, 6000);
  },
  beforeDestroy() {
    // 在实例销毁之前调用。在这个阶段，实例仍然完全可用，你可以执行一些清理工作，比如取消定时器、解绑事件监听器等。
    setTimeout(() => {
      this.msg = 'vue2 + vite beforeDestroy'
    }, 7000);
  },
  destroyed() {
    // 在实例销毁之后调用。在这个阶段，实例的所有指令和观察者都已被解绑，所有的事件监听器也已被移除，实例已经不再可用。
    setTimeout(() => {
      this.msg = 'vue2 + vite destroyed'
    }, 8000);
  }
};

</script>

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>