可克达拉市网站建设_网站建设公司_测试上线_seo优化

Vue工程化+ElementPlus 学习笔记

一、Vue工程化

1. 前端工程化概述

1.1 传统开发痛点

• 不规范：从零开始开发，无统一标准
• 难复用：多页面组件共用性差
• 难维护：资源存储无规范目录，管理不便

1.2 工程化核心特点

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全局路径（管理员身份执行）：

   npmconfigsetprefix"你的NodeJS安装目录"

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

   npmconfigsetregistry https://registry.npmmirror.com

2.3 npm介绍

• 功能：NodeJS的软件包管理器，通过npm install xxx从远程仓库下载依赖到本地
• 核心作用：管理项目依赖（安装、更新、卸载）

3. Vue项目创建与启动

3.1 项目创建命令

npmcreate vue@3.3.4

3.2 创建选项说明

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，逻辑灵活可组合
• 核心语法：

  <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指向组件实例
• 核心语法：

  <script> export default { // 数据定义 data() { return { count: 0 } }, // 方法定义 methods: { increment() { this.count++ } }, // 生命周期钩子 mounted() { console.log('组件挂载完成') } } </script>

4.3 核心区别

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

需求

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

核心步骤

1. 安装axios依赖：npm install axios
2. 创建组件views/UserList.vue，封装模板、逻辑、样式
3. 核心逻辑：
   • 用ref()定义响应式变量（用户列表、查询条件）
   • onMounted()钩子触发初始查询
   • axios发送请求，绑定数据到表格
4. 在App.vue中引入并使用UserList组件

关键代码片段

<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. 安装组件库（项目目录下执行）：

   npminstallelement-plus@2.4.4 --save

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

   import{createApp}from'vue'importAppfrom'./App.vue'// 引入ElementPlus和样式importElementPlusfrom'element-plus'import'element-plus/dist/index.css'// 引入中文语言包（可选）importzhCnfrom'element-plus/dist/locale/zh-cn.mjs'constapp=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）
• 基础用法：

  <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：列宽度
• 基础用法：

  <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：当前页码改变时触发
• 基础用法：

  <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（布尔值，控制显示/隐藏）
• 基础用法：

  <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）
• 基础用法：

  <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（弹窗）