![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 57
woowen!
这个作者很懒,什么都没留下…
展开
-
【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问
1. projectA项目和projectB项目中均要保留index.html、main.ts/js 、App.vue 这三个文件可以直接复制粘贴src下的index.html、main.ts/js 、App.vue文件内容,需要注意的是main.ts路径引入的变化,以及路由的路径引入正确与否。公司有两个项目,UI界面以及框架是一致的,且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目:projectA和projectB项目,公共部分提取出来。3. 配置package.json。原创 2023-04-06 23:52:12 · 6094 阅读 · 6 评论 -
【vite+vue3】 多页面应用模式
访问地址变为localhost/src/project/portalProject/index.html。的值将仍然是 vite.config.js 文件所在的目录。因此,你需要把对应入口文件的。在开发过程中,简单地导航或链接到 src/project/projectA。注意⚠️在运维部署时,访问该html,需要多写点路径才能正常访问。- 将会按预期工作,与正常的静态文件服务器表现一致。如果你指定了另一个根目录,请记住,在解析输入路径时,假设你有下面这样的项目文件结构。npm run dev 即可。原创 2023-04-06 22:38:04 · 1468 阅读 · 0 评论 -
浏览器控制台报错:Cross origin requests are only supported for protocol schemes
安装好后,切换到index.html 所在的文件夹,运行 anywhere。使用anywhere(静态文件服务器),可以使用npm 安装。vue项目打包后,想要访问index.html。安装好后,右键要打开的文件,就会出现“主要就是本地file文件反问提示跨域。Live Server插件。翻译 2023-03-31 16:22:02 · 555 阅读 · 0 评论 -
【vue】前端获取用户真实IP地址 (外网IP地址)
1. 打开index.html原创 2022-11-28 16:11:57 · 3273 阅读 · 2 评论 -
element UI修改组件的默认样式-转载
element UI修改组件的默认样式,方法有三种:新建global.css,并在main.js中引入import “./assets/style/global.css”; 在单个xx.vue文件最后多写一对标签,即有两对style标签,一对有scoped,一对没有scoped。如果写在有scoped属性的style标签里:覆盖的样式不会生效! 通过deep属性去控制,可以不用新建style标签,最方便通过这三种方法,在文件中编写css去覆盖原来的样式,可以通过添加 !important 修饰符提转载 2022-05-17 09:18:16 · 1665 阅读 · 0 评论 -
基础 Element-plus-vite-vue3
这里搭建一个基础的Element-plus-vite-vue3 项目作为练习记录,后续还会继续更新该篇文章加入一些其他功能。这里使用pnpm替代npm1. pnpm的安装:# 这里指定了pnpm的版本 7.0.0npm install -g pnpm@next-7# npm install -g pnpm注意⚠️:pnpm 安装需要Node.js版本 >= 14.19.02. 安装好后验证pnpm是否安装成功pnpm -v #7.0.0如果你...原创 2022-05-07 09:50:26 · 1108 阅读 · 1 评论 -
.browserslistrc 文件解析
为什么需要:根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码,以提高代码的编译质量。支持的插件: 组件名 功能vv Autoprefixer postcss添加css前缀组件 bable-preset-env 编译预设环境 智能添加polyfill垫片代码 postcss-normalize转载 2022-05-05 17:39:34 · 1555 阅读 · 0 评论 -
vue 通过指令为按钮分配权限
自定义指令原创 2022-04-29 14:32:52 · 1592 阅读 · 0 评论 -
vue 项目 页面刷新404问题
vue页面访问正常,但是一刷新就会404的问题解决办法:第一种解决方法:将vue路由模式mode: 'history' 修改为 mode: 'hash'//router.js文件const router = new Router({ //mode: 'history', mode: 'hash', routes: [ { path: '/', redirect: '/login' }, { path: '/login', compon转载 2022-04-22 14:26:57 · 18099 阅读 · 11 评论 -
this.$set 为对象添加属性,更新视图
this.$set(obj, key, value)我理解的是:this.$set修改不存在data方法中的对象的属性,使得视图更新转载 2022-02-22 18:11:04 · 525 阅读 · 0 评论 -
vue 基于axios封装request接口请求——request.js文件
axios的封装使用原创 2022-02-15 14:40:28 · 22917 阅读 · 4 评论 -
vue(vue/cli)+ElementUI 项目解决首屏加载慢的问题
目录1. 路由懒加载实现2. 按需引入ElementUI3.Gizp压缩4. 隐藏彩蛋:去除.map(.map起辅助调试作用)文件的生成,以加速生产环境的构建1. 路由懒加载实现点击查看路由懒加载的实现以及prefetch预加载问题2. 按需引入ElementUI查看官方文档按需引入值得注意的一点是,.babelrc文件的配置.babelrc遇到的问题在这里:1.vue项目启动报错提示:Support for the experimental syntax .原创 2021-12-21 09:36:11 · 1357 阅读 · 0 评论 -
vue脚手架项目报: DevTools failed to load source map 开发者工具加载 source map 失败
控制台警报:DevTools failed to load source map: Could not load content for原创 2021-12-13 16:07:09 · 4582 阅读 · 5 评论 -
控制台警报:[vue-router] Duplicate named routes definition: { name: “xxx“, path: “xxx“ }
vue-router控制台警报第二个问题:子路由已经有相应的路由名字,父组件原创 2021-12-09 15:53:09 · 769 阅读 · 0 评论 -
vue 二次封装ElementUI table表格组件
el-table表格封装formatter:这个属性在列中如果使用插槽就会失效,所以我设置了两个列,如果有render方法说明单元格要内嵌代码,就是用特殊列,反之就是正常列,所以formatter和render不能同时使用...原创 2021-12-07 17:34:35 · 3843 阅读 · 0 评论 -
wangEditor 富文本编辑器的使用
前因:因公司动态新闻模块需要,不浪费开发人力、时间等成本,决定选择一款富文本编辑器,由运营人员来编辑文本实现新闻的发布后果:最终选择了wangEditorwangEditor 是一款基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。兼容常见的 PC 浏览器:Chrome,Firefox,Safar,Edge,QQ 浏览器,IE11。不支持移动端更多内容可查阅手册:Introduction · wangEditor 用户文档https:/原创 2021-11-17 18:33:16 · 948 阅读 · 0 评论 -
vue 父传子,子传父组件的多种方式;父组件直接调用子组件方法;子组件直接调用父组件方法
//父组件:<user-view ref="view" :dialog-visible="userViewVisible" @close="viewClose" />methods:{ view(row) { this.$refs.view.setUser(row); this.userViewVisible = true; },}// 子组件:user-viewmethods:{ setUse.原创 2021-11-08 14:12:40 · 5704 阅读 · 2 评论 -
Vue项目中 使用Videojs 展示.m3u8格式视频
vue项目中两种方案引入videoJS1. 在index.html 中引入:在本地把video-js.min.css,video.min.js,videojs-contrib-hls.min.js 三个文件down在本地,<html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="I..原创 2021-10-19 14:14:04 · 997 阅读 · 0 评论 -
前端 二进制流文件下载
下载文件,无非以下几种方式:第一种:后端直接返回文件url地址window.location.href = url第二种:后端返回二进制文件流地址我们先来看看后端返回的二进制文件流长什么样子:是一堆的乱码。。。那如何解决乱码???在ajax请求前通过设置responseType:‘blob’转化为blob对象在设置responseType:‘blob’以后,我们在看下接口会返回什么样的内容尼:上面图片看出,返回了blob对象!!!解决思路来了:前端通过创...原创 2021-10-09 16:30:49 · 778 阅读 · 0 评论 -
vue项目 如何解决浏览器缓存问题
目录1.什么是浏览器缓存2.浏览器缓存类型:3.浏览器缓存的优势与劣势:4. 浏览器缓存机制5.如何清除浏览器缓存在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑那问题就来了:每次清缓存很麻烦,怎样就不需要他们每次去手动清缓存呢?1.什么是浏览器缓存浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页原创 2021-08-13 15:05:13 · 12668 阅读 · 5 评论 -
vue项目启动报错:Support for the experimental syntax ‘jsx‘ isn‘t currently enabled
根据图中红色框中的提示语:大致意思就是需要你在.babelrc配置文件中 添加@vue/babel-preset-jsx即可步骤一:原创 2021-07-02 18:09:15 · 20793 阅读 · 15 评论 -
vue项目启动报错提示:Support for the experimental syntax ‘classProperties‘ isn‘t currently enable
EventBus事件总线的使用方式:原创 2021-07-02 17:55:04 · 594 阅读 · 0 评论 -
@vue/cli项目 路由懒加载的实现以及prefetch预加载问题
目录什么是懒加载?为什么需要懒加载?1 . vue异步组件技术 ==== 异步加载非懒加载: 懒加载:2.组件懒加载方案二 路由懒加载(使用import)3.webpack提供的require.ensure()4.路由懒加载代码实现后,由此引出的prefetch预加载问题使首屏加载变慢5.prefetch预加载的解决办法什么是懒加载? 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件为什...原创 2021-06-29 22:43:06 · 3451 阅读 · 3 评论 -
vue 基础组件的自动化注册 require.context
引子:在vue中我们将元素封装为组件,并进行多次复用,以此提高应用开发效率问题:但如果该组件被多个页面应用,却要在每个页面去引用一次,这样就会显得啰嗦并且代码重复,开发效率低,如何破局?答案来了:通过require.context全局注册基础的通用组件在components下新建baseComponentsRegister.js在main.js 中引入baseComponentsRegister.js在想使用基础组件的页面直接引用组件在components下新建baseCo原创 2021-06-03 14:29:45 · 338 阅读 · 1 评论 -
vue动态获取数据赋值给echarts图,但是图却没有显示出来
转载链接:https://blog.csdn.net/weixin_41804429/article/details/95361893 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式。 1.通过computed computed: { options() { let that = this; let option = { tool原创 2021-02-20 17:48:57 · 5660 阅读 · 3 评论 -
vue.ems.js报错提示: [Vue warn]: Error in render: “TypeError: Cannot read property ‘xxx‘of undefined
vue.ems.js报错提示: [Vue warn]: Error in render: "TypeError: Cannot read property 'xxx’of undefined父组件调用异步接口将数据传递给子组件转载 2021-02-20 16:43:20 · 645 阅读 · 0 评论 -
浏览器刷新页面导致vuex数据丢失问题如何解决?
Vuex刷新页面数据丢失vuex的数据是存储在内存中的当刷新浏览器时,会将内存释放清空数据此时可借助浏览器的本地存储localStoragesessionStorage在App.vue中:<template> <div> <router-view></router-view> </div></template><script>export default { c.原创 2020-12-29 22:58:15 · 2861 阅读 · 3 评论 -
vue结合elementUI实现tag多标签页
vue结合elementUI实现tag多标签页点击左侧菜单栏,会打开一个相应的tag标签页 点击tag标签可以在不同tag之间切换如图:以上图片的布局如下:<el-container> <BaseAside /> <el-main> <el-header> <AppTag /> </el-header> <el-mai原创 2020-12-26 23:06:06 · 15497 阅读 · 18 评论 -
vue-pdf 在线预览pdf(pdf地址或base64pdf)解决电子签章显示问题
使用vue-pdf在线预览pdf并使得带有电子签章的pdf能够正常预览出来1.安装vue-pdfnpm install vue-pdf //或者 yarn add vue-pdf2.新建pdf组件新建AppPdf.vue文件// AppPdf.vue<template> <div> <pdf v-for="i in numPages" :key="i" :page="i" :src="src"></pdf> <原创 2020-12-22 22:36:51 · 4644 阅读 · 6 评论 -
vue-cli 启动报错信息为getaddrinfo ENOTFOUND localhost
经查,发现package.json中dev的脚本变成了"webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",使用了webpack-dev-server出现此问题是因为webpack-dev-server启动时要指定ip,不能直接通过localhost启动,解决方法:修改config/index.js下dev配置中的host为ip:127.0.0.1(注意这里不能写成ht.转载 2020-07-30 09:46:08 · 912 阅读 · 0 评论 -
Module build failed (from ./node_modules/babel-loader/lib/index.js) babel-loader
解决问题:npm install -D babel-loader @babel/core @babel/preset-env webpack参考链接:https://github.com/babel/babel/issues/8599原创 2020-06-28 16:48:03 · 3649 阅读 · 0 评论