草庐IT

vue-cli-3

全部标签

Vue3+springboot通过websocket实现实时通信

本文章使用vue3+springboot通过websocket实现两个用户之间的实时通信,聊天信息使用mongodb非关系型数据库进行存储。效果图如下:用户发送信息 农户收到信息并发送回去后台消息打印Springboot引入依赖org.springframework.bootspring-boot-starter-websocketcn.hutoolhutool-all5.8.7org.slf4jslf4j-api 配置在config目录下,创建WebSocketConfig类importorg.springframework.context.annotation.Bean;importorg

手把手从安装本地虚拟机,基于docker,部署springboot+vue项目(若依框架前后端分离版本演示),基于openjdk的dockerfile

目录1.安装本地虚拟机centos2.安装docker,拉取镜像,创建容器3.打包部署后端4.配置nginx5.打包部署前端6.常见问题汇总1.安装本地虚拟机centos部署环境提供vm16,和centos7,其中把镜像改成.iso文件就可以了阿里云链接:https://www.alipan.com/s/BTnpjuHWtEp为什么用阿里云,不限速啊,秉持着开源白嫖的精神新建虚拟机选择镜像创建用户设置虚拟机存存放位置默认下一步自定义硬件选了扩大一下内存,扩不扩无所谓检查下网络设置然后完成,自动会开机,只需要等再等登录2.安装docker,拉取镜像,创建容器有机桌面,打开终端yum-config

VsCode中Vue代码格式插件,Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置

一、插件的介绍与安装1、Vetur插件Vetur是一款Vue代码高亮显示的一款插件,在没有使用此插件前,以.vue的文件名代码是没有颜色的!!!安装步骤:在扩展商店中搜索(Vetur)点击安装2、ESLint插件  ESLint插件主要用来检测代码的语法格式,以便我们规范书写,避免因编译所发生的错误。安装步骤:在扩展商店中搜索(ESLint)点击安装3、Prettier-Codeformatter插件该插件主要用于格式化代码在在扩展商店中搜索(Prettier-Codeformatter)点击安装二、相关文件配置1、在安装完以上插件后,进入VsCode设置面板 2、点击按钮打开json文件3、

【项目笔记】微信小程序的开发大致过程-----前端使用Vue技术,使用HBuilder+微信开发者工具

提示:该笔记是在前面的前端Vue+后端springbootmybatis-plus的知识基础上进行微信小程序的入门讲解文章目录前言一、准备1.下载HBuilder软件、微信开发者工具2.找到微信开发ID二、初步开始1.创建项目2.安装插件3.创建一个新的页面3.13.2使用uni-ui的扩展组件:滚动条3.3使用uni-ui的扩展组件:轮播图3.4工具类utils3.5请求后端拿到数据测试4.主页面index》vue底部设置三个按钮,每个按钮对应不同页面4.1设置按钮图标4.2切换页面4.3图标的是否选中样式不同三、源码:结束语前言此篇笔记记录的是:使用VUE以及Springboot+myba

Angular-CLI 1.2.0生成在Android WebView(在某些设备上)中失败的代码,但是Angular-CLI Beta.25没有

我已经花了几天的时间来追踪一个问题,并将其剥离为可再现的东西,但是我不了解基本技术来在没有帮助的情况下取得进一步的进展。本文底部的详细问题。设置我生成两个具有两个不同版本的Angular-CLI的空角应用。我在(a)台式机上的浏览器,(b)平板电脑和(c)机顶盒上的浏览器中以各种配置(1)运行这两个应用程序。我还在(b)Android平板电脑和(c)机顶盒的Android应用程序的网络视图中运行它们(2)。结果CLI-BETA:Angular-CLI1.0.0-Beta.25.5生成的代码浏览器(所有平台:案例1A,1B,1C):确定Android平板电脑上的WebApp(情况2B):确定An

VUE3开源项目

_开源项目后台系统解决方案_1.vue-element-plus-admin后台系统一套基于vue3、element-plus、typesScript4、vite2的后台集成方案https://element-plus-admin-doc.cn/https://element-plus-admin-doc.cn/guide/introduction.html2.VbenAdmin后台系统Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue、TypeScript的后台解决方案https://vvbin.cn/doc-next/?from=thosefree.

vue + element 实现鼠标左右滑动效果

我用了element中的走马灯+overflow-x:auto;html(复制后格式化一下) {{item}} .scroll{ width:100%; user-select:none; overflow-x:auto; white-space:nowrap; }jsmounted(){ this.entrance=document.querySelector('#entrance')},methods:

vue报错:Uncaught SyntaxError: Unexpected token <也就是前端的js请求响应数据是html格式的原因和解决方法

“UncaughtSyntaxError:Unexpectedtoken<”错误通常出现在浏览器的开发者工具(console)中,它表示在解析JavaScript代码时遇到了意外的字符。这个错误通常是由以下几种情况引起的:代码中的被错误地识别为HTML标签的开始:这通常发生在在引用外部JavaScript文件时,浏览器误将JavaScript文件内容当作HTML标签解析,从而导致错误。引用错误的文件:如果在页面中引用的JavaScript文件不存在或路径错误,浏览器将无法正确加载该文件,导致报错。服务器返回错误的数据:如果请求的JavaScript文件实际上返回的是错误的内容,例如服务器

Vant简介及创建Vue项目并使用Vant

文章目录一、Vant简介介绍特性​安装二、在Vue项目中使用Vant1、创建Vue项目1.搭建开发环境1.1安装Node.js1.2配置npm源2.安装VUECli3.创建第1个VUECLI工程3.1创建工程3.2启动服务3.3停止服务3.4重启服务2、安装Vant的支持到Vue项目中1.安装Vant支持2.添加Vant引用一、Vant简介                                  🔥文档网站(国内)🌈文档网站(GitHub)介绍Vant是一个轻量、可定制的移动端组件库,于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本,并由社区团队维护

使用 vve-i18n-cli 来一键式自动化实现国际化

【Github:vue-viewer-editor/vve-i18n-cli】这是我同事开发的国际化自动处理脚本,我进行过一次扩展,让其也支持我们一个jQuery老项目的国际化日常维护至此,我们团队内的国际化均是使用该脚本来进行日常维护该自动化脚本极大的为我们提效,基本将国际化的词条相关工作降低到0了,这意味着我们基本上不用特意留出太多时间来处理国际化方面的工作但是,国际化其实不只有词条相关的工作,至于还有哪些工作,我之前发表过一篇《项目国际化的难点痛点是什么》里面吐槽得很清晰了不可否认的是,如果没有这个自动化脚本,根本就没法在领导期望的时间内完成国际化的工作自从有了这个脚本后,从以前的跟领导