现在的很多应用都流行SPA应用(singe page application) 。
传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候因受到网络、性能的影响,浏览器会出现不定时间的空白界面,用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后,动态的进行不同模板内容的无刷新切换,用户体验好。而在vue2.0版本后,vue官方推出vue-rou
前言之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做;看过一个不错的后台配置模板(vue-element-admin),页面也挺美的,但是还是碍于不想看太多关于这个模板的配置说明,于是又拉出来之前我搭建的简易版的模板,决定重构下,使用自己搭建的后台系统模板
Vue2和ElementUI编写的无限级菜单路由
原创
2023-04-24 17:55:38
177阅读
Vue中路由详解什么是路由?基本使用几个注意点多级路由(嵌套路由)路由的query参数命名路由路由的params参数跳转+传参 总结路由的props的配置路由懒加载```<router-link>```的replace属性编程式路由导航`$router`和`$route`的区别**1、route对象****2、router对象**缓存路由组件两个新的生命周期钩子路由守卫路由器的三种种
目录一、实现数据的分页效果二、实现用户状态的修改三、实现搜索功能四、实现添加用户功能4.1 点击按钮弹出添加用户的对话框4.2在对话框中渲染一个添加用户的表单4.3 实现自定义规则校验输入内容4.4 实现添加表单的重置功能4.5 添加用户前的预校验功能4.6 发起请求添加一个新用户五、用户修改的操作 5.1根据ID查询用户信息 5.2绘制修改用户的表单5.3&nb
转载
2024-03-19 19:18:24
729阅读
前言:管理系统默认只存在登录页面这一个路由。import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/Lo
转载
2024-03-30 17:14:37
834阅读
文章目录问题描述解决思路将数组转为JSON对象将上面的方法封装,方便以后重复使用根据JSON对象递归Vue对象 Vue2.x 组件递归(tree展示)问题描述最近要做一个通信面板,后台返回一个数组,标明了ID和PID的字段根据后台返回的数据需要转为一个机构用户信息树解决思路将后台返回的数组转换为一个上下层级关系的JSON对象根据JSON对象递归生成一个Tree组件将数组转为JSON对象<!
Vue+ElementUI前端开发环境搭建一 VUE简介1.1 渐进式1.2 MVVM模型1.3 响应式二 VUE环境搭建2.1 安装配置node.js2.2 配置镜像€提升速度2.3 全局安装vue2.4 安装脚手架vue-cli2.5 配置vue环境变量三 新建项目3.1 初始化3.2 初始化项目安装依赖3.3 启动项目四 开发环境4.1 开发工具4.2 目录结构4.3 插件导入五 安装问题
转载
2024-09-30 13:47:36
266阅读
今天我们要做的就是基于websocket实时人工客服,先来了解一下机制WebSocket 机制WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:WebSocket 是一种双向通信协议,在建立连接后,WebSocket 服务
一种理想方案首先,无论换算方不方便,我都不想换算,我也不想去操心什么转换系数其次,有些属性或者类选择器我不想进行转换css代码要足够简洁,我只希望看到一种单位,那就是px第一种:lib-flexible+postcss-pxtorem第一种方案是lib-flexible+postcss-pxtorem,在相当长一段时间里,这两个插件搭配都是解决移动端布局的神器,lib-flexible是阿里手淘系
基于Vue+ElementUI+vod-js-sdk-v6,完成腾讯云点播视频上传功能最近做的一个项目,需要用到腾讯云点播的视频上传!!写一个尽可能详细的博客供各位参考,欢迎指正; ok,下面进入正题。 首先是需要用到的依赖:ElementUI、vod-js-sdk-v6、axiosnpm i vod-js-sdk-v6
npm i axiosimport vue from 'vue'
impor
按需引入 官方文档介绍 借助 babel-plugin
原创
2022-08-27 01:55:15
892阅读
在获取不到后台数据的时候我们也可以把页面搞起来生成随机数据1. 首先应该先建立一个json文件,把模拟数据写进去2. 安装3. 建立js文件,使用mockjs提供mock数据接口4.在main文件在加载js文件拦截ajax请求1. 不使用本地代理2.ajax请求后会影响store首先增加新的state变量,例如商家列表再者增加mutations最后增加actions并进行异步请求 生成随机数据1
转载
2024-09-12 22:31:22
249阅读
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、创建项目二、原理分析三、创建入口文件集体注册组件四、批量注册五、组件打包总结 前言vue作为当前比较热门的前端框架之一,因此常见的基于vue开发的UI框架有很多,比如ElementUI、Ant Design Vue等。那么我们怎么去开发一个组件库并且能够打包复用呢?见正文。一、创建项目使用vue-cli创建一个新项目
前言因为项目采用UI组件element-ui,需要部署后(打包后)设置主题,在网上找了一遍,如下几种方法。1/使用全局样式覆盖(工作量大)2/自定义element-ui配色,element-ui提供了一个配置页面 和 配色工具,可以本地生成固定的几套主题色,以便来实现主题切换(编译后无法修改)3/ 通过后端返回css文件,前端配合使用localStorage,储存主题对应的参数
转载
2024-06-09 08:32:34
667阅读
router.push({ name: 'user', params: { userId: 123 }})name: 路由名 ...
转载
2021-08-13 11:39:00
1519阅读
2评论
路由是VUE的一大特点,初期开发的时候自己没理解好导致刷新跳转到首页还有路由之间传值复杂化的问题。现在就分享一下我的部分体会。一、嵌套路由 路由嵌套应该是基础知识,坑点有: 1.按照写好的菜单跳转只push 当前组件而不是按照路由文件顺序加载(比如我要加载home.vue 直接push该path 结果不行,在页面重新引入home.vue 发现可以了,就以为自己写
## Vue2 路由守卫与 Axios 的实现
当你在使用 Vue2 进行 web 开发时,常常需要结合 `Axios` 和 Vue Router 来管理路由守卫。这篇文章将带你了解该如何实现这一功能。首先,我们来看一下这个过程的流程。
### 流程步骤表
| 步骤 | 描述 |
|------|-----------------------
前言最近接收了一个陈年的vue2项目,经历了多个前辈高人,目前可以说是一座伟岸的shit山。如果改改bug之类的雕花需求还能接受,但是在交付后了来了一个需要腾空10米然后空中转体720平稳落地之后进行雕花的高难度需求。对tabs页面进行缓存需要对现有项目进行页面缓存,点击面包屑顶部的tabs标签<如下图>切换页面时保持住页面缓存,使用菜单或按钮跳转切换页面则需要进行更新(清除缓存)难点
转载
2024-07-15 11:06:13
598阅读
1、新建一个文件夹euw,切换到该路径下cd F:\WebstormProjects\euw2、安装vue-clinpm install vue-cli3、查看vue的版本vue -V4、下载项目vue init...
转载
2018-10-11 15:27:00
168阅读
2评论