- 博客(47)
- 收藏
- 关注
RSS订阅原创 babel 工作原理
Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程，能够将源代码转换为目标代码。Babel所有的包 https://babeljs.io/docs/babel-traverse。还有一些其他的语言的引入，比如 babel 支持 jsx 语法等等。查看AST https://astexplorer.net/官网 https://babeljs.io/
2024-09-09 10:16:56
377
原创 nuxt3 配置
到此， 写在 base.scss 的样式就生效了， 但是我们经常会使用scss 定义变量， 上面的引入方式就不能使用了。1、项目根目录下创建 pages/index.vue 和 pages/about.vue 页面。2、在项目的根目录项创建 assets/css/base.scss， assets目录是固定写法。pages 目录下面先创建 user.vue 组件，充当 user 父组件， 里面必须有。组件，为 user 默认子路由，还可以继续创建其他的组件，都是渲染在。user 目录下面创建的。
2024-09-05 17:02:14
500
原创 ts语法、json数据转成 ts 数据类型、 nvm的使用以及github访问速度、nrm切换npm版本
3、访问链接 https://github.com/coreybutler/nvm-windows/releases 下载nvm.exe包，点击下一步安装即可。1、打开链接 https://gitlab.com/ineo6/hosts/-/raw/master/next-hosts。window + R 打开cmd 输入drivers 找到etc/hosts文件。2、找到hosts文件，将打开的链接的内容复制进去。react 输入框一些其它的事件对象。4、nvm -v 查看nvm版本号。
2024-08-20 09:02:30
268
原创 flip动画
flip动画在做动画的时候，一般调用 dom.animate 这个API的时候，用到的动画和css不能同时出现，例如 animate里面调用的时候要是用到 tranform：translate ，css中尽量不要写，否则可能动画会出现问题flip做点击图片放大预览的时候，一定要弄清楚哪个元素为初始状态（first），哪个元素是结束状态（last），invert翻转完之后给哪个元素添加动画，就给哪个元素上调用 animate ，同时 调用缩放动画的时候别忘记 设置 transform-origin
2024-08-07 16:26:52
603
原创 vscode格式化代码、链接服务器客户端 mobaxterm 工具、echarts社区官网、vue-devtools、猴子音悦免费音乐素材、页面平滑滚动动画和滚动到指定页面位置
vscode编辑器上安装 Prettier - Code formatter、 ESLint 插件。在vue项目的根目录下创建 .editorconfig 文件。
2024-05-31 11:23:47
261
原创 web前端面试题
①同步和异步任务进入不同的场所，同步进入主线程，异步进入事件列表并注册函数②当指定的事情完成时，事件列表会将这个函数移入Event Queue③主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，放入主线程执行.④上述过程会不断重复，也就是我们所说的事件循环。
2024-05-20 16:07:01
1321
原创 flutter项目初始化
详细其它的样式修改可查看 ： https://pub-web.flutter-io.cn/packages/flutter_easyloading。注意：使用 flutter 的时候一定要把数据放在父组件中（主要是指Dio数据请求），往子组件传展示。1、 安装 flutter_easyloading: ^3.0.5。3、创建Api类，index.dart。2、在 MaterialApp 配置。3、入口函数加上两句话，不然报错。1、创建 store 仓库。
2024-01-03 15:08:01
1108
原创 vite中配置 https 安全超文本网络协议
https 的配置是相对安全的，但是需要购买证书，它是 SSL/TLS + HTTP 的安全超文本网络协议此版本配置的是在 vite 开发服务器上临时配置的 https 协议， 生产环境需要购买证书， 在nginx 中配置。
2023-10-18 14:39:54
2532
1
原创 js-cookie使用 js深度克隆（判断引用类型是数组还是对象的方法）
东八区：往前推了 8 个小时，上图显示的时间加上 8 个小时和当前的时间做对比就可以得到 cookie 的过期时间多长。但是咱们有时候需要做7天免登录的需求时，选择 cookie 作为前端的本地存储是在合适不过的了。前端的本地存储分为 localstorage、sesstionstorage、cookie。注意：cookie 和 local、sesion 一样，存字符串。
2023-09-20 16:22:58
211
原创 微信小程序项目配置（原生）
读 data 和 properties 中的值: this.data.xxx 和 this.properties.xxx。注意：小程序中的 data 和 properties 都是可读可写的，和vue不一样，不遵循单项数据流，在项目根目录中创建 behaviors 目录，目录中创建 my-behaviors.js 文件。在utils工具包中创建 httpInstance 目录，里面创建 index.js 文件。在根目录中创建 eNum 目录，里面创建 index.js 文件。
2023-09-15 16:58:59
650
原创 nuxt2项目配置
vue是大家比较熟悉的一款前端框架，但是vue有一个缺点就是单页面应用，不利于seo，所以这篇文章主要是vue的衍生版nuxt，用的是vue的语法，做的是ssr（服务端渲染）
2023-09-01 17:07:16
1259
1
原创 vue2 + vue3配置环境变量 + react配置环境变量
环境变量就是用来区分生产环境还是开发环境，例如访问的后台接口域名，前端路由的根路径等在生产环境和开发环境可能都存在差异，所以就有了配置环境变量，如下列举了vue2、vue3环境变量的配置方法，两者是存在差异的。
2023-08-31 10:46:04
216
原创 巧妙的利用css中的margin进行页面折行布局法
*下面的两行代码是去掉最左面的margin-left和最右面的margin-right的距离 注意去掉下面的两行代码之后上面的calc里面的除以 6 就得需要变成除以 8 了 *//* 利用margin进行页面折行布局， calc里面的计算方式是： 100%减去（一行放几个元素就是几个元素的宽度和）然后除以（放几个宽度的margin距离） *//*calc里面的一行展示3个元素，3个元素就是6个margin， 所以除以6*/想要实现如下的页面布局，利用 margin可以轻松的实现。
2023-07-10 15:37:45
144
原创 pinia的使用
3、模块化存储，创建 store/user.js 文件。2、创建store/index.js文件。1、下载依赖 和 持久化存储。4、pinia的使用。
2023-01-05 10:00:29
257
原创 vue3中 vue-router4的使用、vue3中的计算属性和监听属性
3、main.js文件中引入router/index.js文件。2、创建router/index.js文件。1、下载vue-router依赖。
2023-01-03 14:25:29
238
原创 vue3中父子组件的通讯、异步组件的加载、mixin混入、vue3定义全局变量、vue2中的defer延迟装载
总结：父组件异步加载组件的代码。新建mixin.js文件。4、展示组件的地方加入。2、安装好的依赖引入。
2023-01-03 11:27:37
781
1
原创 css响应式局部
一个页面不只有自适应布局，同时还需要响应式布局，响应式布局就是在不同的设备终端上显示的样式进行重新的布局，比如屏幕比较大的话一行出现5块元素布局， 小点就变成了4块。对于设置固定宽度的容器，大于设置的固定宽度的话会出现大量的空白，对于小于设定宽度的情况下会出现横向的滚动轴。对于移动端设置标签的时候加上srcset加载不同的图片即可。下面就按照5中情况对响应式做出详解。
2022-09-09 17:07:10
156
原创 react-redux以及redux状态管理工具详解
不管是同步改状态还是异步改状态，只要dispatch就会发布action动作到store对象中，store交给reducer来处理修改响应的状态，从而达到了解耦的效果。redux是原生js实现的，和react没有直接的关系，使用起来相对react-redux稍微麻烦点，需要使用人员自己动手进行消息订阅和取消订阅。4、在入口文件index.js中引入provider，并包裹在App根组件外，其中的store就是创建的store对象。7、使用：组件中存值（异步），和同步使用是一样的。2、组件中存值（同步）
2022-08-24 15:18:13
306
原创 vue项目seo方法
SOE：搜索引擎优化最基本的条件：解决方案一： 预渲染在 vue.config.js 的配置文件中配置（打包成多页面 prerender-spa-plugin-next ）要是想动态的改变title的话， 下载 vue-meta-info 插件预渲染的缺点：如果有很多详情页需要seo就不适合了， 动态改变title，描述，关键词也是无效的...
2022-07-12 14:23:44
1059
原创 scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别
scrollHeight会随着子元素的高度变化而变化，即使自身固定高度出现滚动轴，包括padding和子元素撑大的部分scrollTop指的是元素的滚动距离， 可读可写的一个属性
2022-06-02 10:01:36
531
原创 vuex详解
vuex的详细使用说明1、安装npm i --save-dev vuex2、实例化vuex创建store/index.js文件， 在mian.js中将实例注入到vue实例中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { }, getters: { }, mutations: {
2022-05-26 11:40:34
92
原创 vue子组件修改props传进来的值、回调函数
vue修改props里面的值1、传统方法，emit触发父组件修改父组件里面的值，间接的修改子组件的值父组件<Child :msg="msg" @handle="handle"></Child>methods: { data() { return{ msg: '这是一段原始数据' } }, handle(val) { this.msg = "修改之后的值，单向流， 子组件也跟着改变";
2022-05-19 10:40:51
6170
原创 文件的下载功能，借助于file-saver库
文件下载功能，借助于file-saver下载依赖npm i file-saver -D在utils目录中创建exportFile js文件import FileSaver from "file-saver";export default class fileSave { static getFile(res, name) { let blob = new Blob([res], { // type: "application/vnd.ms-exce
2022-05-17 15:40:25
688
原创 vue权限控制-- 路由鉴权，菜单动态渲染，自定义指令渲染按钮，递归处理数据
main.js中的路由守卫if(!// console.log("不需要登录")next()}else{// console.log("需要登录");next();store.state.permissionList) { // 登录过了，没有权限列表， 请求获取权限列表next({})})}else{console.log("登录过， 已经有权限列表了")if(to.path!next();}else{})
2022-05-17 15:10:45
1093
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人