- 博客(35)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vite构建项目
官网地址vite官网构建项目# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app -- --template vue上面代码失
2022-01-18 15:37:10
687
原创 npm发包流程
先在npm官网注册自己的账号 https://www.npmjs.com/开始编写自己的包先npm init创建一个package.json文件{ "name": "helloworldlxy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" ..
2021-06-18 14:51:26
148
原创 nrm镜像管理工具
全局安装nrmnpm install nrm -g执行nrm -h看下是否正常执行如果报错 找到node_global/node_modules/nrm里的cli.js 将第17行代码const NRMRC = path.join(process.env.HOME, '.nrmrc');替换为const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc').
2021-06-18 14:36:51
134
原创 nvm管理多个node版本
windows电脑下载安装nvm-windowsgithub搜索nvm-windows下载，点击下载nvm-windows可以选择下载安装版还是解压版安装版按指令下一步安装即可，环境变量会自己配置解压版需要自己去配置环境变量新建NVM_HOME 值：E:\program\node\nvm（填自己的目录x:\xxx\nvm）新建NVM_SYMLINK, 值:E:\program\node\nodejs(这里目前没有这个目录，其实是node.js版本目录的快捷方式，暂时不用管，后面自动生成).
2021-06-18 14:28:36
215
原创 我遇到的面试题2021.5
this的指向都有哪些情况可以修改new的this的指向吗？js实现继承的方式都有哪些？你都封装过什么组件？如何实现的？类中的方法存在于什么上？为什么属性不在原型上？重排重绘的区别BFC的概念，如何实现BFC开发中遇到手机和电脑的兼容性开发中手机端的兼容性，手机端点击延迟是什么原因，如何解决？css如何实现三角形，扇形自己实现一个toast类自己实现一个手风琴效果的折叠面板点击加入购物车的抛物动画如何实现，疯狂点击，如何实现很多个东西加入购物车，且要做到性能优化如何实现图片懒加载.
2021-05-25 11:14:53
80
原创 前端基础面试题
calc, support, media各自的含义及用法@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；@media 查询，你可以针对不同的媒体类型定义不同的样式。css水平、垂直居中的写法，请至少写出4种水平居中行内元素: text-align: center.
2021-04-14 08:28:21
103
原创 文件分块上传
文件上传 大于20M时分块上传创建一个FileHandler类 来进行文件的一些判断处理/* eslint-disable */import { getSTS } from "@/utils/api/global";import MD5 from "spark-md5";import {uploadChunks, uploadSFile} from '@/utils/api/upload.js'import Chunk from "@/utils/share/chunk";const Fi.
2021-04-12 14:46:52
457
原创 image-conversion+canvas图片拼接及压缩
图片拼接用的是canvas 图片压缩用的是image-conversion插件引入image-conversion插件cnpm i image-conversion -S导入固定拼接的图片import defaultHeadPng from ‘@/assets/img/normalPic.png’拼接图片 js// 生成符合条件的图片实例filesToInstances(files, callback){ const length = files.length; // 图片路径个数 l.
2021-04-12 14:23:05
547
1
原创 html2canvas页面截图
引入插件cnpm i html2canvas -S将要生成图片的元素 加上id名<div id="imageDom"></div>使用function clipPage(){ html2canvas(document.querySelector('#imageDom'), { backgroundColor: '#f8f8f8', allowTaint: false, // 允许画布被污染 useCORS: true // 图片允许跨域.
2021-04-12 13:43:07
192
原创 服务端渲染和客户端渲染的区别
SPA、SEO、SSR 三者的区别SPA（single page application） 单页面应用，是前后端分离时提出的一种解决方案。优点：页面之间切换快；减少了服务器压力；缺点：首屏打开速度慢，不利于 SEO 搜索引擎优。SEO（search engine optimization）搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。我们之前说 SPA 单页面应用，通过 ajax 获取数据，这就难保证我们的页面能被搜索引擎收到。并且有一些搜索引擎不支持的 js 和通过 ..
2021-04-02 15:40:52
121
原创 mpVue项目构建及配置（一）
下载github模板vue init mpvue/mpvue-quickstart project-name配置sass-loadernpm install --save-dev sass-loader//sass-loader依赖于node-sass,所以要安装node-sassnpm install --save-dev node-sass//在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /\.sass$/, loa.
2021-04-02 15:00:10
226
原创 ES6中的生成器yield
yield是yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。yield的异步使用// 模拟获取，用户数据，订单数据，商品数据.
2021-03-30 21:34:58
354
原创 styled-components怎么用
先安装npm install --save styled-components创建样式组件 style.js表示一个组件元素divimport styled from 'styled-components'export const HomeWrapper = styled.div` width: 960px; margin: 0 auto; height: 300px; background: red;`使用样式组件// 先引入组件import {HomeWrap.
2021-03-29 19:22:18
290
原创 js千分位逗号分隔的三种方法
toLocaleString方法 // 扩展性差 且如果本地语言不合适的话会不起作用 function format(v) { //这是用正则表达是检查是否是纯数字 if(/^[0-9]+$/.test(str)){ return (+v).toLocaleString() }else{ return '--'; } }正则表达式//这种方法虽然简单便捷，但是不容易懂function format(v) { if(/^[0-9]+$/.t.
2020-10-20 12:52:30
1581
原创 mapvgl实现百度地图边绑定线集合
效果图1.引入mapv及相关的插件<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></script><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script src="https://map
2020-10-15 13:10:10
1411
3
原创 百度地图结合mapvgl实现散点图（大小颜色变化）
效果图点的颜色大小都是可调的在项目中引入百度地图 ,百度地图封装的common.js，mapv，mapvgl.min.js，<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></script><script src="https://mapv.baidu.com/gl/examples/static/common.js
2020-10-14 13:20:20
4271
6
原创 js实现图片本地压缩并上传
首先本地上传一张图片进行大小及格式验证获取图片base64编码设置压缩后的宽高并new 一个 Image，canvas绘制出改Image，并设置压缩后的宽高利用canvas对图片进行压缩获取到压缩后的base64编码，可以进行图片上传等操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片压缩</title></he.
2020-07-09 17:16:05
627
原创 vue加animation.css动画
npm装一个animation.css插件npm install animate.css --save在main.js中加上css的引用import 'animate.css'在想要加动画的元素上加上类，animate__animated 是基础类必须加，后面的是动画样式类，可以选择很多，具体参考animation.css官网<h1 class="animate__animated animate__bounce">An animated element</h1&..
2020-07-07 15:30:35
817
原创 js获取当前时间 new Date 时间转换
1. 获取当前时间时间戳var now = new Date().getTime();// getTime()是获取时间戳2. 获取指定时间的时间戳 var time = new Date(2020,07,08).getTime(); //new Date( year, month, date, hrs, min, sec) 按给定的参数创建一日期对象3. new Date()的基本方法var myDate = new Date(); myDate.getYear(); //获取当前
2020-07-07 14:37:57
1744
原创 ElementUI按需引入各种组件
ElementUI按需引入各种组件一、首先按需引入前奏安装element-uinpm i element-ui -S.安装按需引入必要插件npm install babel-plugin-component -D修改.babelrc 如果是vueCli3 则修改babel.config.jsmodule.exports = { presets: ["@vue/app"], plugins: [ // element官方教程 [ "compo
2020-07-06 17:41:14
11898
2
原创 vue2.0路由切换后页面滚动位置不变
vue2.0路由切换后页面滚动位置不变解决办法：在App.vue文件中加上路由监听export default { watch:{ '$route':function(to,from){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } },}...
2020-06-28 16:18:11
650
原创 Vue中输入框只能输入整数和小数
在main.js中写一个指令 //限制只能输入正整数,不包含小数 Vue.directive('enterNumber', { inserted: function (el) { el.addEventListener("keypress",function(e){ e = e || window.event; let charcode = ty...
2019-04-10 10:47:22
3912
7
原创 Vue中全局变量Global
src目录下创建一个api文件夹，api文件夹下创建global.jsglobal.js中:let color = { 'bgColor':'', 'xColor':'#4F5E94', 'fontC':'', 'barC':'#89C04B', }export default {color}在main.js中引入import Global from...
2019-04-08 14:33:21
4361
原创 vue引入elementUI部分组件库
在main.js中 import {Cascader} from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.component(Cascader.name, Cascader);然后就可以正常使用啦
2019-04-02 16:53:13
1381
原创 搭建vue项目
vue init webpack projectNamenpm install sass-loader --savenpm install node-sass --savenpm run start
2019-04-02 14:12:49
132
原创 for循环 for-of for-in
for-in 用于 数组和对象var arr = ['a','b','c','d'];for(var i in arr) { console.log(i); // 0 1 2 3}console.log('---------------');var obj = {a:'a', b:'b', c:'c'};for(var i in obj) { console.log(i); //...
2019-03-05 17:57:48
365
原创 vue中点击节点获取节点的位置
在节点绑定点击事件<div @click="posilDiv($event)"></div>posilDiv(event){ var DOM = event.currentTarget; // 获取节点距离浏览器视口的高度 var top = event.currentTarget.getBoundingClientRect().top; // 获取节点距离浏览...
2019-03-05 17:01:09
5635
原创 $emit传递多个参数
$emit传递一个参数时子组件：this.$emit('closeChange',false);父组件：<posilCom @closeChange="closeCom($event)"></posilCom>closeCom(msg) { this.msg = msg;}$emit传递多个参数时子组件：this.$emit('closeChange'...
2019-02-20 17:58:14
32206
1
转载 emmet语法
emmet语法https://www.w3cplus.com/tools/emmet-cheat-sheet.htmlsublime安装emmet按Ctrl+`调出sublime text的console粘贴以下代码到底部命令行并回车： import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.install
2018-01-07 15:09:59
549
原创 相对定位和绝对定位和固定定位和static
相对定位 relative特性： 1. 相对于自己的初始位置来定位 2. 元素位置发生偏移后，它原来的位置会被保留下来 3. 层级提高，可以把标准文档流中的元素及浮动元素盖在下边 使用场景： 1. 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量绝对定位 absolute特性：
2018-01-06 21:55:36
536
原创 浮动后父级边框塌陷的四种解决办法
浮动后父级边框塌陷的四种解决办法当设置某个元素浮动后 父级元素边框会出现塌陷问题，即，父级元素高为0.尽管clear可以清除浮动对其他元素造成的影响，但是依然解决不了父级边框塌陷问题。 以下为四种解决办法： 1. 设置父元素的高度 2. 给父元素添加overflow:hidden属性 3. 给父级添加伪类after 4. 在浮动元素后面添加空div
2018-01-06 21:24:46
4440
转载 markdown使用教程
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I
2018-01-06 20:54:24
132
原创 display:none和visibility:hidden的区别和用法
#div1 { width: 200px; height: 200px; visibility:hidden; /* display: none; */ background-color: red; }display:none; 在网页中不占用位置，也不会产生box，然而其实是存在的。visibility:hidden; 在网页中是存在的，只不过是一片空
2018-01-06 17:33:54
634
原创 disabled和readonly的区别和用法
disabled 和 readonly的区别disabled的范围更大，不仅可以阻止修改input表单中的值，连button submit都不能够点击，而且设置了disabled后，这个输入域的值也不能够通过form表单传递。readonly的范围较小，仅仅能够阻止修改部分表单的值，select，color range radio checkbox file等无效，可以提交表单，值也照样
2018-01-06 16:11:15
1499
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人