vue
豪先生5
这个作者很懒,什么都没留下…
展开
-
Vue 项目build打包发布到giteepages ,首页正常显示,其他路由页面报错404的解决方法
一般这样就可以开始部署了,然后开启giteepages服务。如果出现了首页正常显示,其他页面显示404,那么需要在dist里面添加一个404.html文件,如下图。打包之后dist上传之后,还要新创一个.spa文件,注意!是 .spa 有个. 点,如下图。然后重新部署,重新查看页面(有时候没变化可能是缓存问题),一般就正常显示了。404.html内容和上图index.html内容一样,没错,就是一样。原创 2024-04-11 13:44:14 · 355 阅读 · 0 评论 -
Tauri网易云扫描二维码登录
【代码】Tauri网易云扫描二维码登录。原创 2023-01-04 17:11:31 · 567 阅读 · 0 评论 -
vue项目部署到Gitee Pages,接口出现403处理
如果是有自己的服务器,放自己网站上,可直接用axios部署就行,就可跳过api、untils这2个文件夹的操作。上面代码是引入刚才创建的untils文件夹里面的文件,untils里面的文件如下,可以直接复制。这样设置后,接口就设置完成了,接下来设置vue.config.js(项目没有就自己创建)vue.config.js设置好就进行打包,部署到gitee上就能正常使用了,vue.config.js里面设置部署gitee仓库。api文件夹里面的user.js文件内容。base.js 请求接口。原创 2022-12-30 15:33:35 · 935 阅读 · 0 评论 -
Tauri+Element-plus loading组件
【代码】Tauri+Element-plus loading组件。原创 2022-12-16 13:48:06 · 391 阅读 · 0 评论 -
Tauri+Element-plus修改组件样式(局部样式和全局样式)
在Vue2.x版本中,我修改element-ui组件样式用的是 >>> 来修改。这里记录下在Vue3cli中使用Element-plus,并修改组件样式用的是。这里的scoped表示这个页面的样式不会和(污染)其他页面的样式冲突。原创 2022-12-11 11:07:43 · 662 阅读 · 0 评论 -
Tauri 打开新窗口
因为tauri运行就开始加载所以窗口,我们的新窗口要通过点击才能打开,所以给test窗口添加visible:false 创建这个窗口并且隐藏test窗口(不激活test窗口)。每个窗口都有一个label标题,第一个窗口有默认label不需要自己设置。这种方法不需要在tauri.conf.json里面配置要打开的窗口配置,直接在前端调用创建窗口方法。在tauri.conf.json里面找到windows,在里面添加要打开新窗口的配置。第一个是主窗口,第二个是我们要创建的新窗口test页面。原创 2022-11-19 15:33:35 · 2480 阅读 · 1 评论 -
Tauri 打包
2022/11/3 样式丢失解决了,在阿里巴巴图标库下载的图标最好是用svg,我是暂时用这个打包之后显示正常。然后放在路径C盘/用户/当前账户/AppData/Local/tauri/WixTools。我们需要在tauri.conf.json里面查找identifier这个名称。说下其他的,Tauri感觉确实比electron的内存占用小,好用23333。我们就单独去下载这个包,就是在图中的Downloading网址,去下载下来。这里右上角最小化按钮和关闭按钮样式丢失了,原因在查找中····。原创 2022-11-19 15:30:55 · 1669 阅读 · 7 评论 -
Tauri 系统托盘图标
你的项目/src-tauri/src/main.rs。原创 2022-11-19 15:27:18 · 800 阅读 · 0 评论 -
Tauri 处理post、get接口
本文源地址: TAURI的http请求调用示例 - 简书 (jianshu.com)在文件中进行配置,配置代码示例如下:如上所示,将http的scope字段配置为这样,就可以调用任意的服务器地址的接口服务,杜绝了跨域问题。不过如果只有单一的服务器地址提供接口服务,根据官网的文档配置为相对的服务器路径就行。二、http不同请求类型的调用示例:1、常规的Get请求示例:2、常规的Post请求示例:转载 2022-11-19 15:26:03 · 1402 阅读 · 0 评论 -
Tauri 引入element-plus
(注意):element-plus在这里好像只能用ts引入才有效果,好像是element-plus只支持ts引入,用js引入会没有效果。效果图(switch按钮是element-plus的组件)element.vue代码。原创 2022-11-19 15:23:20 · 1867 阅读 · 0 评论 -
vue项目怎么在手机查看
可能,我们连接同一个网络以后,在手机浏览器输入第二个网址,发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的,一个是网络的。在手机浏览器地址栏输入第二个网址(这个时候再重新用手机查看vue项目第二个网址,就可以查看项目。【注意】:我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络,然后 关闭防火墙。启动一个项目之后,会出现两个网址,),我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】原创 2022-09-24 18:33:46 · 3958 阅读 · 0 评论 -
electron-builder 设置用户可以自己选择安装目录
electron-builder 设置用户可以自己选择安装目录原创 2022-08-15 19:03:53 · 3222 阅读 · 5 评论 -
electron 系统托盘图标路径问题
electron 系统托盘图标路径原创 2022-08-15 19:03:01 · 1524 阅读 · 0 评论 -
vue-socket.io
这时候服务端触发 socket.emit(‘news’, data)第一个参数就是给到客户端的名称,第二个就是上一个函数收到的结果,这里是原封不动返回出去,到了客户端里面再sockets这个对象里面就可以写上’new’的函数来接收,参数就是服务器给我们的数据,这里直接打印在控制台。监听是否有人连接,如果客户端有人连接了就会触发回调,注意:io.emit是群发,类似聊天群发送信息。这里写了一些跨域的配置,监听的端口号为。在 vue2.x 项目里安装。在main.js里面引入添加。就会收到一些所需的事件触发。.原创 2022-08-15 18:55:58 · 867 阅读 · 0 评论 -
electron vue 模仿qq登录界面
里面的resetMessage信息提示是我重新封装的element组件(我就不放上去了)因为electron12版本开始就废除了remote模块,我们需要自己安装。background.js里面有默认的配置,修改后我的配置大概如下。里面的最小化图标、关闭图标、最大化图标 请自己去。里面的最小化图标、关闭图标、最大化图标 请自己去。能在客户端实现 最大化、最小化、关闭功能。1、Login.vue页面(登录页面)3、Login_form.vue组件。5、package.json文件。...原创 2022-08-15 18:54:23 · 1678 阅读 · 6 评论 -
Vue使用electron创建桌面程序
问题1解决后,继续执行 打包, 可能会出现了一个新的问题,还是依赖包相关问题。13行的background.js文件在 src目录下(没有就自己创建一个)这个时候,我们手动把相关依赖包下载到本地,并且放到指定文件夹即可。在win-unpacked有个exe结尾的文件可以直接执行查看。上面,由于网络原因,不能够正常下载访问,所以影响打包操作。这里忘了说,隐藏菜单栏需要修改下配置文件内容,下次说;再继续遇见这样的,参考按前面2个方法解决看看。打包可能会出错,比如出现下图这些问题。这个问题是相关依赖包是在。...原创 2022-08-15 18:46:56 · 1439 阅读 · 0 评论 -
Vue前端配合fastadmin后端部署单域名设置
1、首先网站宝塔上搭建好网站,因为是单域名,所以需要把vue前端文件拉到public文件2、宝塔上面需要配置入口文件,这样域名默认域名就访问到了前端页面3、nginx配置,以下是我的配置,通过rewrite可以把vue前端图片以及后端还有接口进行转发location / { try_files $uri $uri/ /dist/index.html;}location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${ if (!-e $requ.原创 2022-05-11 19:00:36 · 1545 阅读 · 0 评论 -
Nuxt首屏加载使用loading动画
1、创建一个loading组件在components文件夹下创建Loading.vue(下面这种是故意使用setTimeout来延迟执行,给页面加载有时间渲染页面)根据在本地存储一个num,num为1,延迟8s后执行,num为2,延迟3s后执行注意:countTo是插件,如果不想用就注释这串代码,不影响components/Loading.vue代码:<template> <div class="app"> <div id="loade原创 2022-04-28 17:33:06 · 3451 阅读 · 4 评论 -
Vue首屏加载loading动画界面和路由跳转动画
1、首屏加载等待界面(1)在public的index.html里面的id为app的div标签里面添加<body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</st原创 2022-04-28 17:28:44 · 4002 阅读 · 0 评论 -
Vue使用scrollrevealjs
1、安装vuescrollrevealnpm install --save vue-scroll-reveal 2、在main.js里面引用import VueScrollReveal from 'vue-scroll-reveal';Vue.use(VueScrollReveal,{class: 'v-scroll-reveal', duration: 1000,scale: 1,distance: '0px',reset:true,mobile: false,useDe原创 2022-04-28 17:27:07 · 1078 阅读 · 5 评论 -
Nuxt判断手机端还是电脑端
nuxt.js 同一路由pc和移动端(1) 在pages下创建文件夹index(2) 在index文件夹下创建三个文件 index.vue 、 indexPc.vue 、 indexMobile.vue(3)文件内容。1、index.vue<template> <div> <component :is="component"></component> </div></temp原创 2022-05-11 18:56:55 · 2840 阅读 · 1 评论 -
Nuxt静态部署gitee
1、创建一个Nuxt项目如果有安装npm,可以直接npx create-nuxt-app <项目名>2、看个人爱好选择配置3、打包(1)服务渲染打包(SSR渲染)npm run build(*).nuxt文件在运行之后就自动出现在项目目录运行命令:npm run dev打包完,会出现在.nuxt文件里的dist(2)静态化打包npm run generate打包完,会出现在项目目录下面出现一个dist文件夹4、打包完部署到git原创 2022-04-28 17:23:20 · 1140 阅读 · 0 评论 -
Vue对meta优化
1、安装插件vue-metanpm install vue-meta --save//or 2个方法选1个cnpm install vue-meta --save2、在main.js配置import Meta from 'vue-meta';Vue.use(Meta);3、在对应的页面配置meta<script>export default { metaInfo: { title: '我是 index 页面的title', meta: [原创 2022-04-12 15:31:30 · 765 阅读 · 0 评论 -
vue使用预渲染prerender-spa-plugin
前言:vue单页面对seo不友好,所以我打算通过预渲染来解决下seo问题。目前我知道有2种方法,(1)SSR渲染(服务器)(2)prerender-spa-plugin插件预渲染(部分路由)(好像不能全部路由)在这里我使用的是第二个方法1、安装插件prerender-spa-pluginnpm install prerender-spa-plugin --save// or 2个中选1个方法安装npm install prerender-spa-plugin --save原创 2022-04-12 15:30:28 · 2398 阅读 · 4 评论 -
Vue2引入BootstrapVue
Bootstrap官网:Bootstrap中文网 (bootcss.com)BootstrapVue官网:BootstrapVue-基于VueJS的Bootstrap框架 · 全球最流行的 HTML、CSS 和 JS 工具库。 (z01.com)1、安装(vuecli3安装BootstrapVue)npm install bootstrap-vue2、引入(1)在main.js里面添加下面代码import BootstrapVue from 'bootstrap-vue'i..原创 2022-04-12 15:25:53 · 3369 阅读 · 2 评论 -
vue图片防止被拖拽
使用vue自带的事件在img标签上添加 @dragstart.prevent<img @dragstart.prevent src="·······"/>就能禁止图片被拖拽原创 2022-03-24 21:10:41 · 3369 阅读 · 0 评论 -
网页禁止缩放
原文链接:https://blog.csdn.net/qq_37896578/article/details/109327813<script> document.addEventListener('keydown', function (event) { if ((event.ctrlKey === true || event.metaKey === true) && (event.which === 61 || even...转载 2022-03-24 20:34:56 · 202 阅读 · 0 评论 -
Vue 项目 切换手机端和pc端。同一个项目,配置不同的路由
1, 首先判断设备:在main.js里面写// vue原型挂载 - 是否PC端if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { Vue.prototype.$pc = false //hostConfig.vconsole && new VConsole()} else { Vue.prototype.$pc = true let winWidth = d原创 2022-03-17 12:31:14 · 2711 阅读 · 0 评论 -
Vue项目打包的dist打包成apk的问题
使用HBuilder X(版本:)进行打包1、新建项目2、按下图点3、把我们vue项目打包好的dist(里面的文件放进去,覆盖下图4、记得去unpackage里面设置好,基本上全是默认,并选择好apk图标5、然后左上角第7个的 点击 (发行) 》 原生APP云打包(注意:dist文件大于40M要加钱,小于40M免费打包)(1)选择android包(2)公共测试证书(3)然后右下角安心打包6、然后=他打包完会出现一个apk7、用安卓手...原创 2022-03-17 11:59:32 · 1764 阅读 · 0 评论 -
Vue使用ajax(axios)请求后台数据
前言:页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它。vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:使用说明 · Axios 中文说明 · 看云 Axios安装前台部分1、npm安装npm i axios -S //......原创 2022-03-17 12:19:59 · 15358 阅读 · 0 评论 -
关于Vue2cli使用Vant、element-ui插件需要关注的事项
Vue2cli不能直接使用Vant组件的样式,我们可以通过安装111来解决,过程如下1、安装babel-plugin-importcnpm install babel-plugin-import --save2、在 .babelrc文件中增加以下代码 [“import”,{“libraryName”:”vant”,”style”:true}].babelrc文件全部代码如下:{ "presets": [ ["env", { "modules": false,.原创 2021-12-08 14:10:13 · 516 阅读 · 0 评论 -
Vue2创建项目过程
1、vue2cli创建项目命令vue init webpack test //test是项目名称2、选择如下图配置(看个人情况选择,博主的选择供参考)3、这样就安装完成了原创 2021-12-08 14:06:53 · 317 阅读 · 0 评论 -
Vue2、Vue3cli怎么打包
Vue在打包上意外的简单,只需要你在文件命令行内输入npm run build就可以打包了,打包完之后会出现一个dist文件,这个文件就是我们打包的网页了,就可以到服务器上配置网页即可原创 2021-12-08 13:07:09 · 323 阅读 · 0 评论