★ FEATURED ARTICLE 一、Vue工程化-介绍模块化项目划分若干模块单独开发、维护提高效率组件化将页面的各个组成部分封装为一个一个的组件提高复用规范化提供标准统一的目录结构、编码规范、开发流程自动化项目的构建、开发、测试、打包、部署在企业级的前端项目开发中把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。统一规范、提高复用、便于维护二、Vue工程化-环境准备介绍create-vue是Vue官方提供的最新的脚手架工具用于快速生成一个工程化的Vue项目。create-vue提供了如下功能统一的目录结构本地调试热部署单元测试集成打包上线依赖环境NodeJS2、安装NodeJSnpmNode Package Manager是NodeJs的软件包管理器。管理员身份cmd配置全局路径npm config set prefix D:\install\installpath\NodeJS资源目录切换为淘宝下载npm config set registry https://registry.npmmirror.com三、Vue工程化-Vue项目简介1、创建项目新建Vue文件夹管理员cmd运行npm create vue3.3.4创建项目vue-project12、安装依赖进入npm install目录下出现新文件夹3、启动项目打开VSCode打开vue-project1两种启动方式访问localhost:5173四、Vue工程化-vue项目开发流程1、入口文件import { createApp } from vue; import App from ./App.vue; import ./assets/main.css; // 创建应用实例接管id为app的区域 createApp(App).mount(#app); 2、默认首页!DOCTYPE html html langen head meta charsetUTF-8 / link relicon href/favicon.ico / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleVite App/title /head body div idapp/div script typemodule src/src/main.js/script /body /html3、根组件!-- 定义JS控制模板部分的数据和行为JS -- script setup //响应式数据 import { ref } from vue; const message ref(Hello World); /script !-- 模板部分控制的是页面的结构HTML -- template h1{{ message }}/h1 /template !-- 当前组件的CSS样式 -- style scoped/style*.vue是Vue项目中的组件文件在Vue项目中也称为单文件组件SFCSingle-FileComponents)。Vue的单文件组件会将一个组件的逻辑Js模板HTML和样式CSS封装在同一个文件里*.Vue。五、Vue工程化-API风格1、选项式API和组合式API对比2、组合式API创建src/views/ApiDemo.vue文件script setup // 引入ref函数和钩子函数 import { onMounted, ref } from vue; //声明响应式数据 const count ref(0); //声明函数 - 在组合式API中没有this function increment() { count.value; } //钩子函数 onMounted(() { console.log(组合式API - 挂载完成); }); /script template button clickincrementcount:{{ count }}/button /template !-- scoped代表只会影响当前组件不会影响其他组件 -- style scoped/style 根组件中引入api文件!-- 定义JS控制模板部分的数据和行为JS -- script setup //响应式数据 import ApiDemo from ./views/ApiDemo.vue; /script !-- 模板部分控制的是页面的结构HTML -- template !-- 上面引入的组件在这呈现出来 -- ApiDemo/ApiDemo /template !-- 当前组件的CSS样式 -- style scoped/style3、介绍setup是一个标识告诉vue需要进行一些处理让我们可以更简洁的使用组合式API。ref接收一个内部值返回一个响应式的ref对象此对象只有一个指向内部值的属性value。onMounted在组合式API中的钩子方法注册一个回调函数在组件挂载完成后执行。注意在Vue中的组合式API使用时是没有this对象的this对象是undefined。可以用count.value;代替六、Vue工程化-案例新建src/view/EmpList.vuescript setup //引入 import { ref,onMounted } from vue; import axios from axios; //声明响应式数据 const name ref(); const gender ref(); const job ref(); const userList ref([]); //声明函数 - 箭头函数 - await async const search async () { //基于axios发送异步请求, 请求服务器端加载数据 const result await axios.get(https://web-server.itheima.net/emps/list?name${name.value}gender${gender.value}job${job.value}); userList.value result.data.data; } //钩子函数用于数据初始化 onMounted(() { search(); }) /script在组合式API中有没有this没有this在组合式API中如何更新响应式数据内容xXX.value七、ElementPlus官网一个 Vue 3 UI 框架 | Element Plus1、快速入门创建vue项目安装依赖npm install element-plus2.4.4 --save引入组件库main.js中import { createApp } from vue // 引入ElementPlus import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue import ./assets/main.css // 使用ElementPlus createApp(App).use(ElementPlus).mount(#app)2、常见组件1Table表格组件2Pagination分页组件!-- 分页条 -- div classmb-4 el-pagination v-model:current-pagecurrentPage4 v-model:page-sizepageSize4 :page-sizes[10, 20, 30, 40, 50, 75, 100] :backgroundbackground layouttotal, sizes, prev, pager, next, jumper :totaltotal size-changehandleSizeChange current-changehandleCurrentChange / /div3Dialog对话框组件!-- 对话框 -- div classmb-4 el-button plain clickdialogTableVisible true 打开Dialog对话框/el-button el-dialog v-modeldialogTableVisible title收货地址 width800 el-table :datatableData el-table-column propertydate label日期 width150 / el-table-column propertyname label姓名 width200 / el-table-column propertyaddress label地址 / /el-table /el-dialog /div4Form表单组件3、案例1页面布局2交互效果script setup import { ref, onMounted } from vue; import axios from axios; //表单 const emp ref({name: ,gender: ,job: }) //钩子函数 onMounted(() { search(); }) //查询 const search async () { const result await axios.get(https://web-server.itheima.net/emps/list?name${emp.value.name}gender${emp.value.gender}job${emp.value.job}); empList.value result.data.data; } //清空 const clear () { emp.value {name: ,gender: ,job: }; search(); } const empList ref([]); /script template div idcontainer !-- 搜索表单 -- el-form :inlinetrue :modelemp classdemo-form-inline el-form-item label姓名 el-input v-modelemp.name placeholder请输入姓名 / /el-form-item el-form-item label性别 el-select v-modelemp.gender placeholder请选择 el-option label男 value1 / el-option label女 value2 / /el-select /el-form-item el-form-item label职位 el-select v-modelemp.job placeholder请选择 el-option label班主任 value1 / el-option label讲师 value2 / el-option label学工主管 value3 / el-option label教研主管 value4 / el-option label咨询师 value5 / /el-select /el-form-item el-form-item el-button typeprimary clicksearch查询/el-button el-button typeinfo clickclear清空/el-button /el-form-item /el-form !-- 表格 -- el-table :dataempList border stylewidth: 100% el-table-column propid labelID width100 aligncenter/ el-table-column propname label姓名 width120 aligncenter/ el-table-column label头像 width180 aligncenter template #defaultscope img :srcscope.row.image height40px /template /el-table-column el-table-column label性别 width180 aligncenter template #defaultscope {{ scope.row.gender 1 ? 男 : 女}} /template /el-table-column el-table-column label职位 width180 aligncenter template #defaultscope span v-ifscope.row.job 1班主任/span span v-else-ifscope.row.job 2讲师/span span v-else-ifscope.row.job 3学工主管/span span v-else-ifscope.row.job 4教研主管/span span v-else-ifscope.row.job 5咨询师/span span v-else其他/span /template /el-table-column el-table-column propentrydate label入职日期 width180 aligncenter/ el-table-column propupdatetime label更新时间 aligncenter/ /el-table /div /template style scoped #container { width: 70%; margin-left: 15%; margin-right: 15%; } /style
阅读完成 · 觉得有帮助？
