- 博客(39)
- 收藏
- 关注
RSS订阅原创 vite+vue3+路由配置
使用vite创建vue3项目,首先在需要创建项目的路径下，利用cmd窗口，输入以下命令。在src目录下，创建src/router/index.js文件。在项目文件夹下，装依赖，执行 npm install。然后输入包名，选择使用技术，这边使用的是vue。然后启动项目 npm run dev。修改App.vue文件代码即可。然后在main.js中引入。开始配置路由，首先安装路由。
2024-05-19 14:53:37
379
转载 vue中keep-alive的详细讲解
在该函数内对this.cache对象进行遍历，取出每一项的name值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用pruneCacheEntry函数将其从this.cache对象剔除即可。从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。
2024-05-09 16:38:25
24
原创 清楚浮动的方法
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。想要给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。缺点：用zoom:1触发hasLayout.缺点：添加许多无意义的标签，结构化比较差。优点：符合闭合浮动思想，结构语义化正确。优点：通俗易懂，书写方便。
2024-05-08 15:48:15
201
原创 垂直居中方法
5 absolute + 负 margin。4.absolute 加 tranform。/* 核心代码 *//* 核心代码 *//* 核心代码 *//* 核心代码 *//* 核心代码 *//* 核心代码 *//* 核心代码 *//* 核心代码 */
2024-05-08 15:32:05
312
转载 实现三栏布局的方法
我们先把左右两栏元素浮动，中间栏默认撑满全屏，可以利用BFC不会和浮动元素重叠的规则，把中间元素改成一个BFC，使用overflow:hidden或者display: flex达到中间栏自适应。左、中、右 三栏都使用float进行浮动，然后通过负值margin进行调整。缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验。1.三栏都使用float进行浮动，左右定宽，中间宽度100%缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验。1.首先固定左右两栏，左栏左浮动，右栏右浮动。
2024-05-08 15:06:29
7
原创 react使用redux
本实例包括一个同步改变和一个异步修改值的方法。在store/index.js文件中集合。在store/index.js文件集合。在根目录index.js中引入绑定。同上在根目录index.js引入。创建store文件夹。
2024-05-02 16:45:22
8
转载 lement date-picker 时间日期选择器 时间范围控制 开始时间不能大于结束时间（精确到时分秒）
【代码】lement date-picker 时间日期选择器 时间范围控制 开始时间不能大于结束时间（精确到时分秒）
2024-04-20 16:33:39
124
转载 数据库连接异常异常指令err: AccessDeniedError [SequelizeAccessDeniedError]: Access denied for user
异常指令err: AccessDeniedError [SequelizeAccessDeniedError]: Access denied for user 'root'@'localhost' (using password: YES)用可视化工具直接修改用户密码 这里用的是Navicat 直接找到用户把root用户密码修改成“root”即可。意思就是'root'@'localhost的秘密不对,默认是root,你改过之后就连不上了。所以一般就要把root用户密码改成root 介绍一个简单方法、
2024-04-20 16:27:56
89
转载 安装mysql详细教程
执行完成点击Finish即可，然后点击next，再点击Finish即可。如果说不记得密码，可以点击连接测试进行测试密码正确与否。输入mysql的密码后。出现了mysql的版本信息即说明配置成功了。如果要新建数据库，可以右键对应的连接，然后点击新建数据库即可。这里一般选择传统密码，看个人习惯。这里的mysql之类的数据库文件不要随便删除。mysql密码即是你安装MySQL时设置的密码。“Server only”仅作为服务器安装。选好后点击OK，然后点击Next。然后等待运行完成，然后连续点击下一步。
2024-04-20 16:02:09
11
原创 react事件绑定this指向问题
react修改状态时，事件绑定，this指向有时候会指向undefined。2. 绑定事件时，直接改成箭头函数。1.class的实例方法。
2024-04-17 16:18:32
102
原创 react-基础篇
5. 创建元素：React.createElement('元素标签名'，‘元素属性’，‘元素内容’) （比较繁琐）6. 渲染元素：ReactDOM.render('渲染的元素'，‘渲染的节点’)3. 初始化项目命令：npx create-react-app 项目名。4. 启动命令：yarn start 或 npm start。1. react：构建用户界面的javascript库。2. 使用时，推荐使用脚手架。
2024-04-17 10:52:36
153
原创 基于vue的cron表达式组件——vue-crontab插件
vue 的 cron 组件，支持解析/反解析 cron 表达式，生成最近五次的符合条件时间，依赖 vue2 和 element-ui。
2023-09-08 15:52:34
634
原创 vue npm install报错版本不匹配(peer。。。)
标志安装依赖项。这将忽略依赖项之间的版本不匹配，并使用 peer 依赖项的任何版本。 标志安装依赖项。这将强制安装并覆盖任何版本不匹配的依赖项。如果使用npm版本是 7+，则尝试使用。如果您使用的是旧版 npm，则尝试使用。如果安装插件报错，也可以加--force。
2023-09-08 10:47:45
726
原创 nprogress的用法
4.这个呢，基本上会这几个api就足够了，我们用的最多的就是这几个，NProgress.start()开启进度条，NProgress.done()完成进度条，如果我们想改变进度条的颜色，可以进入App.vue里，在style中加上下面这样几行代码即可。3.在router(const router = new VueRouter({......}))后面写上路由钩子函数如下所示。打开一个网页的时候，会看到一个进度条，然后加载完成后进度条就没了。这个呢，就是一个第三方的进度条库，叫做nprogress.
2023-04-26 14:21:53
406
原创 elTable实现树形结构拖拽功能
当别人问你vue的编译过程是怎么样的时候，你怎样回答？我们先说什么是编译，为什么要编译，首先因为vue写的html模板，是浏览器识别不了的，我们通过编译的过程，可以进行依赖收集，进行依赖收集之后我们就把Data中的数据模型和视图之间产生依赖关系，当模型发生变化的时候，我们就可以通知这些依赖的地方让他们进行更新，这就是我们执行编译的目的，我们把这些界面全部编译以后，更新操作，我们就可以做到模型驱动视图的变化这就是编译的过程。...
2022-09-19 17:17:38
3015
1
转载 VUE 代理设置
说明：这里的vue代理是指用vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。版本： vue-cli 3.0以上修改文件位置：根目录下的vue.config.js代码：devServer: { proxy: { '/api': { target: 'http://192.168.123.123:8080', // 后台接口地址 ws:
2022-04-25 17:54:45
7324
原创 vue启动项目时遇到一下问题 throw er； // Unhandled ‘error‘ event ，Error: spawn cmd ENOENT
解决方法：找到自己的system32文件夹 ，一般在C:\windows\system32 把这个路径添加到系统环境变量的path中，重新打开项目即可解决
2022-04-14 15:27:27
857
原创 JavaScript以万或亿为单位显示，并保留两位小数或取整
//单位:万n = 814308678.00;n = Math.floor((n /10000) * 100) / 100; //保留小数点两位//n = parseInt((n /10000) * 100 / 100); //取整n = n + "万";结果：//81430.86万//81430万//单位:亿n = 814308678.00;n = Math.floor((n /100000000) * 100) / 100; //保留小数点两位//n = parseInt((n
2022-04-14 15:06:04
1432
原创 Element-ui + vue 表格分页---每页连续排序
需求：一共30条数据，每页显示10条，下一页序号接着上一页。例如：第一页：1--10，第二页： 11-20；第三页：12-30技术: vue element-table 分页例子：主要是获取到数据，使用forEach为每一项动态添加一个index属性var newItem =res.data.data.list.forEach((item,index) =>{ //res.data.data.list 表格数据 forEach为每一项添加数据item.index = (ind
2022-04-14 15:02:09
1164
原创 vue内嵌iframe跨域通信
1、Vue组件中如何引入iframe？<template> <div class="act-form"> <iframe :src="src"></iframe> </div></template><script>export default { data () { return { src: '你的src' } }}</script>如
2022-04-12 17:28:45
6371
原创 vuex属性介绍
VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。一，state 负责状态管理，类似于vue中的data，初始化数据二，mutation 专用于修改state中的数据，通过com...
2022-04-12 17:23:58
1197
原创 vue 组件继承
1.创建一个公共组件，比如如下father.vue<template> <div> 父类：{{this.a}} <span>{{title}}</span> </div></template><script>export default { data() { return { a: 6, title: '我是爸爸' } }, cre
2022-04-12 16:42:33
3746
原创 draggable实现拖拽
1.安装插件yarn add vuedraggablenpm i -s vuedraggable2. 使用插件import Draggable from 'vuedraggable'注册components: { Draggable }, <draggable animation="1000" // 拖动时的过渡效果 handle=".drag-btn" // 指定可拖动元素的样式名称 chosenClass="chosen" // 属性设置选中元...
2022-04-12 16:28:24
896
原创 module.exports和exports的区别
在学习Node.js时，经常能看到两种导出模块的方式：module.exports和exports在文件a.js中用exports或module.exports导出的对象（方法、变量），可以在另一个文件b.js中通过require('./a')引用module和exports是Node.js给每个js文件内置的两个对象。可以通过console.log(module)和console.log(exports)打印出来。如果你在main.js中写入下面两行，然后运行$node main.jsrequ
2022-04-12 16:17:24
71
原创 字符串方法
indexOf() 方法返回字符串中指定文本首次出现的索引（位置） 找不到返回-1lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引 找不到返回-1search() 方法搜索特定值的字符串，并返回匹配的位置split() 将字符串转换为数组slice() 提取字符串的某个部分并在新字符串中返回被提取的部分 两个参数：起始索引（开始位置），终止索引（结束位置）replace() 方法用另一个值替换在字符串中指定的值 返回的是新字符串toUpperCase() 把字
2022-04-12 16:13:17
223
原创 vue 中 provide,inject传值
1.父组件给子组件传值<template> <son></son></template><script>import son from './son'export default { components:{ son }, data(){ return { title:'我是爸爸' } }, provide () { return { title:
2022-01-18 18:05:07
730
转载 Vue使用jsPdf将页面导出成pdf文件
①第一个.将页面html转换成图片 npm install --save html2canvas②第二个.将图片生成pdfnpm install jspdf --save2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')3.在将要导出的页面添加如下方法// 导出页面为PDF格式import html2Canvas from 'html2canvas'import Js...
2022-01-18 11:48:07
1415
翻译 el-select下拉框懒加载以及搜索联合处理+搜索防抖处理
问题描述现有一个页面，充斥着大量表单元素，首先要知道的是vue对于视图上的更新机制，在一个组件内若有元素发生变动，那么整个组件就会刷新渲染，所以将大量的表单元素放在一个组件内是会造成页面卡顿的现象。如果有下拉框一次性加载大量数据的情况，这个现象会格外的明显。虽然说将表单分割成多个组件会有帮助，但是效果不会很大，必须要解决下拉框一次性加载了大量元素这个根源问题。由于element自身没有对于下拉框(el-select)做懒加载的处理(也可以和element-ui的InfiniteScroll(无限滚动)联合
2021-12-11 17:17:31
6292
原创 nginx配置conf文件
1.nginx介绍官方网站为：nginx newsnginx newsnginx news。它是一款免费开源的高性能 HTTP 代理服务器及反向代理服务器（Reverse Proxy）产品，同时它还可以提供 IMAP/POP3 邮件代理服务等功能。它高并发性能很好，官方测试能够支撑 5 万的并发量；运行时内存和 CPU 占用率低，配置简单，容易上手，而且运行非常稳定。2.nginx常用功能①、反向代理 这是 Nginx 服务器作为 WEB 服务器的主要功能之一，客户端向服务器发送请求时，.
2021-09-17 15:58:06
726
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人