- 博客(25)
- 收藏
- 关注
RSS订阅原创 @vue/cli安装成功后，运行vue -V报：不是内部或外部命令
最近要新建一个项目，就准备使用vue的官方脚手架搭建，于是安装：npm install -g @vue/cli安装成功了，验证一下是否安装成功，于是：vue -V但是报错：‘vue’不是内部或外部命令。。。。这就奇怪了，因为首先俺的node是全局安装的，npm也存在，看了一下vue安装成功后的目录：然后查了一下资料，可能是需要配置环境变量，于是：然后在path里，添加路径：然后重启命令窗，输入vue -V，可以了，出现了版本号...
2022-01-19 12:59:17
3522
3
原创 已完成的vue项目进行seo优化 (prerender-spa-plugin + vue-meta-info)
为啥要seo优化？别人在百度搜索时，搜索你们公司的网站，会出现好多好多搜索结果，如果想要让你们公司的网站搜索排名靠前一点，让人一眼就能看见你们公司网站，这时候就需要seo优化了。众所周知，vue是一种 spa 单页面应用，页面的跳转都是基于路由的更改来实现的，代码经过编译后，f12打开调试器，看见的也只是一堆标签，很不利于引擎蜘蛛（网络爬虫）爬取页面（啥叫蜘蛛？请自行百度）。两种比较好用的seo优化方法：SSR：也就是所谓的服务端渲染，让后端那边直接给到你的就是html，这样直接渲染出来的就是我们
2022-01-11 17:23:54
1255
原创 写vue项目时需要用到第三方js文件，引入时有问题
最近在写vue项目时，需要用到第三方的js文件，是一个类似于这种的：a.min.js文件想到的第一种方法自然是是以哦那个import导入，但是，这个js文件竟然不支持import导入，直接pass，毕竟俺这种小菜鸡看源码也看不懂，不然还能改改源码啥的；第二种，在入口文件index.html里引入，因为我把这个js文件放在了utils文件夹里，所以我使用相对路径和绝对路径都试了，结果还是不行；最后，我把这个js文件放在一个文件夹里，然后把这个文件夹放在public文件夹里，再引入就成功了...
2022-01-06 15:57:20
592
原创 简单的随机年会抽奖
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>年会抽奖</title><style type="text/css">#textbox { border: 3px solid.
2022-01-05 09:52:50
576
原创 最简单的前端非对称加密：new JSEncrypt()
登录时对密码进行加密传输：1.调接口，后端返回公钥2.实例化对象3.设置公钥4.返回加密的字符串encryptDate = (publicKey, data) => { // publicKey: 后端返回的公钥 data：要加密的字符串 if (publicKey) { const encrypt = new JSEncrypt() // 1.实例化对象 encrypt.setPublicKey(publicKey) // 2. 设置公钥 return encrypt.en
2021-12-21 09:59:28
3148
原创 闲来无事杂记
使用nvm切换node1.下载nvm2.安装node3.nvm install 版本号 （栗子：nvm install 10.15.3）
2021-12-20 16:34:43
58
原创 使用elementUI的el-form组件时，要求手机号非必填，若填写则验证
mobilePhoneNumber: [{ required: false, validator: checkPhone, trigger: 'blur' }]这里 required 设置为false，就是非必填 ； checkPhone：验证方法；blur： 触发方式为失焦const checkPhone = (rule, value, callback) => { if (value) { // 判断当输入的有值时，才校验 if (!(/^1[3456789]\d{9}$/
2021-12-07 11:29:29
1553
原创 一些通用方法
1.检测是否为空：isNull = (val) => { // 不为空返回true return val !== null && val !== undefined && val.toString().trim().length !== 0}2.邮箱检测：validEmail = (val) => { return /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(val
2021-11-12 15:57:02
891
原创 vue报错：Navigation cancelled from “/userIndex“ to “/blank/login“ with a new navigati
最近在弄一个vue项目时碰到这么一个报错，查了下资料，记录一下：这个错误是vue-router的内部错误,是因为没有进行catch处理,导致的编程式导航跳转问题,往同一个地址跳转时，会报错。解决方法如下:在路由文件中进行配置：router/index.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 解决报错const originalPush = Router.prototype.pushco
2021-11-03 15:33:21
1294
1
原创 配置环境文件，将一个h5端的vue项目分离为面向两种群体用户使用的不同端（例：老师和学生）
项目原来的运行命令和打包命令分别是："start": "vue-cli-service serve""build": "vue-cli-service build"现在需要改为两个不同端的命令："start": "vue-cli-service serve --mode d-dev", // 此为默认运行 npm start时运行的端"start:d": "vue-cli-service serve --mode d-dev", // d端 （环境文件的 ‘名字’ 自定义即可）"st
2021-08-25 09:40:08
210
原创 iconfont的使用
去阿里矢量图标库，搜索到自己想要的图标，然后：1：加入购物车，2：然后在购物车里添加至项目（可以是公司的项目，需要别人拉你进公司的这个项目里），3：选择“Font class”这个方式，下载至本地，这时候本地就会有一个下载好的压缩包，4：解压，然后将文件夹中的 （ iconfont.css 和 iconfont.ttf 和 iconfont.woff 和 iconfont.woff2 ）四个文件复制到你的项目中去，5：就可以了，代码里就能直接使用每一个font 的class来设置小图标了。注：c
2021-08-24 13:55:10
255
原创 签到+1动画（@keyframes）
最近写的积分签到功能，需要在签到时，向上飘起一个+n的动画，记录在此：<div class="grow_count" @animationend="integralCountAnimationEnd">+{{ integralCount(index) }}</div>// animationend事件：动画结束后的回调事件（可以在此将div隐藏）.grow_count { position: absolute; top: 0; color:
2021-08-16 17:34:45
132
原创 el-table里嵌套el-input计数器，勾选哪一行就禁用哪一行的计数器
el-table有一个select事件，@select=”select“这个事件的返回值有两个： selection和row方法：select（selection， row）{} //selection:所选中的那一行或几行数据，且放在了一个数组里（返回的是一个数组） //row: 所选中的那一行或几行数据（不会放在数组里）根据selection中是否存在row这个数据，来判断是否该禁用select (selection, row) { let selecte
2021-07-21 11:19:08
465
原创 使用filter方法将数组对象去重
在写购物车页面时，又遇到了一个问题????，点击加入购物车时，会将这件商品的数据对象加入到一个数组里，这时就需要对这个数组进行去重了，不然购物车页面里渲染出的数据会有重复的。这个数组类似于这种：let arr = [ {id:1,name:1}, {id:2,name:2}, {id:3,name:3}…],需要对这个进行去重。稍加思索。。。。果断百度去????，记录在此：fn () { // state.goodsList就是需要去重的数组哦 state.goodsList.pus
2021-07-15 17:47:48
2141
原创 数组方法reduce
最近在写一个购物车页面，需要根据每件商品的数量及单价，来计算总价，使用到了数组的 reduce 方法，之前还不太了解这个方法，这次也是看了很多资料，才搞明白：arr.reduce((pre, cur, curIndex, arr) => {}, initialValue)其中：pre：初始值 或 计算结束后的返回值 （必传值） cur：当前元素 （必传值） curIndex: 当前元素的索引 arr：当前元素所属的数组（也就是arr） initialValue： 自己设
2021-07-15 10:15:06
170
原创 js数据导出excel
新的需求，将数据导出成excel表：接口： // 数据导出 export(activityId) { //需要在接口里加上请求类型为：responseType：‘blob’ return axiosGet(BASE_T_API + `/root/r1/activity/${activityId}/applicants/record/output`, { responseType: 'blob' }) }调接口（点击事件触发）export () { export(thi
2021-07-07 10:28:48
380
原创 将时间转化为“刚刚，几分钟前，几小时前，具体日期”
在写医东端的项目时，有个需求是，需要将后端返回的时间显示为“刚刚”，“几分钟前”。。。这种形式，写了个过滤器，记录在此：// 时间格式（2021-07-02 12：12：12） 显示为几分钟前，几小时前等Vue.filter('timeChange', function (value) { // 拿到当前时间戳和发布时的时间戳 var curTime = new Date() var postTime = new Date(value) //计算差值 var timeDiff = curT
2021-07-05 15:21:20
1134
1
原创 移动端评论功能
最近要写一个h5端的评论功能，记录在此：1.首先是评论的主体部分<template> <div v-if="!preview" class="medical_comment"> <div class="medical_comment_top"> <div class="medical_comment_top_all">全部评论(<span class="comment_count">{{ commentCount }}</sp
2021-07-05 09:59:38
1215
原创 nvm下载与使用
nvm下载：nvm下载地址：https://github.com/coreybutler/nvm-windows/releasesnvm安装：运行程序，傻瓜式安装，期间需要选择nvm和node的安装路径，若之前已经安装过node，可以选择之前安装的node的路径，会覆盖之前的；安装完成后，可以给npm装一个淘宝镜像（如果你公司网比较快的话，可以忽略），下载速度会快一点，如下：在安装目录中找到 settings.txt 文件，加上如下两句即可：node_mirror: https://npm.ta
2021-04-13 14:14:47
1579
原创 使用elementUi表格固定列时，滚动条拖不动
在使用elementUI中的表格组件时，因项目需求，需要使前三列固定，后面的列了可以滚动，所以使用了官网中的fixed属性，但使用后出现了问题，就是前三列宽度的滚动条无法拖动了,实际上是前三列把滚动条遮挡住了，记录在此： .el-table__body-wrapper{ z-index: 2 }在<el - table></el - table>标签上添加此样式class即可解决，也许有些微的瑕疵，但能解决问题，无伤大雅。...
2021-03-15 14:30:53
2260
原创 antd自定义设置title和footer
项目中有使用到antd的组件库中的modal对话框，需求中的标题和底部按钮都是需要自定义的，记录在此：modal中的title属性支持string和ReactNode：title={[<div style={{color:'red'}}>我是标题</div>...可设置多个]} //同时也可以设置样式了底部同理：footer属性支持string和ReactNode：底部可以只设置一个按钮用作返回footer={[<Button key="back" on
2021-03-02 15:26:02
7898
4
原创 node内存溢出
项目启动时，出现以下的错误： Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory查了一下才知道是node的内存溢出了，只需要加大node的内存即可，有两种方法（vue和react项目皆可）：在package.json文件中加入这样一段命令： "scripts": { "build": "node --max_old_space_size=4096 buil
2021-01-28 16:13:39
1320
原创 git常用命令
git的常用命令：拉取代码（默认主分支）：git clone 代码路径；拉取远端指定分支的代码：git clone -b 分支名 代码路径；更新代码：git pull；若本地有修改的代码，则更新代码后会覆盖，需要暂存本地修改的代码：a:暂存本地代码：git stash （注：stash@{0} 为暂存标记）；b:此时可以更新代码了，更新后，再还原刚才暂存的代码：git stash pop stash@{0} （若产生冲突，则需要解决冲突就可以了）本地提交：本地分为工作区，暂存区和本地
2021-01-15 16:52:29
186
1
原创 判断是否选中单选框按钮
js判断选中哪一个单选框最近的react项目中有一个需求是：在一个弹窗中，有两个单选框，选中其中一个，再点击确定，才会去做其他逻辑，在判断选中哪一个单选框的时候，炸裂了！ 查了半天资料，防止以后忘记，记录在这，栗子如下： <input type="radio" name="a" id="ipt1" value="1">是 <input type="radio" name="a" id="ipt2" value="2">否 <script>
2021-01-08 16:05:52
1878
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人