Vue,JavaScript框架,前端开发框架,Vue问题集合

vue3封装axios请求引入示例及使用教程

2024-07-24

一、安装axiosnpm install axios 二、新建api目录在前端项目src目录下新建api目录三、在api目录下新建request.js文件，用于封装请求接口，编写如下代码import axios from "axios"; import { ElMessage } from "element-Plus"; const service = axios.create(); // 添加请求拦截器 service.interceptors.request.use(function (config) { ; ; // 在发送请求之前做些什么 ; ; return config; ; }, function (error) { ; ; // 对请求错误做些什么 ; ; return Promise.reject(error); ; }); // 添加响应拦截器 service.interceptors.response.

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

vue+elementUi结合websocket实现后台新订单实时消息推送

2024-05-30

455 0

1、前端我们使用vue+elementUI的Notification 通知组件：悬浮出现在页面角落，显示全局的通知提醒消息。this.$notify({ ;;;title: '温馨提示', ;;;type: 'success', ;;;dangerouslyUseHTMLString: true, ;;;position: 'top-right', ;;;message: '<p>你有新的订单信息：“'+jsonData.pro_id+'”，</p><p>下单时间：“'+jsonData.appointment_date+jsonData.appointment_time+'”，</p>' }); 2、通过结合websocket连接接收后端传过来的数据，实现后台新订单实时消息推送，以下是部分代码：created () { // 创建 W

vue+laravel实现导出Excel功能，并解决导出数据出现乱码问题

2024-05-24

578 0

一、导致导出数据乱码问题解决方案：1.1、前端在axios里面加入加入请求头：responseType: 'blob', 说明：responseType: 'blob' 是一个常用于 XMLHttpRequest 或 fetch API 的选项，它指定了响应的类型。当设置为 'blob' 时，这意味着预期服务器返回的是一个二进制大对象（Blob），通常用于处理二进制数据，如文件下载。1.2、后端在查询数据后加入清除ob_end_clean(); // Added by me ob_start(); // Added by me 说明：ob_end_clean — 清空（擦除）缓冲区并关闭输出缓冲，ob_start()打开缓冲区PHP代码的数据块和echo()输出都会进入缓冲区

前端vue+elementUi表单提交按钮防止多次提交

2024-05-22

502 0

vue按钮防止多次提交在Vue中防止按钮多次提交可以通过几种方式实现，其中一种方法是使用本地状态变量来跟踪按钮的状态（禁用或启用）。以下是一个简单的示例：1、前端代码<template> ;<div> ;<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"> ;;<el-form-item label="账号" prop="name"> ;;;;<el-input v-model="addForm.name" ></el-input> ;;</el-form-item> ;;<el-form-item label="密码" prop="password" > ;;;;<el-input v-model="addFo

解决vue使用element checkbox 点击一个结果全选的问题

2024-04-22

635 0

问题描述：按照官方文档使用element的checkbox复选，点击任意一个，结果全选了1、页面代码：<el-form-item label="可见数据" prop="datasoure"> ;<el-checkbox-group v-model="addForm.datasoure" @change="handleCheckedChange"> ;;<el-checkbox v-for="city in cities" :label="city" :key="city" border>{{city}}</el-checkbox> ;</el-checkbox-group> </el-form-item> 2、js代码：const cityOptions = ['上海', '北京', '广州', '深圳']; return { ;;cities: cityOptions, addForm: { ;;dataso

Macbook安装vue开发环境，mac配置vue环境、脚手架

2023-06-08

3128 0

Mac端安装vue环境和window端差不多，但也是有点区别，这里博主一开始安装也遇到很多问题，这里写一篇文章记录下第一次在Mac下安装的经历教程，同事也分享给各位果粉开发者。注意苹果电脑中需要在终端使用sudo命令来安装，不然会出现权限问题，另外安装包在官网要选择MacOS版。1、下载Mac版nodejs，官网直通车：https://nodejs.org/en/download2、安装vue，终端执行sudo npm install -g vue 3、安装vue脚手架，终端执行sudo npm install -g;@vue/cli 4、终端运行vue ui，执行命令vue ui 看到上面结果，说明vue环境安装成功了，vue ui 面板

Vue如何使用过滤器

2023-03-28

913 0

很多时候，后端给接口的数据不是我们要的，我们就需要Vue使用过滤器，转换成我们想到的结果数据。模板代码：<template> ;;<div> <p>{{data.actors|actorfilter}}</p> ;;</div> </template> js代码<script> import Vue from 'vue' Vue.filter("actorfilter",function(data){ var newlist = data.map(item=>item.name) return newlist.join(' ') }) </script>

elementUI el-table 表格实现手动选择展示列

2022-09-29

3374 0

一、使用场景：在使用elementui开发表格功能的时候，我们会遇到表格字段列数过多的情况，这时我们就需要对其进行设置，选择是否展示列，默认展示多少列，还有就是到处表格数据的时候，我们可以指定选择列到处，这样体验方面是很好的。二、效果展示：点击操作按，展开筛选类选项三、实现思路：（1）表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；（2）点击表格最后一列表头（操作栏），弹出选择框；【el-popover】（3）选择框中包括：全选复选框、所有字段复选框组、取消按钮、确定按钮；【el-checkbox-group】（4）选

vue中element-ui固定el-dialog模态窗高度

2022-01-10

4686 0

vue中element-ui固定el-dialog模态窗高度，超出显示纵向滚动条，可以使用下面方法<style lang="css"> .el-dialog { ;margin: 5vh auto !important; } .el-dialog__body { ;height: 75vh; ;overflow: hidden; ;overflow-y: auto; } </style>

vue3封装axios请求引入示例及使用教程

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问题

vue+elementUi结合websocket实现后台新订单实时消息推送

vue+laravel实现导出Excel功能，并解决导出数据出现乱码问题

前端vue+elementUi表单提交按钮防止多次提交

解决vue使用element checkbox 点击一个结果全选的问题

Macbook安装vue开发环境，mac配置vue环境、脚手架

Vue如何使用过滤器

elementUI el-table 表格实现手动选择展示列

vue中element-ui固定el-dialog模态窗高度

置顶推荐

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

html前端按钮效果

swiper插件的使用

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

标签云

浏览排行

最近热文

打赏本站

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

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

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

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

vue3封装axios请求引入示例及使用教程

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问题

vue+elementUi结合websocket实现后台新订单实时消息推送

vue+laravel实现导出Excel功能，并解决导出数据出现乱码问题

前端vue+elementUi表单提交按钮防止多次提交

解决vue使用element checkbox 点击一个结果全选的问题

Macbook安装vue开发环境，mac配置vue环境、脚手架

Vue如何使用过滤器

elementUI el-table 表格实现手动选择展示列

vue中element-ui固定el-dialog模态窗高度

置顶推荐

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

html前端按钮效果

swiper插件的使用

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

标签云

浏览排行

最近热文

打赏本站

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

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

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

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录