共享网站的详细规划养殖企业网站

共享网站的详细规划,养殖企业网站,网站优化的图片,关键词热度分析Vue工程化ElementPlus 学习笔记 一、Vue工程化 1. 前端工程化概述 1.1 传统开发痛点 不规范#xff1a;从零开始开发#xff0c;无统一标准难复用#xff1a;多页面组件共用性差难维护#xff1a;资源存储无规范目录#xff0c;管理不便 1.2 工程化核心特点特点说明模块化…Vue工程化ElementPlus 学习笔记一、Vue工程化1. 前端工程化概述1.1 传统开发痛点不规范从零开始开发无统一标准难复用多页面组件共用性差难维护资源存储无规范目录管理不便1.2 工程化核心特点特点说明模块化将JS、CSS等拆分为可复用模块单独维护组件化封装UI组件、CSS样式、JS行为提升复用性和管理效率规范化统一目录结构、编码规范、开发流程降低协作成本自动化项目构建、开发、测试、打包、部署全流程自动化2. 环境准备2.1 依赖工具核心工具NodeJS提供运行环境 npmNode包管理器脚手架create-vueVue官方最新脚手架快速生成工程化项目2.2 NodeJS安装步骤双击安装包node-v18.20.4-x64.msi勾选「接受协议」选择安装目录无中文、无空格如E:\develop\NodeJS默认下一步完成安装验证安装命令行执行node -v显示版本号、npm -v显示npm版本配置npm全局路径管理员身份执行npmconfigsetprefix你的NodeJS安装目录切换淘宝镜像加速下载npmconfigsetregistry https://registry.npmmirror.com2.3 npm介绍功能NodeJS的软件包管理器通过npm install xxx从远程仓库下载依赖到本地核心作用管理项目依赖安装、更新、卸载3. Vue项目创建与启动3.1 项目创建命令npmcreate vue3.3.43.2 创建选项说明选项说明默认值NoProject name项目名称默认vue-projectAdd TypeScript?是否添加TypeScript支持Add JSX Support?是否添加JSX支持Add Vue Router?是否添加路由管理单页应用必备Add Pinia?是否添加状态管理组件Add Vitest?是否添加单元测试工具Add Cypress?是否添加端到端测试工具Add ESLint?是否添加代码质量检查工具3.3 项目初始化与启动进入项目目录cd 项目名称安装依赖npm install联网下载依赖失败可重试启动项目命令行npm run devVSCodeNPM脚本中点击「dev」运行访问地址http://localhost:51733.4 项目核心结构关键目录src核心开发目录编写组件、JS、样式核心文件main.js入口文件创建Vue实例、挂载根组件App.vue根组件页面入口*.vue单文件组件SFC封装模板、逻辑、样式4. Vue组件API风格4.1 组合式APIVue3推荐特点基于函数无this逻辑灵活可组合核心语法script setup // 引入响应式API和钩子 import { ref, onMounted } from vue // 响应式变量通过.value访问 const count ref(0) // 函数定义 const increment () count.value // 生命周期钩子 onMounted(() console.log(组件挂载完成)) /script关键APIref()创建基本类型响应式变量onMounted()组件挂载完成后执行4.2 选项式APIVue2兼容特点基于对象选项this指向组件实例核心语法script export default { // 数据定义 data() { return { count: 0 } }, // 方法定义 methods: { increment() { this.count } }, // 生命周期钩子 mounted() { console.log(组件挂载完成) } } /script4.3 核心区别组合式API选项式API无thisthis指向组件实例函数化组织逻辑选项化组织逻辑灵活组合复用结构固定复用性较弱5. Vue工程化案例用户列表渲染需求页面加载后异步请求数据渲染表格支持条件查询核心步骤安装axios依赖npm install axios创建组件views/UserList.vue封装模板、逻辑、样式核心逻辑用ref()定义响应式变量用户列表、查询条件onMounted()钩子触发初始查询axios发送请求绑定数据到表格在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二、ElementPlus1. ElementPlus概述定义饿了么团队开发的基于Vue3的UI组件库快速构建美观网页核心优势组件丰富、样式统一、开箱即用官方文档https://element-plus.org/zh-CN/学习方式拷贝官网组件代码按需修改配置2. 快速入门2.1 安装与引入安装组件库项目目录下执行npminstallelement-plus2.4.4 --save在main.js中全局引入import{createApp}fromvueimportAppfrom./App.vue// 引入ElementPlus和样式importElementPlusfromelement-plusimportelement-plus/dist/index.css// 引入中文语言包可选importzhCnfromelement-plus/dist/locale/zh-cn.mjsconstappcreateApp(App)app.use(ElementPlus,{locale:zhCn})// 全局注册app.mount(#app)2.2 核心使用流程访问ElementPlus官网找到目标组件如按钮、表格拷贝组件的template、script、style代码按需修改组件属性如表格数据、按钮类型在自定义组件中使用或在App.vue中引入3. 常用组件详解3.1 按钮组件Button核心属性typeprimary/success/info/warning/danger基础用法template el-button默认按钮/el-button el-button typeprimary主要按钮/el-button el-button typesuccess成功按钮/el-button /template3.2 表格组件Table核心属性:data绑定表格数据源数组prop列数据对应数据源的键名label列标题width列宽度基础用法script setup const tableData [ { date: 2016-05-03, name: Tom, address: Los Angeles } ] /script template el-table :datatableData border stylewidth: 100% el-table-column propdate label日期 width180 / el-table-column propname label姓名 width180 / el-table-column propaddress label地址 / /el-table /template3.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-pagecurrentPage4 v-model:page-sizepageSize4 :page-sizes[100, 200, 300, 400] layouttotal, sizes, prev, pager, next, jumper :total400 size-changehandleSizeChange current-changehandleCurrentChange / /template3.4 对话框组件Dialog核心控制v-model布尔值控制显示/隐藏基础用法script setup import { ref } from vue const dialogTableVisible ref(false) // 初始隐藏 /script template el-button clickdialogTableVisible true打开对话框/el-button el-dialog v-modeldialogTableVisible title标题 !-- 对话框内容如表格 -- el-table :datatableData.../el-table /el-dialog /template3.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 :inlinetrue :modelformInline el-form-item label审批人 el-input v-modelformInline.user placeholder请输入 / /el-form-item el-form-item el-button typeprimary clickonSubmit查询/el-button /el-form-item /el-form /template4. ElementPlus综合案例员工列表管理需求使用ElementPlus组件实现员工列表查询、数据展示包含表单查询、表格渲染、条件筛选核心步骤安装axiosnpm install axios创建组件views/EmpList.vue核心功能表单组件绑定查询条件姓名、性别、职位表格组件渲染员工数据ID、姓名、头像、性别、职位、入职日期、更新时间逻辑处理异步请求数据、查询/清空功能在App.vue中引入EmpList组件关键亮点表格自定义列头像渲染图片、性别/职位格式化显示表单联动查询按钮触发请求清空按钮重置条件并重新查询三、核心总结1. Vue工程化核心目标规范开发流程、提升复用性、自动化部署关键工具NodeJS npm create-vue核心语法组合式APIscript setup、ref、生命周期钩子2. ElementPlus核心价值快速构建美观UI减少样式编写工作量使用技巧官网拷贝组件代码 → 修改data/prop→ 绑定业务逻辑常用组件Table数据展示、Pagination分页、Form查询、Dialog弹窗