15. Vue工程化 + ElementPlus

ghfdgbg2025-12-14 8:39

Vue工程化+ElementPlus 学习笔记

一、Vue工程化

1. 前端工程化概述

1.1 传统开发痛点
  • 不规范：从零开始开发，无统一标准
  • 难复用：多页面组件共用性差
  • 难维护：资源存储无规范目录，管理不便
1.2 工程化核心特点
特点 说明
模块化 将JS、CSS等拆分为可复用模块，单独维护
组件化 封装UI组件、CSS样式、JS行为，提升复用性和管理效率
规范化 统一目录结构、编码规范、开发流程，降低协作成本
自动化 项目构建、开发、测试、打包、部署全流程自动化

2. 环境准备

2.1 依赖工具
  • 核心工具：NodeJS（提供运行环境）+ npm（Node包管理器）
  • 脚手架：create-vue（Vue官方最新脚手架，快速生成工程化项目）
2.2 NodeJS安装步骤

  1. 双击安装包（node-v18.20.4-x64.msi），勾选「接受协议」

  2. 选择安装目录：无中文、无空格（如E:\develop\NodeJS）

  3. 默认下一步完成安装

  4. 验证安装：命令行执行 node -v（显示版本号）、npm -v（显示npm版本）

  5. 配置npm全局路径（管理员身份执行）：

    bash 复制代码 
    npm config set prefix "你的NodeJS安装目录"

  6. 切换淘宝镜像（加速下载）：

    bash 复制代码 
    npm config set registry https://registry.npmmirror.com
2.3 npm介绍
  • 功能：NodeJS的软件包管理器，通过 npm install xxx 从远程仓库下载依赖到本地
  • 核心作用：管理项目依赖（安装、更新、卸载）

3. Vue项目创建与启动

3.1 项目创建命令
bash 复制代码 
npm create vue@3.3.4
3.2 创建选项说明
选项 说明（默认值：No）
Project name 项目名称（默认vue-project）
Add TypeScript? 是否添加TypeScript支持
Add JSX Support? 是否添加JSX支持
Add Vue Router? 是否添加路由管理（单页应用必备）
Add Pinia? 是否添加状态管理组件
Add Vitest? 是否添加单元测试工具
Add Cypress? 是否添加端到端测试工具
Add ESLint? 是否添加代码质量检查工具
3.3 项目初始化与启动
  1. 进入项目目录：cd 项目名称
  2. 安装依赖：npm install（联网下载依赖，失败可重试）
  3. 启动项目：
    • 命令行：npm run dev
    • VSCode：NPM脚本中点击「dev」运行
  4. 访问地址：http://localhost:5173
3.4 项目核心结构
  • 关键目录：src（核心开发目录，编写组件、JS、样式）
  • 核心文件：
    • main.js：入口文件（创建Vue实例、挂载根组件）
    • App.vue：根组件（页面入口）
    • *.vue：单文件组件（SFC，封装模板、逻辑、样式）

4. Vue组件API风格

4.1 组合式API（Vue3推荐）

  • 特点：基于函数，无this，逻辑灵活可组合

  • 核心语法：

    vue 复制代码 
    <script setup>
// 引入响应式API和钩子
import { ref, onMounted } from 'vue'
// 响应式变量（通过.value访问）
const count = ref(0)
// 函数定义
const increment = () => count.value++
// 生命周期钩子
onMounted(() => console.log('组件挂载完成'))
</script>

  • 关键API：

    • ref()：创建基本类型响应式变量
    • onMounted()：组件挂载完成后执行
4.2 选项式API（Vue2兼容）

  • 特点：基于对象选项，this指向组件实例

  • 核心语法：

    vue 复制代码 
    <script>
export default {
  // 数据定义
  data() { return { count: 0 } },
  // 方法定义
  methods: { increment() { this.count++ } },
  // 生命周期钩子
  mounted() { console.log('组件挂载完成') }
}
</script>
4.3 核心区别
组合式API 选项式API
无this this指向组件实例
函数化组织逻辑 选项化组织逻辑
灵活组合复用 结构固定，复用性较弱

5. Vue工程化案例：用户列表渲染

需求

页面加载后异步请求数据，渲染表格，支持条件查询

核心步骤
  1. 安装axios依赖：npm install axios
  2. 创建组件 views/UserList.vue，封装模板、逻辑、样式
  3. 核心逻辑：
    • 用ref()定义响应式变量（用户列表、查询条件）
    • onMounted()钩子触发初始查询
    • axios发送请求，绑定数据到表格
  4. 在App.vue中引入并使用UserList组件
关键代码片段
vue 复制代码 
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const userList = ref([])
const name = ref('') // 查询条件：姓名
const gender = ref('') // 查询条件：性别
const job = ref('') // 查询条件：职位

// 查询函数
const search = () => {
  axios.get(`https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`)
    .then(res => userList.value = res.data.data)
}

// 页面加载时执行查询
onMounted(() => search())
</script>

二、ElementPlus

1. ElementPlus概述

  • 定义：饿了么团队开发的基于Vue3的UI组件库，快速构建美观网页
  • 核心优势：组件丰富、样式统一、开箱即用
  • 官方文档：https://element-plus.org/zh-CN/
  • 学习方式：拷贝官网组件代码，按需修改配置

2. 快速入门

2.1 安装与引入

  1. 安装组件库（项目目录下执行）：

    bash 复制代码 
    npm install element-plus@2.4.4 --save

  2. 在main.js中全局引入：

    javascript 复制代码 
    import { createApp } from 'vue'
import App from './App.vue'
// 引入ElementPlus和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入中文语言包（可选）
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const app = createApp(App)
app.use(ElementPlus, { locale: zhCn }) // 全局注册
app.mount('#app')
2.2 核心使用流程
  1. 访问ElementPlus官网，找到目标组件（如按钮、表格）
  2. 拷贝组件的template、script、style代码
  3. 按需修改组件属性（如表格数据、按钮类型）
  4. 在自定义组件中使用，或在App.vue中引入

3. 常用组件详解

3.1 按钮组件（Button）

  • 核心属性：type（primary/success/info/warning/danger）

  • 基础用法：

    vue 复制代码 
    <template>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
</template>
3.2 表格组件（Table）

  • 核心属性：

    • :data：绑定表格数据源（数组）
    • prop：列数据对应数据源的键名
    • label：列标题
    • width：列宽度

  • 基础用法：

    vue 复制代码 
    <script setup>
const tableData = [
  { date: '2016-05-03', name: 'Tom', address: 'Los Angeles' }
]
</script>
<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
3.3 分页组件（Pagination）

  • 核心属性：

    • v-model:current-page：当前页码
    • v-model:page-size：每页条数
    • :page-sizes：每页条数选择器（数组）
    • layout：分页布局（total-总条数、sizes-条数选择、prev-上一页、pager-页码、next-下一页、jumper-跳转）
    • :total：总数据量

  • 核心事件：

    • @size-change：每页条数改变时触发
    • @current-change：当前页码改变时触发

  • 基础用法：

    vue 复制代码 
    <script setup>
import { ref } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const handleSizeChange = (val) => console.log(`每页${val}条`)
const handleCurrentChange = (val) => console.log(`当前第${val}页`)
</script>
<template>
  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
3.4 对话框组件（Dialog）

  • 核心控制：v-model（布尔值，控制显示/隐藏）

  • 基础用法：

    vue 复制代码 
    <script setup>
import { ref } from 'vue'
const dialogTableVisible = ref(false) // 初始隐藏
</script>
<template>
  <el-button @click="dialogTableVisible = true">打开对话框</el-button>
  <el-dialog v-model="dialogTableVisible" title="标题">
    <!-- 对话框内容（如表格） -->
    <el-table :data="tableData">...</el-table>
  </el-dialog>
</template>
3.5 表单组件（Form）

  • 核心属性：

    • :model：绑定表单数据对象
    • :inline：行内布局（true/false）

  • 基础用法：

    vue 复制代码 
    <script setup>
import { ref } from 'vue'
const formInline = ref({ user: '', region: '', date: '' })
const onSubmit = () => console.log('提交表单', formInline.value)
</script>
<template>
  <el-form :inline="true" :model="formInline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="请输入" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

4. ElementPlus综合案例：员工列表管理

需求

使用ElementPlus组件实现员工列表查询、数据展示，包含表单查询、表格渲染、条件筛选

核心步骤
  1. 安装axios：npm install axios
  2. 创建组件 views/EmpList.vue
  3. 核心功能：
    • 表单组件：绑定查询条件（姓名、性别、职位）
    • 表格组件：渲染员工数据（ID、姓名、头像、性别、职位、入职日期、更新时间）
    • 逻辑处理：异步请求数据、查询/清空功能
  4. 在App.vue中引入EmpList组件
关键亮点
  • 表格自定义列：头像（渲染图片）、性别/职位（格式化显示）
  • 表单联动：查询按钮触发请求，清空按钮重置条件并重新查询

三、核心总结

1. Vue工程化

  • 核心目标：规范开发流程、提升复用性、自动化部署
  • 关键工具：NodeJS + npm + create-vue
  • 核心语法：组合式API（script setup、ref、生命周期钩子）

2. ElementPlus

  • 核心价值：快速构建美观UI，减少样式编写工作量
  • 使用技巧：官网拷贝组件代码 → 修改data/prop → 绑定业务逻辑
  • 常用组件：Table（数据展示）、Pagination（分页）、Form（查询）、Dialog（弹窗）
相关推荐
Onlyᝰ2 小时前
前端使用jscpd查项目重复率
前端
古城小栈2 小时前
JS 中有 undefined 和 null 两个空值，还有谁！
javascript·ecmascript
pandarking2 小时前
[CTF]攻防世界：web-unfinish（sql二次注入）
前端·数据库·sql·web安全·ctf
IT_陈寒2 小时前
Java并发编程避坑指南：从volatile到ThreadLocal，8个实战案例解析线程安全核心原理
前端·人工智能·后端
ByteCraze2 小时前
前端性能与监控指标采集系统设计方案
前端
山楂树の3 小时前
前端实时渲染性能优化 使用cocoRLE编码进行图像传输并着色绘制
前端·图像处理·实时互动
程序员祥云3 小时前
云希谷技术面
前端
疯笔码良3 小时前
Vue + Echarts 实现科技感数据大屏
vue.js·echarts
一 乐3 小时前
心理健康管理|基于springboot + vue心理健康管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）03【AutoGLM部署】本地私有化部署AI手机Agent04UV安装并设置国内源05Open-AutoGLM Windows 安装部署教程06Linux下V2Ray安装配置指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08BongoCat - 跨平台键盘猫动画工具09Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser10Windows 11 官方系统安装与重装完整教程（2025年最新版）