![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue add React
文章平均质量分 77
Vue 和 React文章
lucky.麒麟
一样魔前千古间,独看桑蝶化人间。一叹求魔千万年,几多轮回古葬边。
展开
-
用React给XXL-JOB开发一个新皮肤(四):实现用户管理模块
此篇文章介绍 xxl-job的用户管理模块的开发工程,重点介绍了下 antd 的表格组件、模态框组件和表单组件,快速实现一个 CRUD 模块。原创 2024-01-30 23:11:02 · 1154 阅读 · 2 评论 -
用React给XXL-JOB开发一个新皮肤(三):实现登录页和Layout骨架
此篇文章介绍 xxl-job管理接口的兼容实现,接着将实现登录页面并对接登录接口,最后将搭建管理页面的Layout骨架,完成退出登录和修改密码。原创 2024-01-12 17:15:42 · 1138 阅读 · 0 评论 -
用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化
此篇文章我们会先介绍下当前项目的目录规划,接着对vite配置以便我们后续的开发,最后会根据 xxl-job 的页面创建我们项目的页面并配置路由信息。原创 2024-01-10 12:14:23 · 1256 阅读 · 0 评论 -
用React给XXL-JOB开发一个新皮肤(一):环境搭建和项目初始化
本文介绍 xxl-job 本来开发环境配置,使用vite初始化React 项目,添加项目必要的依赖,清理不需要代码,搭建React 前端项目。原创 2024-01-09 17:45:30 · 1188 阅读 · 0 评论 -
React整合redux并开启持久化
React整合redux并开启持久化一、添加相关依赖yarn add redux # 增加reduxyarn add react-reduxyarn add @babel/plugin-proposal-decorators # 开启注解的支持yarn add babel-plugin-transform-decorators-legacyyarn add redux-persist原创 2021-06-20 17:11:44 · 264 阅读 · 0 评论 -
React Hooks 极简使用
React Hooks 极简使用一. userState作用 :函数组件添加状态注意 :初始化以及更新state,用来声明状态变量参数 :接收一个参数作为初始值返回 :返回一个数组,第一个值为状态,第二个为改变状态的函数例子 :import React, {useState} from 'react';export default function StateFunction() { // 接收一个参数作为初始值 const [name, setName] = useSt原创 2021-07-27 12:49:59 · 185 阅读 · 0 评论 -
Vue中Vuex的使用
VUEX的使用安装vuexnpm install vuex --save创建vue的store文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { city: '北京' }})在main.js中添加// ---...原创 2019-01-30 17:54:32 · 283 阅读 · 0 评论 -
日常总结:Vue写一个炫酷的时钟插件
效果图代码奉上:<template> <div class="clock"> <div class="flip"> <div class="digital front" :data-number="nextTimes[0]"></div> <div class="digital back" :data-number="nowTimes[0]"></div原创 2020-07-21 14:55:13 · 2976 阅读 · 3 评论 -
Vue使用汇总之el-table实现鼠标拖动表格滚动
有时候我们需要在Element-UI中实现这样的一个效果,鼠标水平拖动,表格也水平滚动,这样可以隐去滚动条!一、元素增加三个事件<template> <el-table @mousedown.native="mouseDownHandler" @mouseup.native="mouseUpHandler" @mousemove.native="mouseMoveHandler" ref=原创 2021-02-25 17:26:43 · 2393 阅读 · 1 评论 -
Vue刷新vuex数据丢失
安装依赖npm install vuex-persistedstate使用import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({ state: { /** 用户信息 */ userInfo: {} }, getters: { }, mutati原创 2020-10-29 16:29:35 · 114 阅读 · 0 评论 -
日常总结:Vue实现一个炫酷的代码瀑布流背景
先看一下效果:代码奉上:<template> <canvas id="canvas" /></template><script> export default { name: "BackCanvas", props: { height: { type: Number, default: 500原创 2020-07-15 16:57:53 · 1836 阅读 · 3 评论 -
Vue3项目整合Electron
Vue3项目整合Electron第一步安装:VUE3安装vue3脚手架npm install -g @vue/cli安装 yarn,并设置淘宝源npm install -g cnpm --registry=https://registry.npm.taobao.org设置ELECTRON_MIRROR,加速electron的预编译npm config set ELECTRON_M...原创 2019-08-31 15:15:14 · 6833 阅读 · 2 评论 -
vuex刷新数据丢失方法
vuex问题: 当刷新页面的时候vuex仓库中的数据丢失解决方法1、使用localStorage2、使用sessionStorage个人建议对于localStorage的数据是永久保存(自己不去删除的时候),所以个人觉得不是很安全,所以使用sessionStorage比较合适。具体使用mutations: { // 菜单信息 getMenuItems (stat...原创 2019-04-02 15:35:43 · 313 阅读 · 0 评论 -
Vue结合Element-UI实现单元格编辑、删除等操作
Element-ui的表格链接地址:http://element-cn.eleme.io/#/zh-CN/component/table操作一: 删除在 组件中添加 @selection-change=“handleSelectionChange” 事件,并在el-table-column组件中添加类型为selection<div> <el-button ...原创 2019-03-20 15:04:00 · 9738 阅读 · 9 评论 -
vue自定义指令
局部指令1. 定义指令export default { name: 'StandardLevel', directives: { focus: { // 自定义聚焦指令 inserted: function (el) { el.getElementsByTagName('input')[0].focus() } } ...原创 2019-03-20 10:09:18 · 102 阅读 · 0 评论 -
vuex项目使用方法
安装vuexnpm install vuex --save-dev // 或者yarn add vuex在main.js中添加store// 引入import store from './store'// 使用new Vue({ el: '#app', router, store: store, components: { App }, template: '...原创 2019-03-20 09:55:13 · 255 阅读 · 0 评论 -
Vue之自定义UI库
1. 什么UI组件库个人认为,UI组件库是一个将一些常用的dom分装为一个可以多种样式切换、可扩展、使用方便的一套工具。现在比较好的如: Vuetify、Element;但是也存在我们一些在我们自己项目中需要实现自己的特定需求。2. vue的组件前端组件化是现在前端框架中一个非常重要的思想元素,将页面内容进行拆分之后,可独立维护,可复用性大大提高。哪个地方出问题,直接去修改的对应的组件即可...原创 2019-03-11 12:04:06 · 1078 阅读 · 0 评论 -
Springboot+Vue在开发和部署相关问题解决
Springboot端的配置添加一个跨域请求的配置类import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.context.annotation.Bean;impo...原创 2018-10-05 21:30:59 · 15329 阅读 · 1 评论