先来看一下我们需要实现的效果是怎样的: 这里我们没有使用原生的 js 方法去实现, 而是使用的 Vue3 官方推荐的一个工具库 @vueuse/cor 中的 useMouseInElement 方法来实现放大镜的效果首先来看一下 useMouseInElement 这个方法的返回值有哪些, 会使用到哪些? 我们会使用到 elementX, elem
转载
2024-05-15 05:52:15
60阅读
最近有一个需求，就是web展示摄像头的实时画面，mentor让我先探索探索，所以我先测试一些小demo。 这里边个人想了一下啊，还是比较复杂的，包含推流和拉流等操作，还有延迟的问题要解决。 自己主要负责前端，所以先用vue-video-player播放了一下本地的视频，熟悉一下功能，然后进行流视频的测试。 下面是.m3u8直播流视频的展示代码步骤：安装插件npm install vue-video
转载
2024-04-05 10:27:24
43阅读
安装node环境通过下面链接下载安装node安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。安装淘宝镜像 淘宝镜像网址https://developer.aliyun.com/mirror/NPM?from=tnpm 或者，打开命令行工具，输入npm install
转载
2024-06-17 19:09:09
125阅读
在使用 npm 之前需要将镜像的地址替换为国内的镜像地址，这样可以使得下载更快，这里推荐使用（淘宝 npm 镜像地址） 使用说明：可以使用淘宝制定的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm：npm install -g cnpm --registry=https://registry.npm.taobao.org或者直接通过添加 npm 参数 alias 一个新命令：ali
转载
2024-06-15 10:23:01
44阅读
实现类淘宝放大镜效果前端小白一枚，最近在进行 vue 方面的学习，逛淘宝闲来无事想试试做个放大镜，结果虽然做出来了，但其中有一些问题让我无法解决，四处搜索也没有找到满意的答案，很是心烦，希望能有大佬帮忙解答，谢谢步骤思路对原图的显示空间（left）可以将显示原图的 img 换成 canvas，来对图片进行保护跟随鼠标移动时显示放大的指示区（鼠标层罩top）显示层罩区域选中放大的显示空间（right
VUE视频怎么分镜?VUE视频如何进行分镜编?现在，不少人都在使用VUE视频拍摄利器制作短视频，并且分享给朋友们。这款短视频软件非常的高大上，想要制作出有逼格的短视频学会用VUE视频进行分镜编时必要的。今天小编就给大家带了VUE视频如何进行分镜编的图文步骤详解。VUE视频如何进行分镜编我们先来欣赏一个用vue拍摄的分镜短视频1、打开软件，拍摄好视频之后点击【跳过】，接着点击箭头指示的图案。(如下图
转载
2023-12-18 20:30:22
44阅读
1.Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn/查看版本的两种方式1|node -v2|node -versionnpm install -g cnpm --registry=https://registry.npm.taobao.or
转载
2024-05-13 22:49:14
446阅读
整个过程分为如下几个步骤1、安装 vue 脚手架2、创建项目3、引入 bimface 响应的文件4、修改 App.vue 文件，实现页面渲染1. 安装 vue 脚手架这里还是使用 Vue CLI通过如下命令，全局安装 vue 脚手架工具npm install -g @vue/cli安装好之后，可以通过安装 nrm ，来切换镜像源，也可以直接进行下一步2. 创建项目找一个合适的目录，打开 cmd 或
转载
2024-04-11 08:16:02
292阅读
一、安装在命令行中执行：使用npm或者cnpm安装npm install animate.css --save 或 cnpm install animate.css --save二、引入在main.js全局引入import animate from 'animate.css'
...
...
Vue.use(animate)//记得引入使用三、页面使用在index.vue中<templat
可以简单的这样理解：没有 key 属性，状态默认绑定的是位置，有 key 时，状态根据key的值绑定到了相应的数组元素上。之所以加上key是因为
vue源码是内部数据驱动，通过改变数据进而达到改变视图，加上key这样算法更容易定位到相应的元素，避免去遍历DOM造成的性能的消耗。例不加 key 的<div>
<input type="text" v-model='name'>
转载
2024-09-26 19:56:27
29阅读
Vue2 目录Vue21、总结2、脚手架2.1、安装2.2、卸载3、创建项目3.1、如果项目已经存在再vue create4、库 1、总结Vue项目的创建先安装脚手架在创建项目2、脚手架2.1、安装安装【了解】安装指令: npm install -g @vue/cli指令意思：安装脚手架
install：安装
-g：全局
@vue/cli：Vue的脚手架淘宝镜像【重要】一般安装都比较慢，建议下载淘
转载
2024-04-03 10:06:43
82阅读
# 如何将Vue项目打包镜像到Docker
## 介绍
在现代Web开发中，Vue是一个非常流行的前端框架。而Docker则是一个用于构建、发布和运行应用程序的开源平台。本文将介绍如何将Vue项目打包镜像到Docker中，以便在不同环境中轻松部署应用。
## 准备工作
在开始之前，您需要确保已经安装了Docker和Vue CLI。如果还没有安装，可以按照官方文档进行安装。
## 打包Vue项
原创
2024-04-20 06:35:07
79阅读
# Vue前端怎么打成Docker镜像
随着容器化技术的普及，Docker 已经成为前端项目部署的常用方式。Vue.js 是一个流行的前端框架，本文将介绍如何将 Vue 项目打包成 Docker 镜像。
## 1. 准备工作
首先，确保你已经安装了 Docker 和 Node.js。Docker 用于构建和运行容器，Node.js 用于执行 Vue 项目构建。
## 2. Vue 项目构建
原创
2024-07-28 09:39:06
204阅读
笔者工作也有一些时间，需要用vue写项目时也总是项目组长已经把项目搭建好了，偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建，但是前提是必须要已经安装好了node和npm如果你还没安装这些东西，就先去安装再来学习搭建vue项目吧一、安装vue-cli1. 开启命令行，输入指令（Windows的命令行开启方法为 键盘上的 开始键 +
转载
2024-07-17 23:09:49
113阅读
linux操作系统第一章、linux简介一、Vmware虚拟机网络连接二、linux常用文件夹介绍三、文件权限第二章、常用命令一、基础命令二、帮助命令三、用户管理四、压缩和解压五、网络命令六、关机重启命令第三章、vim第四章、软件包管理一、RPM包管理二、yum在线管理RPM包三、源码包管理第五章、用户和用户组管理一、用户配置文件二、用户管理文件三、用户管理命令四、用户组管理命令第六章、权限管理
一、安装Node环境1.下载地址:https://nodejs.org/en/ 安装过程——详细步骤 下载后，若要改安装路径自行改，其他一直下一步下一步。二、搭建Vue环境1、为了提高我们的效率，设置使用淘宝的镜像：http://npm.taobao.org/ npm config set registry https:
转载
2024-03-25 22:35:09
441阅读
一、环境要求：node1、 下载链接:https://nodejs.org/en/2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 3、配置镜像先查看自己是否配置淘宝镜像，没有的话，先配置一下，一般公司项目的话还要配置一下代理 在终端中执行以下代码，配置淘宝镜像，配置完之后，同样执行npm config list 查看配
转载
2024-04-23 14:44:30
296阅读
实际项目中不一定都是一个后端对应一个前端，这时，共用后端就成为可能。本项目采用前后端分离开发，下面说说，如何部署的问题，这里采用整合部署打包成jar的方式，而非nginx部署。 首先部署第一个前端项目，即springboot+vue项目整合部署，和普通的项目整合部署相同。1. 前端使用npm run build命令打包好，然后把dist目录下打包好的文件，直接粘贴放在后端项目的 
转载
2023-10-14 09:05:20
280阅读
# Vue项目如何打包成Docker镜像
在将Vue项目部署到生产环境中时，将其打包成Docker镜像可以使部署过程更加简单和可重复。本文将介绍如何将Vue项目打包成Docker镜像，并提供代码示例来解决一个具体的问题。
## 问题描述
假设我们有一个Vue项目，需要将其打包成Docker镜像，并在生产环境中进行部署。我们希望能够通过简单的命令来构建和运行该镜像。
## 解决方案
###
原创
2024-01-21 05:44:37
205阅读
Vue3快速上手 vue3快速上手Vue3快速上手1.Vue3简介2.Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的
