草庐IT

jetty-maven-plugin

全部标签

uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了

想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果:微信小程序和抖音小程序等都支持:使用步骤如下第一步:下载插件包下载echarts插件包,并导入到项目中,然后使用插件中的组件创建容器,并导入数据就可以了。echarts插件包地址:echarts-DCloud插件市场如果你是使用hbuilder写的,可以直接导入,如果你是vscode写的,就下载压缩包:我这里将我下载好的zi

2023 uniapp( vue3 + TS )使用canvas生成海报并保存,taro/微信小程序也适用

有段时间没写vue了,有点生疏了......1、代码有注释,完整代码如下 import{onMounted,reactive,ref,watch}from"vue"; import{getImgBase64,drawRoundedRect,drawText,getSystemInfo}from"@/utils/canvas"; import{imageList}from'./utils' importtype{ImageListType}from'./utils' import{getAuthorize}from"@/utils"; //按钮样式 constbutt

【WebSocket项目实战】聊天室(前端vue3、后端spring框架)

最近我学习了WebSocket,为了更好地掌握这一技术,我决定通过做一个项目来巩固学习成果。在这个项目中,我将使用JavaScript和WebSocket来实现实时通信,让客户端和服务器端能够实时地传递和接收数据。通过这个项目,我希望能够更深入地了解WebSocket的工作原理,并且能够在实际应用中灵活运用这一技术。1.技术栈前端:vue3后端:spring框架2.项目实现1.前端1.项目初始化这里使用vueui创建vue项目,具体步骤可以参考这篇文章Vueui初始化项目2.项目目录自动生成的HelloWorld.vue文件可以删除,这里只用创建一个Chat.vue文件3.开发页面项目选择了A

使用HBuilder X开发Vue3+node+element-plus

开发Vue3有很多的工具,比如VSCode,它也非常的好用,本文主要使用HBuilderX开发。环境3个:Windows10Node安装1.打开官网,选择一个版本,进行安装Node.js2.选择路径,下一步就行了 3.输入命令可以看到版本node-v4.然后输入命令,安装国内的淘宝镜像,这样速度快点npminstall-gcnpm--registry=https://registry.npm.taobao.org 提示让我们升级,我们可升级,可不升级。5.我们选择升级,不升级的跳过此步骤输入绿色字体的命令npminstall-gnpm@9.1.26.然后输入命令进行全局安装cnpminstal

vue3检测是手机还是pc端,监测视图窗口变化

 1.超小屏幕(手机)768px以下2.小屏设备(平板)768px-992px3.中等屏幕(旧式电脑)992px-1200px4.大屏设备(现代电脑)1200px以上import{onMounted,ref}from'vue'constscreenWidth=ref(document.documentElement.clientWidth)constisPhone=ref(screenWidth.value{window.addEventListener('resize',()=>{screenWidth.value=document.body.offsetWidthisPhone.value

Webapck 解决:[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

1、问题描述:其一、报错为:[webpack-cli]Error:Cannotfindmodule'vue-loader/lib/plugin'中文为:[webpack-cli]错误:找不到模块“vue-loader/lib/plugin”其二、问题描述为:在项目打包的时候npmrunbuild,控制台报错,并抛出一个Cannotfindmodule'vue-loader/lib/plugin'的问题;其三、控制台报错的页面显示为:[webpack-cli]Failedtoload'D:\18otherProject\vue_todo\webpack.config.js'config[webp

Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router

项目代码同步至码云weiz-vue3-templateVueRouter是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。1.安装npmivue-router@42.集成1.新建两页面进行示例在src/view下新建home.vue和login.vue,内容如下:defineOptions({name:'V-home'})homepagelogin.vue里修改下对应name即可2.src下新建router文件夹index.ts作为路由入口,static.ts作为静态路由,modules内还可以放入其他类型路由,整体目录结构如下:src|+---

Vue2 Vue3 Scoped 样式穿透

概念主要是用于修改很多Vue常用的组件库(Element,Vant,AntDesigin),虽然配好了样式但是还是需要更改其他的样式,因为添加了scoped实现css模块化就需要用到样式穿透,更改组件的样式scoped的原理Vue中的scoped通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式私有化模块化的目的。简单示例代码如下.ipt{width:300px;margin:100px400px;}总结一下scoped三条渲染规则给HTML的DOM节点加一个不重复data属性(形如:data-v-

android - 错误 :Plugin with id 'com.github.dcendents.android-maven' not found

我在我的Android应用程序中使用这个库。(https://github.com/yazeed44/MultiImagePicker)之前,我是这样将它添加到我的项目中的:compile'net.yazeed44.imagepicker:imagepicker:1.3.0'据我所知,以这种方式导入的问题是我无法覆盖任何代码,因为在再次构建项目后我将丢失所有更改。(我需要更改一些代码)出于这个原因,我已经下载了源代码并将项目作为模块导入,名称为:'imagepicker'之后,我将这一行添加到我的应用程序build.gradle中:compileproject(':imagepicke

android - build.phonegap 插件不受支持 : cordova-plugin-whitelist @ 1

我已经将我的phonegape更新到5.3.7,现在在我运行android平台并尝试上传到build.phonegap.com后,我收到此错误pluginunsupported:cordova-plugin-whitelist@1。我不知道如何让它工作。我在谷歌上搜索但没有运气。如果你们中有人遇到这个问题并且知道如何解决它,请帮助我。提前谢谢。这是我的config.xmlHelloWorldHelloWorldsampleapplicationthatrespondstothedevicereadyevent.PhoneGapTeam 最佳答案