前端框架 Vue
文章平均质量分 86
逐步深入 Vue开发各个环节
举一个栗子吖
这个作者很懒,什么都没留下…
展开
-
前端开发Vue项目实战:电商后台管理系统(十)------项目优化上线
目录1. 项目优化1.1 项目优化策略1.2 网页顶部添加进度条效果1.3 console问题1.3.1 在执行build命令期间移除所有console1.3.1 只在发布阶段移除所有的console1.4 生成打包报告1.4.1 通过命令行参数的形式生成报告1.4.2 通过可视化UI面板直接生成并查看报告(推荐使用)1.5 修改webpack配置1.5.1 为开发模式与发布模式指定不同的打包入口1.5.2 configureWebpack 与chainWebpack1.5.3 通过chainW原创 2022-05-17 10:59:13 · 1914 阅读 · 0 评论 -
前端开发Vue项目实战:电商后台管理系统(九)------ 数据统计模块
git checkout -b reportgit push -u origin report目录1. 挂载Report组件及基本布局2. 安装echarts运行依赖并渲染demo图表3. 获取数据并渲染表格4. 提交代码1. 挂载Report组件及基本布局<template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-r原创 2022-05-16 15:40:45 · 972 阅读 · 0 评论 -
前端开发Vue项目实战:电商后台管理系统(八)------ 订单管理模块
git checkout -b ordergit push -u origin order目录1. 挂载组件及基本布局2. 获取订单数据3. 表格渲染4. 分页功能5. 实现省市区县数据联动效果6. 展示物流进度对话框6.1 获取物流信息6.2 时间线组件 Timeline 展示物流页面7. 提交代码1. 挂载组件及基本布局<template> <div> <!-- 面包屑导航区域 --> <el-bread原创 2022-05-16 14:28:29 · 1555 阅读 · 2 评论 -
前端开发Vue项目实战:电商后台管理系统(七)------ 商品管理模块 --- 商品列表功能
git checkout -b goods_listgit push -u origin goods_list目录1. 初始化List.vue并 添加路由2. 商品列表table2.1 获取数据1. 初始化List.vue并 添加路由<template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right">原创 2022-05-15 15:38:41 · 1969 阅读 · 0 评论 -
前端开发Vue项目实战:电商后台管理系统(六)------ 商品管理模块 --- 分类参数功能
git checkout -b goods_paramsgit push -u origin goods_params目录1. 参数管理概述2. 初始化分类参数组件页面3. 选择商品分类模块3.1 获取商品分类列表数据3.2 商品分类级联选择框cascader4. 分类参数Tabs页签4.1 渲染Tabs页签4.2 添加参数和添加属性按钮4.3 获取参数列表数据(切换面板)4.4 动态参数和静态属性Table表格5. 添加参数模块5.1 添加参数对话框dialog5.2 添加操作6. 修原创 2022-05-11 16:33:57 · 786 阅读 · 0 评论 -
前端开发Vue项目实战:电商后台管理系统(四)--- 权限管理模块
// 创建rights子分支git checkout -b rights// 将本地的rights分支推送到码云git push -u origin rights目录1. 权限列表1.1 通过路由展示权限列表组件1.2 面包屑导航+卡片视图1.3 调用API获取权限列表的数据1.4 渲染权限列表UI结构2. 权限管理业务分析3. 角色列表3.1 通过路由展示角色列表组件3.2 绘制基本布局结构并获取列表数据3.3 渲染角色列表数据3.4 编辑+删除角色操作1. 权限列表1.1 通过路由展示权限原创 2022-05-08 20:39:53 · 518 阅读 · 0 评论 -
前端开发Vue项目实战:电商后台管理系统(三)------ 用户管理模块 (用户列表 /添加修改删除用户)
目录1. 用户列表1.1 通过路由的形式展示用户列表组件1.2 在sessionStorage中保存左侧菜单的激活状态1.3 绘制用户列表的基本UI结构1.4 获取用户列表数据1.5 使用el-table组件渲染用户列表1.6 自定义状态列的显示效果1.7 通过作用域插槽渲染操作列1.8 实现数据分页效果1.9 修改用户状态1.10 实现搜索功能2. 添加用户2.1 渲染添加用户对话框2.2 渲染添加用户的表单1. 用户列表1.1 通过路由的形式展示用户列表组件新建用户列表组件 components原创 2022-05-06 11:36:24 · 5009 阅读 · 1 评论 -
前端开发Vue项目实战:电商后台管理系统(二)-- 登录退出功能 --主页界面
目录1. 登录/退出功能1.1 登录概述1.2 token 原理分析1.3 登录功能实现1.3.1 Git 创建分支1.3.2 渲染Login组件并实现路由重定向1.3.3 设置背景颜色并在屏幕中央绘制登录盒子1.3.4 绘制默认头像1.3.5 绘制登录表单区域1.3.6 绘制带icon的input输入框1.3.7 实现表单的数据绑定1.3.8 实现表单的数据验证1.3.9 实现表单的重置功能1.3.10 实现登录前表单数据的预验证,配置axios发起登录请求1. 登录/退出功能1.1 登录概原创 2022-05-03 22:07:05 · 4014 阅读 · 3 评论 -
前端开发Vue项目实战:电商后台管理系统(一)前后端搭建
1. 项目概述电商项目基本业务概述:根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式电商后台管理系统的功能电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能开发模式(前后端分离)电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于 Vue 技术栈的 SPA 项目电商后台管理系统的技术选型后台项目的环境安装配置① 安装 MySQL 数据库② 安装 Node.js 环境③ 配置项目相原创 2022-04-30 17:24:30 · 9106 阅读 · 5 评论 -
前端开发Vue项目初始化 ------ 配置码云SSH公钥 - Gitee托管
前端项目初始化步骤① 安装 Vue 脚手架② 通过 Vue 脚手架创建项目③ 配置 Vue 路由④ 配置 Element-UI 组件库⑤ 配置 axios 库⑥ 初始化 git 远程仓库⑦ 将本地项目托管到 Github 或 码云 中win + R 打开终端 输入 vue ui配置Gitee SSH公钥...原创 2022-04-30 16:33:54 · 1586 阅读 · 0 评论 -
Vue基础入门(四)------ 动态组件 & 插槽 & 自定义指令
动态组件动态组件指的是动态切换组件的显示与隐藏vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染使用 keep-alive 保持状态默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组件的状态。keep-alive 对应的生命周期函数当组件被缓存时,会自动触发组件的 deactivated 生命周期函数当组件被激活时,会自动触发组件的 activated 生命周期函数kee原创 2022-04-18 16:24:24 · 513 阅读 · 0 评论 -
Vue基础入门(三)------ 生命周期 & 数据共享 & ref 引用
目录1. 组件的生命周期2. 组件之间的数据共享父组件向子组件共享数据子组件向父组件共享数据兄弟组件之间的数据共享3. ref 引用使用 ref 引用 DOM 元素使用 ref 引用组件实例this.$nextTick(cb) 方法1. 组件的生命周期生命周期 & 生命周期函数组件生命周期函数的分类生命周期图示可以参考 vue 官方文档给出的“生命周期图示”,进一步理解组件生命周期执行的过程:https://cn.vuejs.org/v2/guide/instance.html# 生原创 2022-04-16 21:20:49 · 2708 阅读 · 0 评论 -
Vue基础入门(二)------侦听器、计算属性、vue-cli、vue组件
目录一、 侦听器二、 计算属性三、 vue-cli1. 什么是 vue-cli2. 安装和使用3. vue 项目的运行流程四、 vue 组件一、 侦听器侦听器要定义到watch节点下面,和methods平级;侦听谁 就把谁当作函数名(这里是username),只要username变化就会触发username函数侦听器的格式方法格式的侦听器缺点1:无法在刚进入页面的时候,自动触发!缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器!对象格式的侦听器好处1:可原创 2022-04-14 12:19:37 · 657 阅读 · 0 评论 -
使用 axios 发送网络请求------前后端交互基础
1. axiosaxios的基本语法如下:axios ({ method: '请求的类型', //get、post url:'请求的url地址'}).then((result)=> { //.then用来指定请求成功之后的回调函数 //形参中的result是请求成功之后的结果})...原创 2022-04-12 21:48:25 · 1933 阅读 · 0 评论 -
ES6模块化与异步编程高级用法 ----- Vue铺垫知识
目录1. ES6模块化1.1 什么是ES6模块化规范1.2 ES6模块化的基本语法1.2.1 默认导出和默认导入1.2.2 按需导出和按需导入1.2.3 直接导入并执行模块中代码2. Promise2.1 回调地狱2.2 Promise的基本概念2.2 Promise方法.catch捕获错误Promise.all()方法Promise.race()方法2.3 基于Promise封装读文件方法2.4 获取 .then 的两个实参3. async / await4. EventLoop5.原创 2022-04-11 20:10:41 · 165 阅读 · 0 评论 -
Vue基础入门(一)------指令和过滤器
目录1. Vue 的调试工具2. Vue 简介2.1 数据驱动视图2.2 双向数据绑定2.3 MVVM3. Vue 的基本使用3.1 基本使用步骤3.1 基本代码与 MVVM 的对应关系4. Vue 的指令4.1 指令的概念4.2 内容渲染指令4.3 属性绑定指令4.4 事件绑定指令4.5 双向绑定指令4.6 条件渲染指令4.7 列表渲染指令5. 过滤器1. Vue 的调试工具Vue Devtools下载地址https://chrome.zzzmh.cn/info?token=..原创 2022-04-10 20:54:20 · 1525 阅读 · 0 评论