Vue
文章平均质量分 89
Vue
谭光志
FE/Nodejs/Rust 全栈
Github: https://github.com/woai3c
展开
-
可视化拖拽组件库一些技术要点原理分析(四)
低代码,可视化拖拽系列第四篇原创 2022-08-06 16:42:38 · 715 阅读 · 0 评论 -
Vue 项目一些常见问题的解决方案
有一些问题不限于 Vue,还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢?就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。如果一个页面,有角色越权访问,这时就得做出限制了。一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法。具体细节请看下一节的《动态菜单》。另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限。如果有权限就允许访问,没有权限就拒绝,原创 2021-02-19 09:56:12 · 606 阅读 · 0 评论 -
手把手教你搭建 Vue 服务端渲染项目
建议先阅读官方指南——Vue.js 服务器端渲染指南,再回到本文开始阅读。本文将分成以下两部分:简述 Vue SSR 过程从零开始搭建 SSR 项目好了,下面开始正文。简述 Vue SSR 过程客户端渲染过程访问客户端渲染的网站。服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。客户端通过 HTTP 向服务器请求资源,当必要的资源都加载完毕后,执行 new Vue() 开始实例化并渲染页面。服务端渲染过程原创 2020-11-02 17:00:20 · 1846 阅读 · 1 评论 -
Vue3 模板编译原理
Vue 的编译模块包含 4 个目录:compiler-corecompiler-dom // 浏览器compiler-sfc // 单文件组件compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模块,并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。Vue 的编译分为三个阶段,分别是:parse、transform、codegen。其中 parse 阶段将模板字符串转化为语法抽象树 AST。原创 2020-08-12 15:30:13 · 708 阅读 · 0 评论 -
vue-mergeable-table 动态生成的可合并行列的表格
项目地址可以根据数据动态生成可合并行列的表格。文档数据选项options: { cols: 6, // 要生成的表格列数 rows: 7, // 要生成的表格行数 这个表是 7 * 6 merge: [ // 多个合并规则 { row: 0, // 起始行 col: 0, // 起始列 rowspan: 2, // 占2行,默认为 1 ,为 1 时可不填 cols原创 2020-07-17 16:17:09 · 623 阅读 · 0 评论 -
Vue3 响应式原理
前言学习 Vue3.0 源码必须对以下知识有所了解:proxy reflect iteratormap weakmap set weakset symbol这些知识可以看一下阮一峰老师的《ES6 入门教程》。如果不会 ts,我觉得影响不大,了解一下泛型就可以了。因为我就没用过 TS,但是不影响看代码。阅读源码,建议先过一遍该模块下的 API,了解一下有哪些功能。然后再看一遍相关的单元测试,单元测试一般会把所有的功能细节都测一边。对源码的功能有所了解后,再去阅读源码的细节,效果更好。prox原创 2020-07-11 20:01:35 · 3465 阅读 · 1 评论 -
Vue Cli 3 打包配置--自动忽略 console.log 语句
下载插件npm i -D uglifyjs-webpack-plugin在 vue.config.js 引入使用const UglifyJsPlugin = require('uglifyjs-webpack-plugin')module.exports = { configureWebpack: { plugins: [ new Ugli...原创 2020-04-22 13:26:13 · 781 阅读 · 0 评论 -
Vue 图片上传组件(base64 版):vue-upload-imgs
vue-upload-imgs 上传组件保存的是图片的 base64 码,这是项目地址,欢迎关注。在线 demo预览模式列表模式禁用文档字段类型描述默认值值类型type属性值组件显示模式 0.图片预览 1.图片列表 2.带有上传按钮的图片预览0Numberdisabled属性值禁用组件falseBooleanaccess属性值...原创 2020-04-19 22:40:22 · 1019 阅读 · 0 评论 -
ESlint + Stylelint + VSCode自动格式化代码(2023)
本文用 Vue 项目做示范。利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户),搜索 eslint,点击 Edit in setting.json将以下选项添加到配置.........原创 2019-11-28 17:38:16 · 5859 阅读 · 0 评论 -
element-ui 表格打印
更多文章打印需要用到的组件为 print-js普通表格打印一般的表格打印直接仿照组件提供的例子就可以了。printJS({ printable: id, // DOM id type: 'html', scanStyles: false,})element-ui 表格打印element-ui 的表格,表面上看起来是一个表格,实际上是由两个表格组成的。表头为...原创 2019-10-17 15:21:13 · 3368 阅读 · 0 评论 -
前端下载二进制流文件
更多文章平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用 window.open(URL) 下载,另一种就是后台直接返回文件的二进制内容,然后前端转化一下再下载。由于第一种方式比较简单,在此不再叙述。接下来主要讲解一下第二种方式怎么实现。Blob、ajax(axios)mdn 上是这样介绍 Blob 的:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示...原创 2019-07-29 10:29:16 · 9646 阅读 · 12 评论 -
node-blog:用 node 搭建的个人开源博客
项目地址这个项目是为了学习 node 而建的,从前端到后端一手包办。相对来说,还是有一定难度的,适合有一定编程基础的人进阶学习。如果有问题,欢迎提 issues注意,本项目的前后端代码都是放在一起的,前端代码放在 src 目录,后端代码放在 server 目录。相关文档多个请求下 loading 的展示与关闭Vue 实现前进刷新,后退不刷新的效果Vue 页面权限控制和登陆验证用 ...原创 2019-06-23 19:10:27 · 652 阅读 · 0 评论 -
Vue 轻量级后台管理系统基础模板
vue-admin-templatevue轻量级后台管理系统基础模板在线预览相关依赖vue-routeriviewaxios功能登录页一周七天自动切换不同的壁纸(建议自己配置)标签栏点击标签切换页面刷新当前标签页关闭其他标签/关闭所有标签侧边栏伸展/收缩页面宽度过小自动收缩多级菜单(利用iView组件)用户相关消息通知用户头像基本资料...原创 2018-12-13 17:32:08 · 2060 阅读 · 3 评论 -
Vue动态生成表单组件vue-form-maker
简介Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找个UI组件库 差不多就能写出来如果对项目有兴趣 可以fork或克隆项目 自行研究 有...原创 2018-12-25 10:30:52 · 2424 阅读 · 0 评论 -
vue 项目找不到模块(Module not found)
Module not found: Error: Can't resolve...只要将你写的组件名name和文件名称统一就可以了比如你的组件名为Test 文件名也必须为Test.vue原创 2019-03-01 11:47:23 · 28519 阅读 · 4 评论 -
多个请求下 loading 的展示与关闭
一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:在 App.vue 配置一个全局 loading。 <div class="app"> <keep-alive :include="keepAliveData"> <router-view/> <...原创 2019-06-07 13:51:59 · 8357 阅读 · 1 评论 -
Vue 实现前进刷新,后退不刷新的效果
需求一:在一个列表页中,第一次进入的时候,请求获取数据。点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。解决方案在 App.vue设置: <keep-alive include="list"> <router-view/> ...原创 2019-06-07 14:22:43 · 163 阅读 · 0 评论 -
Vue 改变数据,页面不刷新的问题
更多文章最近在用 element-ui 开发一个网站,使用 table 组件时,发现修改完数据,有时候会延迟一两秒,页面才会发生变化。看了一下代码,发现修改数据的代码是这样的// popupData是修改的数据,修改完后,赋值给对应的表格数据this.tableData[this.currentRow] = this.popupData注意事项(以下内容摘自官方文档)由于 Java...原创 2019-06-13 16:54:22 · 3615 阅读 · 0 评论 -
开发一个简单的 Vue 弹窗组件
更多文章一个弹窗组件通常包含两个部分,分别是遮罩层和内容层。遮罩层是背景层,一般是半透明或不透明的黑色。内容层是放我们要展示的内容的容器。<template> <div class="modal-bg" v-show="show"> <div class="modal-container"> <div...原创 2019-06-14 14:47:23 · 708 阅读 · 0 评论 -
Vue 动态添加路由及生成菜单
更多文章写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单。为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的。在网上找了好多资料,终于想到了解决办法。动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由。先看一下官方介绍:router.addRoutesrouter.addRoutes(routes: Arr...原创 2019-06-19 17:57:36 · 11541 阅读 · 6 评论 -
Vue 页面权限控制和登陆验证
更多文章页面权限控制页面权限控制是什么意思呢?就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。如果一个页面,有角色越权访问,这时就得做出限制了。Vue 动态添加路由及生成菜单这是我写过的一篇文章,通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法。另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限...原创 2019-06-20 10:37:39 · 184 阅读 · 0 评论 -
实现一个迷你版的vue
项目地址实现一个带响应数据的迷你vueVue实例化过程实例化之前Vue会先给Vue挂载一系列的原型方法以及静态方法、属性实例化时会对选项参数进行规范化、合并等操作通过自定义Render方法、template、el等生成Render函数数据进行绑定 通过Watcher监听数据的变化数据发生变化时,render函数会执行生成VNode对象通过patch方法,对比新旧VN...原创 2018-08-29 14:23:21 · 1321 阅读 · 0 评论