前端 - 简忆博客

uni-app微信小程序实现发送验证码+倒计时功能

2024-10-20 前端

一、效果展示：用户输入手机号，验证手机号是否正确，正确发送验证码，校验验证码。二、uniapp前端界面代码<template> <view class="fixed_menban"> <view class="fixed_c"> <view class="colse" @click="colse"> <image src="../../static/colse.png" ></image> </view> <view class="link"> <view class="left_phone"> <image src="../../static/phone.png" ></image> </view> <view class="center_link"> <image src=".

Layui的layedit富文本编辑器使用方法教程

2024-10-20 前端

233 0

layui框架自带的富文本编辑器，简介方便，不需要安装任何插件，以下是使用教程。1、HTML代码;<div class="layui-form-item"> ;;;;<label class="layui-form-label">内容</label> ;;;;;<div class="layui-input-block"> ;;;;;;<textarea name="content" class="layui-textarea" id="content" placeholder="请输入内容" style="display: none;"></textarea> ;;;;</div> ;;</div> 2、js代码：实例化和接受编辑器提交的内容<script> ;;layui.use(['form','layedit'], function () { ;;

Layui实现多图上传预览和删除功能

2024-10-20 前端

187 0

在开发项目时，我们有时需要用到多图上传，比如商品缩列图等，我们可以使用layui自带的多图上传，不需要安装任何插件。效果展示：1、前端HTML部分代码<div class="layui-form-item layui-form-text"> ;;;;<label class="layui-form-label">商品图</label> ;;;;<div class="layui-input-block"> ;;;;;;<button type="button" class="layui-btn" id="test2">多图片上传</button> ;;;;;;<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%"> ;;;;;;;;<d

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

2024-08-16 前端

584 0

一、需求分析在做uniapp开发的时候，做图片上传，需要对用户上传的图片进行裁剪后，再上传图片，然后给到用户自己去裁剪图片。二、插件截图三、功能描述用户点击上传图片，可以对其进行裁剪，旋转，编辑，放大缩小四、插件下载微信扫描下方，二维码关注公众号，回复"图片裁剪"，详细操作，请看图片五、插件使用方法1、下载好插件，放到组件目录 components 目录下，没有 components 目录的话就新建目录，如下图：2、放置上传图片按钮<button size='primary' lang="zh_CN" @click="onChooseFile" class="btn3">上传图片</button&g

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

2024-08-11 前端

406 0

一、问题描述使用npm安装wepy环境一直只能安装1.7.3版，以前是可以安装2.1.0版本。执行查看版本npm show wepy-cli versions 这里可以看到版本最新只能是1.7.3版本继续查看npm官网：https://www.npmjs.com/package/wepy-cli可以看到npm上的wepy版本是1.7.3版本，后面打开腾讯官方的wepy包，看到最新版本是2.1.0二、问题解决@wepy/cli@next 是指向最新的预发布版本（如 2.x 版本），而 wepy-cli 则是旧版本（如 1.7.3）。这表明 @wepy/cli 包含了更现代的功能和更新，而 wepy-cli 是旧版的包。切换到 @wepy/cli 你可以使用更新的功能和版本

vue-elementUI去掉input上下箭头

2024-08-08 前端

406 0

一、问题描述vue中使用elementUI，在使用input输入框，设置type为number数字类型是，会出现如下上下箭头问题；如下所示：二、问题解决出现这个问题，只需要重置下elementUI的input样式即可解决，如下： /* element样式重置 start */ /* 去掉input尾部上下小箭头 start */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ ; -webkit-appearance: none !important; ; -moz-appearance: none !important; ; -o-appearance: none !important; ; -ms-appearance: none !important; ; appearance: none !important; ; marg

解决visual studio code (vscode)安装时没有选择安装路径问题

2024-08-06 前端

1096 0

一、问题描述电脑重新安装系统之后，在安装visual studio code的时候没有选择安装路径选项的问题，只能默认都是安装到c盘二、问题解决出现这个问题，我们只需要改下注册表即可1、首先进入注册表win+r键，输入regedit2、进入注册表之后，打开路径计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\右击圈住的删除即可。3、重新安装vscode，可以看到已经有选择安装路径的选项了。

$关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法$

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

2024-07-28 前端

294 0

问题复现：Windows11 在 vscode中运行 wepy 项目报如下错误：wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1+ wepy build --watch+ ~~~~;;+ CategoryInfo;;;;;: SecurityError: (:) []，PSSecurityException;;+ FullyQualifiedErrorId : UnauthorizedAccess问题原因：这个错误表明你在尝试运行 wepy 命令时，遇到了 PowerShell 的脚本运行策略限制。默认情况下

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

2024-07-26 前端

270 0

微信小程序创建wepy框架项目，运行报如下错误：wepy build --watch[15:55:58] ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev".[15:55:58] ERR! init Can't resolve '@wepy/compiler-less' in 'F:\study\wepy\myproject1'[15:55:58] ERR! init Make sure module "@wepy/compiler-babel" is installed. If not please try "npm install @wepy/compiler-babel --save-dev".[15:55:58] ERR! init Can't resolve '@wepy/compiler-babel' in 'F:\study\wepy\

Vue3项目如何安装element plus

2024-07-05 前端

317 0

Element Plus 基于Vue 3,面向设计师和开发者的组件库安装# NPMnpm install element-plus --save # Yarnyarn add element-plus # pnpmpnpm install element-plus 一、全局引入打开main.jsimport { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' ; const app = createApp(App) ; app.use(ElementPlus) app.mount('#app') 二、按需引入安装npm install -D unplugin-vue-components unplugin-auto-import Vite打开vite.config.js引入import { defineConf

vue3+element plus使用vuex实现折叠导航菜单

2024-07-05 前端

371 0

vuex简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一、安装vuexnpm install vuex -S 二、创建vuex文件夹在src目录下创建store文件夹，并创建index.js文件，编写如下代码import { createStore } from "vuex"; export default createStore({ ; ; state: { ; ; ; ; isCollapse : true ; ; }, ; ; mutations: { ; ; ; ; updateIsCollapse(state, payload){ ; ; ; ; ; ; state.isCollapse = !state.isCollapse ; ; ; ; } ; ; }

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法

2024-07-04 前端

304 0

yarn介绍：Yarn是facebook发布的一款取代npm的包管理工具yarn特点：速度超快：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。超级可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。然而在Mac下安装会遇到问题：报没权限安装问题，如下所示：npm install -g yarnnpm notice;npm notice New major version of npm available! 8.19.4 -> 10.8.1npm noti

yarn使用vite快速创建vue3项目及错误问题解决

2024-07-04 前端

613 0

一、为什么要用vite?当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。Vite 通

如何使用vue3+vant创建底部菜单组件

2024-06-27 前端

373 0

在前端项目开发中，会出现底部导航菜单通用的情况，我们就需要把底部菜单导航做成公用组件，一下是一个方法，供大家参考和使用。一、效果展示：二、代码编写1、在components文件夹中创建底部菜单组件Footer.vue<template> ;;<div class="footer"> ;;;;<div class="item"> ;;;;;;<router-link to="/home" class="nav-item" active-class="nav-color"> ;;;;;;;;<van-icon name="wap-home-o" size="30"/> ;;;;;;;;首页 ;;;;;;</router-link> ;;;;</div> ;;;;<div class="item"> ;;;;;;<r

一文教你如何运行别人vue的项目

2024-06-27 前端

279 0

拿到别人开发的vue项目，如何运行呢？本文教大家如何运行别人项目1、前提条件，电脑已安装vue环境，没有的话请移步之环境安装Macbook安装vue开发环境，mac配置vue环境、脚手架Nodejs（npm）环境和vue环境安装教程2、删除package-lock.json文件package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。3、切换项目目录4、清除npm缓存npm clean cache -f 5、重新安装依赖npm install 6、运行项目npm run serve

mac运行vue项目（已有node_modules）报错/node_modules/.bin/vue-cli-service: Permission denied

2024-06-26 前端

431 0

mac运行vue项目报错：npm run serve sh: /Applications/遇见的文件夹/study/vue/vue-element-blogs/node_modules/.bin/vue-cli-service: Permission denied出现这个问题，是因为没权限。解决方案；只要执行chmod 777 +文件路径，即可成功解决。chmod 777 /Applications/遇见的文件夹/study/vue/vue-element-blogs/node_modules/.bin/vue-cli-service 重新执行命令不再报错了。npm run serve

解决vue3安装vant报错：ERROR TypeError: ComponentsPlugin is not a function

2024-06-25 前端

615 0

一、问题复现vue-cli 的项目中按需扩展使用unplugin-vue-components，运行报错：;ERROR;TypeError: ComponentsPlugin is not a functionTypeError: ComponentsPlugin is not a function;;at Object.<anonymous> (F:\study\vue\vue3-waimai\vue.config.js:27:11);;at Module._compile (node:internal/modules/cjs/loader:1198:14);;at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10);;at Module.load (node:internal/modules/cjs/loader:1076:32);;at Function.Module._load (node:internal/modules/cjs

基于 vue-cli 的项目在vue3中使用vant3 UI框架按需引入组件

2024-06-24 前端

296 0

按需引入组件样式1. 安装插件# 通过 npm 安装npm i unplugin-vue-components -D # 通过 yarn 安装yarn add unplugin-vue-components -D # 通过 pnpm 安装pnpm add unplugin-vue-components -D 2. 配置插件基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：const { VantResolver } = require('unplugin-vue-components/resolvers'); const ComponentsPlugin = require('unplugin-vue-components/webpack'); module.exports = { ;configureWebpack: { ;;plugins: [ ;;;ComponentsPlugin.default({ ;;;;resolvers: [VantResolver()],

vue3移动端项目使用postcss-pxtorem实现px自动转换为rem及amfe-flexible是配置可伸缩布局

2024-06-23 前端

419 0

简介：postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位。amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10.使用方法：1、安装使用yarn 安装：yarn add postcss-pxtorem@5.1.1 amfe-flexible -S 或使用npm安装npm install postcss-pxtorem@5.1.1 amfe-flexible --save 2、创建vue.config.js在根目录创建vue.config.js文件，添加如下配置代码module.exports={ ; ; css: { ; ; ; ; loaderOptions: { ; ; ; ; ; ; postcss: { ; ; ; ; ; ; ; ; plugins: [ ; ; ; ; ; ; ; ; ; ; require('postcss-pxtorem

解决vue项目安装扩展插件报错yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

2024-06-22 前端

479 0

执行yarn add postcss-pxtorem@5.1.1 amfe-flexible -S报如下错误：yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。所在位置行:1 字符: 1+ yarn add postcss-pxtorem@5.1.1 amfe-flexible -S+ ~~~~;;+ CategoryInfo;;;;;: ObjectNotFound: (yarn:String) [], CommandNotFoundException;;+ FullyQualifiedErrorId : CommandNotFoundException解决方法：1、检查本地是否安装yarnyarn -v 2、安装yarnnpm install -g yarn 成功安装yarn即可看到版本

解决vue npm命令安装报错npm ERR! request to https://registry.npm.taobao.org/clipboard failed, reason: certificate has expired问题

2024-06-21 前端

337 0

在使用vue npm安装命令npm install --registry=https://registry.npm.taobao.org 报如下错误：npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIREDnpm ERR! request to https://registry.npm.taobao.org/clipboard failed, reason: certificate has expirednpm ERR! A complete log of this run can be found in:npm ERR!;;;C:\Users\Hm\AppData\Roaming\npm-cache\_logs\2024-06-20T06_33_14_083Z-debug.log这个错误是淘宝的镜像连接已经失效了，2024年淘宝镜像没更新时间证书，可以换成一下的镜像npm config set registry h

uni-app微信小程序实现发送验证码+倒计时功能

Layui的layedit富文本编辑器使用方法教程

Layui实现多图上传预览和删除功能

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

vue-elementUI去掉input上下箭头

解决visual studio code (vscode)安装时没有选择安装路径问题

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

Vue3项目如何安装element plus

vue3+element plus使用vuex实现折叠导航菜单

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法

yarn使用vite快速创建vue3项目及错误问题解决

如何使用vue3+vant创建底部菜单组件

一文教你如何运行别人vue的项目

mac运行vue项目（已有node_modules）报错/node_modules/.bin/vue-cli-service: Permission denied

解决vue3安装vant报错：ERROR TypeError: ComponentsPlugin is not a function

基于 vue-cli 的项目在vue3中使用vant3 UI框架按需引入组件

vue3移动端项目使用postcss-pxtorem实现px自动转换为rem及amfe-flexible是配置可伸缩布局

解决vue项目安装扩展插件报错yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

解决vue npm命令安装报错npm ERR! request to https://registry.npm.taobao.org/clipboard failed, reason: certificate has expired问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

uni-app微信小程序实现发送验证码+倒计时功能

Layui的layedit富文本编辑器使用方法教程

Layui实现多图上传预览和删除功能

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

vue-elementUI去掉input上下箭头

解决visual studio code (vscode)安装时没有选择安装路径问题

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

Vue3项目如何安装element plus

vue3+element plus使用vuex实现折叠导航菜单

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法

yarn使用vite快速创建vue3项目及错误问题解决

如何使用vue3+vant创建底部菜单组件

一文教你如何运行别人vue的项目

mac运行vue项目（已有node_modules）报错/node_modules/.bin/vue-cli-service: Permission denied

解决vue3安装vant报错：ERROR TypeError: ComponentsPlugin is not a function

基于 vue-cli 的项目在vue3中使用vant3 UI框架按需引入组件

vue3移动端项目使用postcss-pxtorem实现px自动转换为rem及amfe-flexible是配置可伸缩布局

解决vue项目安装扩展插件报错yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

解决vue npm命令安装报错npm ERR! request to https://registry.npm.taobao.org/clipboard failed, reason: certificate has expired问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录