Vue2项目快速集成ElementUI

Created2025-11-30|Updated2026-08-25|Vue

|Post Views:

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>

效果如下所示

Author: Keysqiu

Link: https://keysqiu.github.io/2025/11/30/Vue/Vue2%E9%A1%B9%E7%9B%AE%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90ElementUI/

Copyright Notice: All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated.

Related Articles

Vue2组件基本结构

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

脚手架vue-cli创建Vue项目

一、安装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...

Vue2代码运行步骤

浏览器加载 index.html。加载并执行 main.js。初始化 Vue 实例并挂载到 DOM。解析根组件 App.vue。加载路由和状态管理（如果有）。执行组件的生命周期钩子。渲染子组件。响应式数据更新，动态更新页面。当 Vue 实例启动后，组件会经历以下生命周期钩子： beforeCreate：实例初始化之前。 created：实例创建完成，数据和事件已初始化，但未挂载 DOM。 beforeMount：模板编译完成，但尚未挂载到 DOM。 mounted：组件挂载到 DOM，页面渲染完成。 updated：响应式数据更新后，重新渲染。(Vue 会自动更新 DOM) destroyed：组件销毁时执行清理操作。

插槽就是留个坑，让父组件填内容举个🌰 好的，用一个简单例子说明：比如你有一个通用的卡片组件（Card.vue），但想让每个卡片的内容不一样。子组件 Card.vue： <template> <div class="card"> <header>卡片标题</header> <slot></slot>  <footer>卡片底部</footer> </div> </template> 父组件中使用： <template> <Card> <p>这里是我想显示的具体内容</p> </Card> </template> 👉 结果就是：这里是我想显示的具体内容会出现在的位置。 ✅ 简单说：插槽就是“留个坑，让父组件填内容” 。

前端预留代码

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>

nextTick的理解

其实就是在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!' }); } ...

Comments

Loading Database