本页自动汇总「Vue」分类下的全部笔记（含子分类），随笔记增删实时更新。

浏览器加载 index.html。

加载并执行 main.js。

初始化 Vue 实例并挂载到 DOM。

解析根组件 App.vue。

加载路由和状态管理（如果有）。

执行组件的生命周期钩子。

渲染子组件。

响应式数据更新，动态更新页面。

当 Vue 实例启动后，组件会经历以下生命周期钩子：

beforeCreate：实例初始化之前。

created：实例创建完成，数据和事件已初始化，但未挂载 DOM。

beforeMount：模板编译完成，但尚未挂载到 DOM。

mounted：组件挂载到 DOM，页面渲染完成。

updated：响应式数据更新后，重新渲染。(Vue 会自动更新 DOM)

destroyed：组件销毁时执行清理操作。

<template>
  <div>
  //code...
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  console.log('我要走了')
  // 清理定时器
  // clearInterval(this.timer)
}
  methods: {}
}
</script>
<style scoped>
</style>

1、下载依赖
npm i element-ui -S
2、导入依赖

在main.js文件下添加如下代码即可
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size:"small"});
3、测试

在任一vue文件中添加如下所示代码
<el-button>这是一个测试按钮</el-button>
效果如下所示

浏览器加载 index.html。

加载并执行 main.js。

使用 createApp()创建 Vue 应用实例。

注册路由和状态管理（如果有）。

挂载 Vue 应用到 DOM（如 #app）。

解析根组件 App.vue。

执行组件的生命周期钩子。

渲染子组件。

响应式数据更新，动态更新页面。

当 Vue 实例启动后，组件会经历以下生命周期钩子：

onBeforeCreate：实例初始化之前。

onCreated：实例创建完成，数据和事件已初始化，但未挂载 DOM。

onBeforeMount：模板编译完成，但尚未挂载到 DOM。

onMounted：组件挂载到 DOM，页面渲染完成。

onUpdated：响应式数据更新后，重新渲染。(Vue 会自动更新 DOM)

onDestroyed：组件销毁时执行清理操作。

插槽就是 留个坑，让父组件填内容

举个🌰

好的，用一个简单例子说明：

比如你有一个通用的卡片组件（Card.vue），但想让每个卡片的内容不一样。

子组件 Card.vue：
<template>
  <div class="card">
    <header>卡片标题</header>
    <slot></slot>  
    <footer>卡片底部</footer>
  </div>
</template>
父组件中使用：
<template>
  <Card>
    <p>这里是我想显示的具体内容</p>
  </Card>
</template>
👉 结果就是：
这里是我想显示的具体内容
会出现在的位置。

✅ 简单说：插槽就是“留个坑，让父组件填内容” 。

其实就是在DOM内容完全更新了之后再执行callback中的操作，避免拿到脏DOM
常用于需要操作更新后 DOM 的场景，比如获取元素尺寸、聚焦输入框、初始化第三方库等。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated!'; // 修改数据
      // ❌ 此时 DOM 还未更新
      console.log(this.$el.textContent); // 可能还是 'Hello'
      // ✅ 等 DOM 更新后再执行
      this.$nextTick(() => {
        console.log(this.$el.textContent); // 现在是 'Updated!'
      });
    }
  }
}

🌿 1. created

“我出生了！数据有了，但页面还没长出来。”

数据、方法已准备好，可以访问 this.data。

常用于：发请求、初始化数据。

页面（DOM）还没生成，不能操作。
created() {
  console.log('我出生了！', this.message) // ✅ 能打印
  // 通常在这里请求数据
  // this.fetchData()
}
🌳 2. mounted

“我长出来了！页面已经有了。”

组件已挂载到页面，可以操作 DOM 了！

最常用之一：比如操作图表、定时器、第三方插件。
mounted() {
  console.log('我出现在页面了！')
  // 可以操作 DOM
  // this.$el.querySelector(...)
}
🍁 3. beforeDestroy

“我要被干掉了，趁我还活着，清理一下。”

组件销毁前调用。

常用于：清除定时器、解绑事件、取消订阅。
beforeDestroy() {
  console.log('我要走了')
  // 清理定时器
  // clearInterval(this.timer)
}
✅ 一句话总结使用场景：

生命周期一句话用途

created 发请求、初始化数据

mounted 操作 DOM、启动插件

beforeDestroy 清理定时器、事件等

记住这个顺序：
出生 → 长身体 → 更新 → 挂了
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
搞定！🎉

生命周期	一句话用途
created	发请求、初始化数据
mounted	操作 DOM、启动插件
beforeDestroy	清理定时器、事件等

JavaScript

//=====
使用 setup，你不需要显式地定义 setup 函数。所有在 <script setup> 中的代码都会自动作为 setup 函数的一部分。
//=====
<script setup lang="ts"> //ts或js
</script>

CSS

//=====
setup 是 Vue 3 中的一个新特性，用于在 <style> 标签中启用组合式 API 的语法糖。它允许你在 <style> 标签中使用组合式 API 的变量和函数。
scoped 用于将样式限定在当前组件范围内，防止样式污染全局。使用 scoped 后，Vue 会自动为当前组件的样式添加独特的属性选择器，使其只作用于当前组件的元素。
//=====
<style setup lang="less" scoped> //less或sass
</style>

一、安装vue-cli
npm install -g @vue/cli 
安装完成后：输入vue -V检查版本，出现版本号就表示安装成功，如果出现“vue” 不是内部或外部命令，也不是可运行的程序或批处理文件，就说明安装失败了

（1）新建一个空文件夹，在该文件夹下打开终端，输入创建命令按回车
# 项目名不能用驼峰命名
# 格式为：vue create [Vue项目名称]
vue create vue-project-name
第一项和第二项，选择后会直接创建对应项目。 这里主要介绍选择第三项手动配置。

（2）选择第三项以后，会有如下选择配置项，按空格选中/取消选中

个人习惯勾选如下： （选完之后按回车）

（3）选择vue版本

按需勾选，我一般用vue2

（4）路由模式

第三步选择路由才会有这一步骤，一般选择Y

（5）css预处理器

在第三步中勾选CSS pre-processors才会有这一步选择，选择第2个

（6）配置文件的存放位置，选择第一个

选项一：配置文件放在独立的配置文件中。选项二：配置文件放在package.json中。 tips：建议选择第 2 个，保存到单独的配置文件，这样方便我们做自定义配置

（7）保存配置

输入y以后，会让你输入一个名称，下次创建项目，在（1）中就会多出一个这个名称的选项。一般输入y

再按回车，脚手架就会开始自动创建项目了！！！

（8）运行项目

打开效果如下：