![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 75
vue、vuex、vue-router、vue-cli
可达鸭头上站青蛙
至妙之要,先存后忘。
展开
-
使用vite从头搭建一个vue3项目(五)非父子组件(兄弟组件)之间传值mitt
在src/utils目录下创建 emitter.js 文件,emitter 的使用方式与 vue2 中 EventBus 的使用方式相同。原创 2024-04-18 13:46:16 · 936 阅读 · 0 评论 -
使用vite从头搭建一个vue3项目(四)使用axios封装request.js文件,并使用proxy解决跨域问题
import.meta 是一个 ES 模块(ESM)特性,它提供了有关当前模块的元数据。在 Vue 3 中,import.meta 可以用于访问当前 Vue 应用程序实例的上下文信息,如应用程序的基本 URL、环境变量等。而要使用 proxy 代理,则 request.js 文件中的 baseURL 配置项就不再需要了。目录下创建 index.js 文件,引入request.js,创建一个请求函数。目录下创建 request.js 文件,并引入 axios。当然,此处的配置还有其他方式,不做赘述。原创 2024-04-17 17:24:24 · 1628 阅读 · 1 评论 -
使用vite从头搭建一个vue3项目(三)vite.config.js配置
v5.2.8。原创 2024-04-17 17:22:31 · 3156 阅读 · 0 评论 -
使用vite从头搭建一个vue3项目(二)创建目录文件夹以及添加vue-router
下面是我在创建vue3项目时,没有切换 node 版本导致的node版本兼容性警告。vite3 需要 node 必须是。,可以很方便的切换 node 版本,大家可以安装一个试试。修改 main.js 文件,挂载 router 路由。中添加 nav、router-link 的样式。将 style.css 中的样式注释。分享一个 node 版本管理器。创建Home、About组件。安装 vue-router。下载 nvm 时,选择。根据目录文件,在新建的。修改App.vue文件。原创 2024-04-12 17:08:10 · 819 阅读 · 0 评论 -
使用 create-vue 脚手架工具创建一个基于 Vite 的 vue3 项目,并包含加入 Vue Router 等可选项
使用 create-vue 脚手架工具可以快速创建 vue3 项目,包含如下选项(空格切换[是,否],enter选中):原创 2024-04-12 15:52:38 · 386 阅读 · 0 评论 -
使用vite从头搭建一个vue3项目(一)创建vue3项目
打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。vite 是一种新型前端构建工具,能够显著提升前端。一个开发服务器,它基于原生。一套构建指令,它使用。原创 2024-04-02 10:09:19 · 945 阅读 · 0 评论 -
前端路由hash模式以及history模式详解
在前后端分离的项目中,前端一般使用 SPA 单页面应用模式来开发项目。那么,什么是 SPA 呢?单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。单页面应用就是改变页面的url地址,不会向后台发送请求,而是通过前端路由,动态渲染页面组件,url地址的改变与后台无关。hash 模式history 模式对比hash 模式history 模式url 显示。原创 2023-04-27 13:22:10 · 8142 阅读 · 3 评论 -
vue2启动项目npm run dev报错 Error: Cannot find module ‘babel-preset-es2015‘ 修改以及问题原因
它能让你使用最新的 JavaScript 语法而无需操心对目标环境所支持的语法设置相应的语法转换插件(以及可选的 polyfills)。@babel/preset-env 可以根据指定的执行环境提供语法转换,就是可以将更新的 js 语法转换为浏览器当前支持的语法。按需引入需要借助插件 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。在报错之前,我正在修改代码,使用 ElementUI 的按需引入方式,修改了 babel.config.js。原创 2023-03-16 13:17:03 · 1363 阅读 · 0 评论 -
vue3中自定义组件中使用v-model做响应式处理
vue3中自定义组件使用v-model原创 2022-10-24 10:27:17 · 4395 阅读 · 1 评论 -
vue3项目启动后访问http://localhost:3000/,发现页面不是vue3项目首页,都是serviceWorker惹的祸
新建vue3项目,启动后访问http://localhost:3000/,发现页面不是vue3项目首页原创 2022-10-08 09:40:46 · 1879 阅读 · 1 评论 -
Vue常见面试题
首先,对于vue中的一些书写规范以及常见问题,建议大家优先阅读 vue风格指南;这里面有很多面试中的常见点。下面来看常见的面试题:1、v-for和v-if哪个优先级更高?如果两者同时出现,应该怎么优化得到更好的性能?源码位置:src/compiler/codegen/index.js官方说法:永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做:为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“use原创 2021-01-03 11:22:37 · 413 阅读 · 0 评论 -
vue中使用el-table组件进行分页多选,回显、切换分页记住上一页所勾选和取消的选项
需求:1、table表格多选,并且切换分页之后能记住上一页的选项;2、回显数据,切换分页之后再切换回来依然能回显数据;3、点击选项,未保存数据,切换页面后再切换回来初始化数据勾选状态;4、全选,取消全选数据正常变化。5、使用了dialog来显示table;6、后台分页。使用el-table:1、el-table方法:select和select-all 、toggleRowSelection和clearSelection2、el-table-column类型:type="selection"原创 2020-06-23 18:55:28 · 12689 阅读 · 5 评论 -
vue router控制页面权限,切换账号重新登录时跳转到同一个页面
在logout函数中,添加以下代码:// redirect后面跟固定的路由,这样每次退出登录后都会跳转到相同的页面。this.$router.push('/login?redirect=/auth/authCenter');原创 2020-06-08 11:54:20 · 1082 阅读 · 0 评论 -
修改ElementUI中el-cascader级联组件单选样式:点击文字选中且自动收起选择面板
先上效果图:效果为:鼠标放到选择城市菜单上弹出下一级城市菜单,点击当前城市菜单则选中,并且选择面板消失。1、全局样式修改,找到App.js加入以下样式代码:/** *以下样式将单选框隐藏,并绝对定位与文字内容一样大小,这样点击时可以点击整行文字。 */<style lang="scss">.el-cascader-panel .el-radio { width: 132px; height: 34px; line-height: 34px; padding: 0原创 2020-05-28 11:56:31 · 4982 阅读 · 0 评论 -
el-checkbox如何同时获得value值和label的值
在使用el-checkbox时有时候需要往后台传送value值(定义的code)和label值,el-checkbox组件默认获取的都是label属性中的值,如果label中设置的是code,那如何获取el-checkbox的显示文字(label)呢?我们可以将value与label拼接在一起赋值给checkbox的label属性,然后获取的时候进行处理。以el-checkbox-group为...原创 2020-05-04 11:13:41 · 27210 阅读 · 4 评论 -
Vue使用Upload上传图片报错:TypeError: Cannot create property 'xxx' on string 'xxxx'
上面说监听到fileList有错误,后来查了一下,原来上传图片所用到的fileList必须是一个对象数组[{},{}],而我传的是一个字符串数组["",""],只需要转换一下格式就可以了。以下是图片上传成功uploadSuccess函数,后台给返回的是一个图片地址,然后我重新转换了一下格式:uploadSuccess(res, file, fileList) { const url = ...原创 2020-04-24 09:23:00 · 2587 阅读 · 0 评论 -
el-select如何同时获取value和label?
在使用ElementUI组件库的el-select组件时,默认只能获取到下拉框的value值,而根据业务的不同需求,我们大多数都需要获取下拉框里面的label值,一并发送给后端。在这里提供两种获取label的方式:方法一(懒方法,很实用):在给el-option绑定:value值时使用对象的方式,将value和label同时绑定到:value上面。 :value="{ value: item...原创 2020-04-18 15:52:45 · 11823 阅读 · 0 评论 -
vue中使用v-for循环动态加载图片(:src)失败的解决方法
在vue中使用v-for循环动态加载图片,如果img的src为url链接地址时,图片可以显示出来;但是一旦换成本地静态图片资源,加载就出现了问题,图片碎裂,无法加载。使用url链接时,图片正常动态加载:<template> <van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe-item v-f...原创 2019-11-24 13:07:27 · 7089 阅读 · 6 评论 -
vue报错:The template root requires exactly one element
这段话的意思是:根模板必须有一个准确的元素。在vue组件中会使用template标签,在template中,还需要一个标签元素将其他标签元素包裹起来,因为template标签是不会被DOM解析,生成DOM元素的时候会被隐藏。//helloWorld.vue//正确写法<template> <div> <h1>我是h1</h1> &l...原创 2019-11-22 10:42:58 · 1168 阅读 · 0 评论 -
vue脚手架vue-cli的卸载和安装
若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-cli的版本为2.9.6,然后我想升级到vue-cli的最新版本4.0.5,则需要将旧版本卸载,然后再重新安装@vue/cli。vue-cli:vue3.0之前版本使用此名称@vue/cli:vue3.0之后版本包括3.0版本使用此名称以下列举npm和yarn指令的方式:卸载指令://卸载3.0之前的版本npm ...原创 2019-11-22 09:12:50 · 20949 阅读 · 6 评论 -
Vue基本指令v-cloak的使用
v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和 { display:none } 配合使用:<div id="app" v-cloak> {{ message }}</div><script> var app = new Vue({ el:"#app", data:{ message:"这是一段文...原创 2019-11-15 10:34:59 · 737 阅读 · 0 评论 -
vuex的使用
1、 Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。2.、Vuex中默认的五种对象:① State:存储状态(变量)② Mutation:修改状态,并且是同步的。③ Action:异步操作。④ Getter:state的计算属性,它的作用主要是用来派生出一...原创 2019-10-23 15:13:50 · 280 阅读 · 0 评论 -
vue2中使用proxy遇到问题:Uncaught (in promise) Error: Request failed with status code 404
遇到问题首先缩小范围确定问题原因。我用postman调接口有正确的返回值,说明与后台无关;肯定是前端配置问题;报404那有可能是接口问题,查询接口是否正确,嗯?……我查不出来!查询请求头信息,发现请求地址是正确的,这里就触及到了我的知识盲点:pathRewrite的使用控制台Request URL: http://localhost:8888/fundq/queryAssetListPa...原创 2019-09-20 12:07:29 · 14743 阅读 · 2 评论 -
Vue2使用proxy跨域问题:‘http://localhost:8888‘ has been blocked by CORS policy:
第一次进行vue的框架搭建,遇到了太多的坑,只能一边跳坑,一边填坑,希望最后别把自己给埋了。以下是在使用proxy代理设置跨域时的问题:解决方法:在src/utils/request.js文件中将baseURL注释掉便可以,因为既然已经配置代理了,axios就不需再设置baseURL了,不然就不会经过代理处理。// create an axios instanceconst servi...原创 2019-09-20 10:42:46 · 6647 阅读 · 0 评论 -
VUE启动问题(You may use special comments to disable some warnings)
vue启动时出现以下问题:出现问题的原因:Eslint的检测机制。解决方法①:在build/webpack.base.conf.js文件中注释掉第44行代码,如下图,重新yarn start 或者npm run dev解决方法②:在config/index.js文件中第26行中的useEslint的值改为false,如下图,然后重新启动程序...原创 2019-09-05 08:56:34 · 20162 阅读 · 10 评论