![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue项目实战
文章平均质量分 87
Sheldon一蓑烟雨任平生
目前正在学习Vue.js、React.js和微前端,并持续跟新相关博客内容
展开
-
教你从零写vue穿梭框
教你从零写vue穿梭框1. 前言2. 制作选择组件(select-input)2. 制作vue穿梭框组件(table-transfer)4. 将选择组件和穿梭框组件结合使用4.1 点击选择组件按钮,弹出穿梭框4.2 将select-input组件中的数据显示在弹框中的已选表格中4.2.1 全局引入lodash4.2.2 初始化input-select组件list数据和穿梭框的selectList(已选中的人员)4.3 将重新选择后的表格数据显示在select-input组件中4.3 单选模式5. 完整代码:原创 2022-04-02 00:40:41 · 5265 阅读 · 1 评论 -
教你从零写vue日历组件
自制vue日历组件前言前言最近做项目遇到一个需求,需要制作一个定制化的日历组件,如下图所示,需求大致如下:(2)日历可以按照月份进行上下月的切换。(2)按照月份展示周一到周日的排班信息。(3)排版信息分为早班和晚班。(4)按照日期对排班进行颜色区分:当前月份排班信息正常颜色,今天显示深色,其他月份显示浅色。(5)点击编辑按钮,日历进入编辑模式。简单点说就是,今天和今天之后的排班右侧都显示一个选择按钮,点击后可弹框编辑当日的排班人员。.........原创 2022-02-28 17:23:11 · 11570 阅读 · 30 评论 -
vue-color-picker-sheldon使用说明(一款基于Vue的取色器/颜色选择器)
这是一个基于 vue 的取色器组件,功能强大,支持拖拽、取色等功能。原创 2021-12-07 16:56:07 · 2873 阅读 · 0 评论 -
el-color-picker-sheldon使用说明(一款基于Vue和ElementUI的取色器)
一款基于element-ui的可拖动,包含所有颜色跨度,可调节透明度和颜色取值的取色器。原创 2021-12-05 16:34:09 · 2325 阅读 · 0 评论 -
如何写一个vue组件发布到npm,包教包会,保姆级教学
如何写一个简单的组件发布到npm前言1.前期准备——创建一个vue项目前言因为本章内容主要是说明如何将组件发布到npm的步骤,所以创建的组件相当简单,并不会涉及到其他的诸如ElementUI或者Ant Design Vue之类的UI组件库。如果是涉及到如何创建一个自己的组件库或者基于其他的组件库创建的组件发布,这一部分的内容,我会放到该专题内容接下来的几篇文章进行详细说明。1.前期准备——创建一个vue项目使用vue create 项目名称命令创建一个基础的vue项目,因为是比较简单的演示,所以选择原创 2021-12-04 21:32:17 · 6699 阅读 · 3 评论 -
21.番外篇——Ant Design Vue可展开table的实现
21.番外篇——Ant Design Vue可展开table的实现目标实现代码实现目标实现本章内容是使用Ant Design Vue实现与之前使用Element UI实现的类似角色表格,因为内容太多,所以采用点击展开的方式。代码实现...原创 2021-10-18 09:59:28 · 3243 阅读 · 0 评论 -
20.番外篇——Vue如何自定义组件并且进行全局配置
20.番外篇——如何自定义组件并且进行全局配置前言1.创建自定义组件2.导出自定义组件3.main.js中引入自定义的公共组件并挂在到Vue4.使用自定义的公共组件前言通过之前的系列文章我们基本掌握了vue项目开发的流程和方式,但是对vue的一些功能用法仍然存在缺失。最近公司刚好转型技术栈,使用Ant Design Vue配合Vue进行前端项目的开发,虽然和之前的UI框架不同,但是用法大同小异。借此机会,正好利用番外篇说明下Ant Design Vue和Element UI的异同,并且补全之前没有进行说原创 2021-10-15 17:29:55 · 1020 阅读 · 0 评论 -
19.Vue项目优化
收尾优化前言1.项目优化1.1项目优化策略1.2通过nprogress添加进度条1.3 解决serve命令中提示的警告1.4 在执行build命令时所有的console1.5 生成打包报告1.6 通过vue.config.js修改webpack的默认配置1.7 通过externals加载外部CND资源1.8 通过CDN优化ElementUI1.9 首页内容定制2.1 路由懒加载前言中间其他页面的内容都大同小异,业务无非就是增删改查,使用的组件也大多都是ElementUI组件,看到这里,大家基本上查看下官原创 2021-03-05 17:46:37 · 384 阅读 · 1 评论 -
电商管理后台 API 接口文档
电商管理后台 API 接口文档1. 电商管理后台 API 接口文档1.1. API V1 接口说明1.1.1. 支持的请求方法1.1.2. 通用返回状态说明1.2. 登录1.2.1. 登录验证接口1.3. 用户管理1.3.1. 用户数据列表1.3.2. 添加用户1.3.3. 修改用户状态1.3.4. 根据 ID 查询用户信息1.3.5. 编辑用户提交1.3.6. 删除单个用户1.3.7. 分配用户角色1.4. 权限管理1.4.1. 所有权限列表1.4.2. 左侧菜单权限1.5. 角色管理1.5.1. 角色列转载 2020-09-03 17:17:50 · 5215 阅读 · 23 评论 -
18.权限管理-权限列表的实现
权限管理-权限列表的实现1.页面结构——导航+表格1.1面包屑导航区域1.2表格区域1.2.1获取表格数据1.2.2制作表格填充数据权限业务分析1.页面结构——导航+表格页面可以分为面包屑导航区域和表格区域预览图:1.1面包屑导航区域面包屑导航区域代码: <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-brea原创 2020-07-19 13:37:49 · 683 阅读 · 0 评论 -
16.在sessionStorage中保存左侧菜单的激活状态
在sessionStorage中保存左侧菜单的激活状态1.el-menu的default-active属性2.在sessionStorage中保存左侧菜单的激活状态2.1在sessionStorage中保存点击的菜单路径2.2将sessionStorage的菜单路径赋值给menu的default-active属性1.el-menu的default-active属性打开element官网的,查看Menu的default-active属性在项目中使用效果如下:2.在sessionStorage中原创 2020-07-12 17:07:33 · 499 阅读 · 2 评论 -
15.通过路由的形式展示用户列表组件
通过路由的形式展示用户列表组件1.创建Users.vue在路由文件中导入并使用1.创建Users.vue首先写一个Users.vue,为了方便记忆和管理,我们将二级菜单中的user路由对应的内容,在components下新建一个user目录,在user文件夹下创建Users.vue<template> <div> <h3>用户列表组件</h3> </div></template><script>原创 2020-07-10 01:09:50 · 300 阅读 · 0 评论 -
14.对侧边栏的路由链接进行改造
对侧边栏的路由链接进行改造了解el-menu的router属性点击侧边栏二级菜单跳转更改二级菜单index值了解el-menu的router属性查看element官网menu的router属性,该属性决定el-menu是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转点击侧边栏二级菜单跳转点击用户列表,因为之前对二级菜单设置index为对应菜单项数据的id,因此点击点击后会发生对应的路由跳转。 <el-menu-item :原创 2020-07-10 00:53:48 · 252 阅读 · 0 评论 -
13.对Main的内容进行路由设置
对Main的内容进行路由设置实现首页路由的重定向先写一个welcome.vue,用作重定向的组件设置home页面重定向实现首页路由的重定向先写一个welcome.vue,用作重定向的组件<template> <div> <h3>Welcome</h3> </div></template>设置home页面重定向 { path: '/home', component: Home, r原创 2020-07-10 00:37:43 · 542 阅读 · 0 评论 -
12.实现主页的基本布局
实现主页的基本布局1.主页的页面布局1.1选择页面布局1.2对主页布局进行宽高设置1.主页的页面布局1.1选择页面布局前往Element官网Container布局容器部分,寻找需要的页面布局,复制对应的代码到主页中。对应代码:<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-a原创 2020-07-09 23:44:08 · 762 阅读 · 0 评论 -
11.登录之后的页面跳转操作
登录之后的页面跳转操作1.登录后记录用户token1.1 为什么使用token?1.2 token为什么保存在sessionStorage中?1.3 代码2. 登录成功后,页面跳转到后台主页1.登录后记录用户token1.1 为什么使用token?项目中除了登录之外的其他API接口,必须要在登录之后才能访问。此时就需要页面存在一个用户登录后传回来的token,证明用户已经登录成功。1.2 token为什么保存在sessionStorage中?(2)token 只应在当前网站打开期间生效,所以将 t原创 2020-07-01 01:41:21 · 2595 阅读 · 0 评论 -
10.配置Message全局弹框组件
配置Message全局弹框组件1.导入弹框组件2.在项目组件方法中使用1.导入弹框组件在element.js中导入Message组件,并且挂在到Vue的$message属性上(属性名可自定义)2.在项目组件方法中使用参照element-ui官网在项目中使用弹框...原创 2020-07-01 01:10:37 · 493 阅读 · 0 评论 -
9.使用element-ui和axios实现登录前表单的预验证
使用element-ui和axios实现登录前表单的预验证1.在main.js中导入axios2.在登录组件中设置login方法1.在main.js中导入axios其中axios.defaults.baseURL的值根据项目接口修改import axios from 'axios'// 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'Vue.prototype.$http = axios2.在登录原创 2020-07-01 00:19:13 · 592 阅读 · 0 评论 -
8.使用element-ui实现表单验证
使用element-ui实现表单验证1.绑定表单数据1.1设计表单数据对象1.2绑定对应的form2.绑定表单验证规则2.1设计表单验证规则2.2绑定对应的form3.实例代码1.绑定表单数据1.1设计表单数据对象1.2绑定对应的form2.绑定表单验证规则2.1设计表单验证规则2.2绑定对应的form3.实例代码<template> <div class="login_container"> <div class="login_box"&g原创 2020-06-30 16:57:20 · 269 阅读 · 0 评论 -
7.在vue中使用element-ui组件、图标和阿里图标库
在vue中使用element-ui组件和阿里图标库1.下载element-ui到项目中2.参照element-ui官网插入组件3.在组件中插入图标3.1插入element-ui图标3.2插入阿里图标1.下载element-ui到项目中项目中已经下载,注意按需导入,这样项目会比较小。2.参照element-ui官网插入组件打开element-ui官网,找到对应的组件代码,复制到项目中但是因为element-ui插件之前是选择按需导入,虽然性能会更好,但是需要在plugins->element原创 2020-06-30 16:26:06 · 1542 阅读 · 0 评论 -
6.在vue中使用less
在vue中使用less1.使用less对Login.vue进行css设置2.下载less相关的开发依赖3.其他样式调整1.使用less对Login.vue进行css设置<template> <div class="login_container">登录组件</div></template><script>export default {};</script>// 定义单文件组件必须设置scoped<sty原创 2020-06-30 16:03:41 · 976 阅读 · 0 评论 -
5.渲染Login组件并实现重定向
渲染Login组件并实现重定向1.创建Login组件2.设置Login组件路由,并实现重定向3.使用路由1.创建Login组件在components中创建登录组件Login.vue<template> <div>登录组件</div></template><script>export default {};</script>// 定义单文件组件必须设置scoped<style lang="less" sc原创 2020-06-29 23:20:35 · 574 阅读 · 2 评论 -
4.梳理vue项目,删除不必要的代码和组件
梳理vue项目,删除不必要的代码和组件1.创建分支2.使用vue ui打开一个刚创建的vue项目3.删除不必要的代码和组件3.1删除App.vue中的默认内容3.2删除默认的路由内容和对应的view文件3.3删除除了app以外的其余组件1.创建分支使用vscode打开前端项目执行:git status检查项目状态。执行:git checkout -b login 创建login分支,并且切换到该分支。执行:git branch 查看当前项目所有分支执行:git status 查看项目当前在哪个分原创 2020-06-29 17:51:53 · 5994 阅读 · 2 评论 -
3.使用码云管理项目
使用码云管理项目1.什么是gitee?gitee和github的关系是什么?2.Gitee如何进行公钥设置?2.1找到生成/添加SSH公钥教程2.2按照教程添加公钥即可3.将本地项目托管到码云中3.1新建仓库3.2将本地项目上传到Gitee3.2.1检查项目状态3.2.2本地提交项目3.2.3本地项目上传到码云1.什么是gitee?gitee和github的关系是什么?git:一种版本控制系统,是一个命令,是一种工具,有点像cmd(命令行工具)。github: 一个基于git实现在线代码托管的仓库,原创 2020-06-29 15:11:32 · 548 阅读 · 0 评论 -
2.通过vue ui(vue脚手架)快速创建项目步骤
通过vue ui快速创建项目步骤1、打开Vue项目管理器2、创建项目1、点击“创建”,选择存放项目的目录,点击“在此创建新项目”2、设置详情3、进行预设3、选择功能4、进入配置3、项目创建完成1、打开Vue项目管理器win+R,输入cmd,回车打开终端,输入vue ui,回车。默认浏览器会打开8080端口Vue项目管理器。2、创建项目1、点击“创建”,选择存放项目的目录,点击“在此创建新项目”2、设置详情设置项目文件夹名称、包管理器、更多选项和Git等项目初始设置。其中项目文件夹必填。原创 2020-06-29 01:53:06 · 2022 阅读 · 0 评论 -
1.vue项目实战笔记(已完结)
vue项目实战笔记目标目录1.项目概述1.1电商项目基本业务概述1.2电商后台管理系统的功能1.3电商后台管理系统的开发模式(前后端分离)1.4电商后台管理系统的技术选型1.前端项目技术栈2.后端项目技术栈(了解即可)2.项目初始化2.1前端项目初始化步骤目标1、能够基于vue初始化项目2、能够基于vue技术栈进行项目开发3、能够使用vue的第三方组件进行项目开发4、能够说出前后端分离的开发模式目录1、项目概述2、项目初始化3、登录/退出功能4、主页布局5、用户管理模块6、权限管理模原创 2020-06-29 20:56:30 · 1311 阅读 · 0 评论