Errol's Blog

1、先打开cmd全局命令窗口，输入 npm install -g increase-memory-limit。2、进入项目文件夹运行 increase-memory-limit (内存扩展完成)运行 npm run dev可以正常运行，运行 npm run build 报错。项目是 vite+vue+ts。

对于菜单权限我们需要解决以下问题：1、不同的账号登录，有不同的菜单2、通过输入url地址来显示页面，所以应该根据权限动态注册路由3、对于菜单数据，在不同页面之间的数据通信。

【Vue2+Element ui通用后台】登录和退出

路由守卫和退出登录

用户列表和用户编辑

【Vue2+Element ui通用后台】面包屑和tag

Vue中数组常用方法的使用和示例

Echarts使用

mock.js

【Vue2+Element ui通用后台】整体布局和数据展示

【Vue2+Element ui通用后台】头部完成并且完成和左侧菜单的联动

【Vue2+Element ui通用后台】左侧菜单实现

Vue2+Element ui通用后台项目搭建和vue-router使用

角色管理完成

用户列表功能完成

商品列表完成

首页完成

登录页面完成

Vue3+ts后台管理 项目搭建

文章目录全局API的转移其他改变全局API的转移Vue2.x有许多全局API和配置，例如：注册全局组件，注册全局指令等//注册全局组件Vue.component('myButton',{ data:()=>({ count:0 }), template:'<button @click="count++'>Clicked{{count}}</button>'})//注册全局指令Vue.directive('focus',{

文章目录fragment组件teleport组件Suspence组件fragment组件在Vue2中：组件必须有一个根标签在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中好处：减少标签层级，减小内存占用teleport组件Teleport 是一种能够将我们的组件 html 结构移动到指定位置的技术<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div cl

文章目录shallowReactive 和 shallowRefreadonly 与 shallowReadonlytoRaw 和 markRawCustomRefprovide 和 injectshallowReactive 和 shallowRef作用shallowReactive：只处理对象最外层属性的响应式（浅响应式)shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理什么时候使用。如果有一个对象数据，结构比较深，但变化时只是外层属性变化=>shallowRea

toRef作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。语法：const nane = toRef(person, ' name ')应用：要将响应式对象中的某个属性单独提供给外部使用时扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象语法：toRefs(person)在 Vue3的响应式 中，我们写了一段 js 来模拟 vue3 的响应式<script> //源数据 let person =

文章目录定义使用定义什么是hook?。本质是一个函数，把 setup 函数中使用的 Composition API （组合API）进行了封装。类似于 vue2.x 中的 mixin自定义 hook 的优势。复用代码，让 setup 中的逻辑更清楚易懂使用首先我们做一个功能，鼠标点击屏幕，获取坐标<template> <h2>当前鼠标的坐标是：x:{{ point.x }}，y:{{ point.y }}</h2></template>

文章目录computedwatchcomputed<template> 姓：<input v-model="person.firstName"><br/><br/> 名：<input v-model="person.lastName"><br/><br/> <span>全名：{{person.fullname}}</span><br/><br/> &lt

回顾 vue2.x 的响应式实现原理：。对象类型：通过object.defineProperty()对属性的读取、修改进行拦截（数据劫持)。数组类型：通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)Object.defineProperty(data,'count ",{ get(){}, set(){}})存在问题：。新增属性、删除属性，界面不会更新。直接通过下标修改数组，界面不会自动更新但是 vue2 给了解决方法，我们看以下代码：<template&

文章目录setupref 函数reactive 函数回顾 vue2.x 的响应式vue3的响应式reactive对比refsetup1、理解：vue3.0 中一个新的配置项，值为一个函数2、setup 是所有 Composition API(组合API) “表演的舞台”3、组件中所用到的：数据、方法等等，均要配置在setup中4、setup函数的两种返回值:----①、若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用(重点关注! )----②、若返回一个渲染函数：则可以自定义渲染内

文章目录创建vue3项目使用vue cli创建使用vite创建分析目录结构安装开发者工具创建vue3项目使用vue cli创建使用vue cli创建vue3项目官方文档##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version或vue -V##安装或者升级你的@vue/clinpm install -g @vue/cli##创建vue create vue_test##启动cd vue_testnpm run serve查看版本，创建 v

路由器的两种工作模式1.对于一个url来说，什么是hash值?——#及其后面的内容就是hash值。2. hash值不会包含在HTTP请求中，即: hash值不会带给服务器。3. hash模式:1.地址中永远带着#号，不美观。⒉.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。3.兼容性较好。4. history模式:1.地址干净，美观。2.兼容性和hash模式相比略差。3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。......

文章目录路由前置-路由守卫全局后置-路由守卫独享路由守卫组件内路由守卫1.路由作用：对路由进行权限控制2.路由分类：全局守卫、独享守卫、组件内守卫路由前置-路由守卫现在的需求是访问 News 和 Message 时验证 localstorage，如果 school 的值是 三里屯小学 才能正常访问，否则提示没有权限：现在增加 localstorage：现在就能正常访问了修改 index.js ，给每个路由增加 name 属性，然后增加前置路由守卫......//创建一个路由器con

文章目录router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子router- link的replace属性1.作用：控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push3.如何开启replace模式<router-link replace .......>News</router-link>编程式路由导航作用

Vue路由参数传递

文章目录路由的理解路由的基本使用一些注意点路由的理解生活中的路由：vue-router的理解：vue 的一个插件库，专门用来实现SPA应用(single page web application)对SPA应用的理解：1.单页Web应用(single page web application，SPA)2.整个应用只有一个完整的页面3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新4.数据需要通过ajax请求获取什么是路由?1.—个路由就是一组映射关系 (key - value

文章目录Count.vue 分组修改Person.vue 分组修改继续优化，分成文件引入actions联系后端api练习模块化+命名空间总结没有看过上一篇的同学可以查看： Vue Vuex学习(vuex配置项、多组件数据共享案例)Count.vue 分组修改index.js 分组先用起来我们观察 index.js，mutations 中有 JIA、JIAN、ADD_PERSON，也就是既有计算模块 Count 的方法，也有人员模块 Person 的方法。如果以后模块多了都写在这里，不便于管理。其他的

Vue Vuex学习(vuex配置项、多组件数据共享案例)

文章目录理解Vuex求和案例-纯vue版理解VuexVuex介绍求和案例-纯vue版新建 Count.vue 组件，并在 App.vue 中注册引用<template> <div> <Count/> </div></template><script>import Count from "@/components/Count";export default { name: 'App',

Vue 插槽的使用

Vue github用户搜索案例

文章目录方式一方式二vue 脚手架配置代理总结方式一首先安装 axios：npm i axios修改 App.vue<template> <div> <button @click="getBookInfo">获取书籍信息</button> </div></template><script>import axios from "axios"export default { name: 'A

文章目录动画效果过渡效果单个元素多个元素Animate.css总结todolist 增加动画效果动画效果新建 Test.vue<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h1 v-show="isShow">你好 Vue</h1> </transition&