webpack学习笔记(1)-webpack的介绍及基本使用
webpack学习笔记(1)-webpack的介绍及基本使用什么是webpack?
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。chunk 代码块，bundle静态资源。
为什么需要webpack?
开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。
所以我们需要打包工具帮我们做完这些事。
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。
总结：
Webpack是一个前端打包工具，前端代码为什么要打包呢？因为单页应用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器 ...
Vue2后台管理系统实现难点(3)
Mock的后端数据模拟:(首页的数据)
mockData中的home.js
Mock用户列表数据的生成以及增删改查：
用户列表的获取以及搜索功能的实现(重点) => getUserList()和param2Obj()
用户的添加功能的实现 => createUser()
用户的编辑功能的实现 => updateUser()
用户的删除功能的实现 => deleteUser()
这里重点解释一下用户列表获取以及搜索功能之间的切换判断:
看到源码我们就知道了,用户列表的获取和搜索功能都是通过一个函数来返回mock模拟的数据的,这个函数就是getUserList(),那究竟这个过程是怎样实现的呢?
我们在上一篇博客介绍到,用户的获取和搜索都是绑定的一个函数,那就是getList(name = ''),这个函数我们可以看到,里面接收一个name属性,这个属性就是我们在搜索框输入的内容,通过v-model的方式将我们在搜索框里输入的内容双向的绑定到getList()当中,随后通过这个函数变成params拼 ...
Vue2后台管理系统实现难点(2)
Vue2后台管理系统实现难点(2)：ElementUi组件库的编辑新增框Form组件的封装和table组件的封装:1. form表单组件的封装:
首先通过elementUi组件库进行页面结构的搭建,(因为组件的复用(编辑弹出框和搜索框),所以封装一个commonForm组件), 其中值得我们注意的就是里面的model属性,这与下面table表格中的prop属性是差不多的,都是用于表单验证,指定表单的使用数据的!
commonForm组件(子组件)的封装代码如下:<template> <!-- 弹出框表单组件(点击添加,修改弹出的弹框) --> <el-form ref="form" label-width="100px" :model="form" :inline="inline"> <!-- 遍历标题生成对应个数的表单 --> <el-form-item v-for="item in formLabel" : ...
Vue2后台管理系统实现难点(1)
Vue2后台管理系统实现难点(1)：
ElementUi组件库官网
1.mock中的token登录实现：
首先在mock中的登录js文件中设置一个方法(getMenu)用于校验登录信息,该方法能接收一个参数(config),一般是登陆组件那边传过来的form表单,然后调用getMenu方法,将接收过来的from表单解析成json格式的对象进行校验.校验成功返回需要的数据(menu菜单等…..)
getMenu方法
getMenu: config => { console.log(config); const { username, password } = JSON.parse(config.body) console.log(JSON.parse(config.body)) // 先判断用户是否存在 // 判断账号和密码是否对应 // 超级管理员 if (username === 'admin' && password === 'admin' ...
Vue3学习笔记(12)-Vue3中的其他改变
1.全局API的转移
Vue 2.x 有许多全局 API 和配置。
例如：注册全局组件、注册全局指令等。
//注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>'})//注册全局指令Vue.directive('focus', { inserted: el => el.focus()}
Vue3.0中对这些API做出了调整：
将全局的API，即：Vue.xxx调整到应用实例（app）上
2.x 全局 API（Vue）
3.x 实例 API (app)
Vue.config.xxxx
app.config.xxxx
Vue.c ...
Vue3学习笔记(11)-Vue3中的那些新增的内置组件
Vue3中的那些新增的内置组件1.Fragment(相当于Vue2中的根标签)
在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用
2.Teleport(传送组件)
什么是Teleport(远程传送的意思)？—— Teleport 是Vue3中的一个内置组件,是一种能够将我们的组件html结构移动到指定位置(DOM节点)的技术。
使用方法: 使用Teleport标签包裹住想要传送的html标签元素,随后再在Teleport标签中的to属性当中指向传送位置即可,这里的传送位置可以是css选择器,可以是标签元素,不过Vue团队建议我们把to指向body标签。
好处:我们在实际开发当中可能会遇到弹窗提示,但是项目的html层级是一环扣一环的,你想要给里面的层级设定弹窗居中,那么以后你往上的任一层级发生改变都会对你的居中有影响,但是使用teleport组件,可以将弹窗结构传送到body标签当中,这样你就只有一个父元素,这时做居中就显得更加的加单方便,也不用担心层级的问题了!
...
Vue3学习笔记(10)-相较于配置式API,组合式API的优势
Composition API 的优势1.Options API (配置式Api)存在的问题
使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。
2.Composition API (组合式API)的优势
我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。
Vue3学习笔记(9)-Vue3中的其他组合式api(Composition API)
Vue3中的其他组合式api(Composition API)1.shallowReactive 与 shallowRef
shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
什么时候使用?
如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。
代码展示:<template> <h4>当前的x.y值是：{{x.y}}</h4> <h4>当前的a值是：{{a}}</h4> <button @click="a++">点我a++</button> <button @c ...
Vue3学习笔记(8)-Vue3中的toRef和toRefs
1.toRef和toRefs
toRef 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（ref 函数也可以转换，但值非关联）。
语法：const name = toRef(target,'propsName')
语法解析：target为目标响应对象，propsName为该响应对象当中的属性
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(target)
但是toRefs有一个缺点：他只能将第一层的属性解析成响应式
在setup()中可以用return { ...toRefs(object)}的方式，将整个响应式对象object的所有属性(第一层属性)提供给外部使用。
代码展示：
Demo组件当中:<template> <h4>{{person}}</h4> <h2>姓名：{{nam ...
Vue3学习笔记(7)-Vue3中的自定义hook函数
Vue3中的自定义hook函数使用场景
在Vue3中，使用什么API就引入，这个就是组合式 API。
然而，有时引入很多的API就不利于代码的阅读。所以，在 Vue3 中新增了 Hook，可以通过自定义hook函数来存放组合式API的东西，在需要的时候再进行引用。
概念
hook ：其本质是一个函数，把 setup 函数中使用的 Composition API 放到一个文件中进行了封装，然后在需要用到的地方，进行引入，类似于 vue2.x 中的 mixin。
自定义hook的优势
自定义 hook 能够复用代码，让setup中的逻辑更清楚易懂。
使用流程:
首先在脚手架的src文件夹下创建一个Hooks文件夹用于存放我们自定义的hook组合api方法
随后在创建一个js文件用来存放自定义hook函数
代码展示:
usePoint.js// 组合api Hook函数的编写// 调用使用到的组合api生命周期钩子函数import {reactive,onMounted,onBeforeUnmount} from 'vue'expor ...
