![](https://img-blog.csdnimg.cn/20201026175650462.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 67
测开如果做好前端开发
糖冰橙
努力确实会上瘾
展开
-
笔记8:商品分类【Vue实战项目:电商管理系统(Element-UI)】
文章目录1 样式1.1 设置路由1.2 完成表格区域展示1.3 实现分页功能1.4 实现添加分类功能1.4.1 完成弹窗绘制1.4.2 完成提交添加分类功能1.4.3 弹窗关闭时,重置数据1.5 实现删除功能1.6 实现修改分类名称功能1 样式1.1 设置路由创建商品分类页面../components/goods/Cate.vue,并添加一些基本的元素<template> <div> <!-- 面包屑导航 --> <el-bread原创 2021-10-04 09:29:33 · 2228 阅读 · 0 评论 -
v-model和:model的区别
vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,第二种是v-bind,还有一种是v-model。{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定。v-modelv-model多在表单中使用,在表单控件或者组件上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected。:model:model是[v-bind]原创 2021-07-26 10:57:17 · 2082 阅读 · 0 评论 -
笔记7:权限管理功能【Vue实战项目:电商管理系统(Element-UI)】
文章目录1 权限列表1.1 通过路由展示权限列表组件1.2 调用API获取权限列表的数据1.3 渲染权限列表UI结构2 权限管理2.1 绘制基本布局结构并获取列表数据2.2 渲染角色列表数据2.3 通过第一层for循环渲染一级权限2.4 渲染二级和三级权限2.5 美化角色下权限的UI结构2.6 完成删除角色下指定权限的功能3 分配权限3.1 弹出分配权限对话框并请求权限数据3.2 配置并使用el-tree树形控件3.3 加载当前角色已有的权限3.4 调用API完成分配权限的功能分配角色1 权限列表1.原创 2021-07-25 21:18:56 · 2229 阅读 · 12 评论 -
笔记6:用户操作【Vue实战项目:电商管理系统(Element-UI)】
文章目录1 添加用户1.1 添加用户的对话框1.2 添加用户的表单1.3 自定义邮箱和手机号的校验规则1.4 实现添加表单的重置操作1.5 实现添加用户前的表单预校验1.6 调用API接口完成添加用户的操作2 修改用户2.1 完成编辑弹窗的绘制2.2 提交表单完成用户信息的修改3 删除用户1 添加用户1.1 添加用户的对话框渲染弹窗addDialogVisible需要定义成<!-- 添加用户对话框 --><el-dialog title="提示" :visible.sy原创 2021-07-20 23:15:03 · 320 阅读 · 1 评论 -
笔记5:主页布局-用户列表【Vue实战项目:电商管理系统(Element-UI)】
文章目录1 整体布局2 完成用户列表2.1 通过路由的形式展示列表组件2.2 在sessionStorage中保存左侧菜单的激活状态2.3 绘制用户列表组件的基础布局结构2.4 获取用户列表数据2.5 使用el-table组件渲染基本的用户列表2.6 添加索引列2.7 通过作用域插槽渲染操作列2.7 通过作用域插槽渲染操作列2.8 实现分页效果2.9 修改用户状态2.10 实现搜索功能1 整体布局2 完成用户列表2.1 通过路由的形式展示列表组件创建Users页面:/components/use原创 2021-07-17 20:35:23 · 1366 阅读 · 9 评论 -
笔记4:主页布局-侧边栏【Vue实战项目:电商管理系统(Element-UI)】
文章目录1 整体布局2 完成主页-侧边栏2.1 实现基本的主页布局2.2 美化主页header区域2.3 实现导航菜单的基本结构2.4 通过axios拦截器添加token令牌2.5 获取左侧菜单数据2.6 通过for循环渲染左侧菜单2.7 优化右侧菜单展示2.8 实现侧边栏折叠与展开效果2.9 首页路由的重定向效果2.10 侧边栏路由链接改造1 整体布局2 完成主页-侧边栏2.1 实现基本的主页布局在 element ui 官网 上查找合适的布局容器Home.vue<template原创 2021-07-12 21:43:16 · 2333 阅读 · 11 评论 -
笔记3:登录/退出流程【Vue实战项目:电商管理系统(Element-UI)】
文章目录1 登录概述1.1 登录业务流程1.2 登录业务的相关技术点2 token原理分析3.1 创建分支3.2 删除初始项目不必要的文件3.3 创建登录组件3.3.1 创建登录页面3.3.2 创建登录页面底色3.3.3 创建登录框底色3.3.4 绘制头像3.3.5 绘制输入框和按钮3.3.6 表单数据绑定3.3.7 表单数据验证3.3.8 实现表单的重置功能3.3.9 实现登录前表单数据的预校验3.3.10 配置axios发起请求3.3.11 创建弹窗提示3.3.12 获取并存储token3.3.13 设原创 2021-07-03 12:45:29 · 973 阅读 · 2 评论 -
笔记2:后台项目的环境安装配置【Vue实战项目:电商管理系统(Element-UI)】
mysql配置安装并启动本地mysq,导入mydb数据安装node环境node官网下载,或者使用n管理node环境配置项目相关信息下载后端代码git clone https://gitee.com/half-half/vue_api_server安装依赖npm install 启动项目node app.js[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I0LEupod-1624703221661)(evernotecid://96C8429原创 2021-06-26 18:27:12 · 319 阅读 · 0 评论 -
笔记1:项目初始化【Vue实战项目:电商管理系统(Element-UI)】
文章目录环境准备安装nodejs安装vue安装vue-cli脚手架构建工具通过Vue脚手架创建项目配置Element-UI组件库配置axios环境准备安装nodejs在官网直接下载安装即可验证安装成功node -v安装vuenpm install vue验证安装成功npm list vue安装vue-cli脚手架构建工具安装npm install -g vue-cli 验证安装成功vue -V 通过Vue脚手架创建项目启动脚手架GUI界面vue原创 2021-06-23 23:11:25 · 273 阅读 · 3 评论 -
vue cli创建vue2项目报错:ERESOLVE unable to resolve dependency tree;但创建vue3项目正常
本地环境@vue/cli: 4.5.7node: 16.3.0npm: 7.15.1报错信息npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! Found: vue@2.6.14npm ERR! node_modules/vuenpm ERR! vue@"^2.6.11" from the root projectnpm ERR! peer vue原创 2021-06-23 10:29:37 · 2067 阅读 · 1 评论 -
Vue(+ element UI + Django)编写学生管理页面
初学vue的时候写的,采用的是npm形式引入vue和element-ui,后端逻辑使用Django来写的,对于测试开发学习些测试平台,是个很好的入门文章。写完后台的样子如下:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-11-29 15:56:03 · 1757 阅读 · 1 评论 -
Module not found: Error: Can‘t resolve ‘./components/Login.vue‘ in 项目路径问题
项目环境@vue/cli 4.5.7问题描述1、在 "./src/components/“文件夹下创建"Login.vue"文件;2、在路由文件(”./src/router/index.js)中编写路由:import Vue from 'vue'import Router from 'vue-router'import Login from './components/Login.vue'Vue.use(Router)export default new Router({ ro原创 2020-10-24 15:09:46 · 9690 阅读 · 4 评论