当前位置： 首页 > news >正文

手写MVVM框架-环境搭建

news 2026/2/8 11:20:37
项目使用 webpack 进行进行构建，初始化步骤如下:

1.创建npm项目执行npm init 一直下一步就行

2.安装webpack、webpack-cli、webpack-dev-server，html-webpack-plugin

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

3.配置webpack、 创建webpack.config.js 、配置启动命令

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',library: 'Aue' // 暴露一个全局变量},devServer: {hot: true,port: 3000},resolve: { // 解析规则extensions: ['.js'] // 在js文件中引用其他js文件可以不用写后缀名
},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public/index.html')})]
}
{"name": "mini-vue","version": "1.0.0","description": "","scripts": {"dev": "webpack-dev-server --config webpack.config.js","build": "webpack --config webpack.config.js --mode production"},"author": "","license": "ISC","devDependencies": {"html-webpack-plugin": "^5.6.3","webpack": "^5.97.1","webpack-cli": "^6.0.1","webpack-dev-server": "^5.2.0"}
}

创建调试的html页面

根目录创建public文件夹，并在文件夹内部创建index.html，里面的代码如下（bundle.js 是webpack打包的mvvm代码) 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="container">Hello World {{name}} {{description}}<div class="des">{{description}}</div></div><script src="./bundle.js"></script></body>
</html>

  • 创建webpack入口文件，目录在根目录 src/index.js 并在webpack中配置入口文件(webpack.config.js)
执行npm run dev 访问http://localhost:3000

Ok！webpack搭建完，下一步开始写代码！！！

相关文章：

手写MVVM框架-环境搭建

项目使用 webpack 进行进行构建&#xff0c;初始化步骤如下: 1.创建npm项目执行npm init 一直下一步就行 2.安装webpack、webpack-cli、webpack-dev-server&#xff0c;html-webpack-plugin npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin 3.配置webpac…...

编程日记 2025/2/5 15:44:20

2025年2月2日（网络编程 tcp）

tcp 循环服务 import socketdef main():# 创建 socket# 绑定tcp_server socket.socket(socket.AF_INET, socket.SOCK_STREAM)tcp_server.bind(("", 8080))# socket 转变为被动tcp_server.listen(128)while True:# 产生专门为链接进来的客户端服务的 socketprint(&qu…...

编程日记 2025/2/5 15:40:11

【Docker项目实战】使用Docker部署MinIO对象存储（详细教程）

【Docker项目实战】使用Docker部署MinIO对象存储 前言一、 MinIO介绍1.1 MinIO简介1.2 主要特点1.3 主要使用场景二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载MinIO镜像五、…...

编程日记 2025/2/5 15:36:04

使用ollama本地部署Deepseek r1

1、下载ollama 在浏览器地址输入&#xff1a;https://ollama.com/ 选择windows版本的下载 2、安装ollama 3、运行ollama 安装完成后&#xff0c;打开命令行工具win r 在命令行输入&#xff1a;ollama 4、使用ollama下载并部署Deepseed r1 在ollama网站&#xff0c;下载…...

编程日记 2025/2/5 15:35:03

Unity飞行代码 超仿真 保姆级教程

本文使用Rigidbody控制飞机&#xff0c;基本不会穿模。 效果 飞行效果 这是一条优雅的广告 如果你也在开发飞机大战等类型的飞行游戏&#xff0c;欢迎在主页搜索博文并参考。 搜索词&#xff1a;Unity游戏(Assault空对地打击)开发。 脚本编写 首先是完整代码。 using System.Co…...

编程日记 2025/2/5 15:34:01

DeepSeek蒸馏模型：轻量化AI的演进与突破

目录 引言 一、知识蒸馏的技术逻辑与DeepSeek的实践 1.1 知识蒸馏的核心思想 1.2 DeepSeek的蒸馏架构设计 二、DeepSeek蒸馏模型的性能优势 2.1 效率与成本的革命性提升 2.2 性能保留的突破 2.3 场景适应性的扩展 三、应用场景与落地实践 3.1 智能客服系统的升级 3.2…...

编程日记 2025/2/5 15:28:49

使用 sunshine+moonlight 配置串流服务无法使用特殊键

最近了解到串流技术&#xff0c;使用的方案是 sunshine 为串流服务端&#xff0c;moonlight 为客户端&#xff0c;分别在 ipad&#xff0c;android&#xff0c;tv 端安装。 存在的问题 不管说什么平台都会有特殊键无法使用的问题&#xff0c;最初我发现在安卓电视&#xff0c…...

编程日记 2025/2/5 15:26:47

5.角色基础移动

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 角色的xyz轴与移动方向拌合输入轴值add movement inputget controller rotationget right vectorget forward vector 发现模型的旋转改变后&#xff0c;xyz轴也会改变&#xff0c;所以需要旋转值来计算xyz轴方向。 …...

编程日记 2025/2/5 15:24:44

单细胞-第四节 多样本数据分析,下游画图

文件在单细胞\5_GC_py\1_single_cell\2_plots.Rmd 1.细胞数量条形图 rm(list ls()) library(Seurat) load("seu.obj.Rdata")dat as.data.frame(table(Idents(seu.obj))) dat$label paste(dat$Var1,dat$Freq,sep ":") head(dat) library(ggplot2) lib…...

编程日记 2025/2/5 15:23:43

Linux的循环,bash的循环

Linux的循环,bash的循环 在 Linux 系统中&#xff0c;Bash 循环是最常用的循环实现方式&#xff08;Bash 是 Linux 默认的 Shell&#xff09;&#xff0c;但广义上“Linux 的循环”可能涉及其他 Shell 或编程语言的循环结构。以下是 Bash 循环的详细解析及其在 Linux 环境中的…...

编程日记 2025/2/5 15:22:37

【DeepSeek开发】Python实现股票数据可视化

代码&#xff1a; Github&#xff1a;Python实现股票数据可视化代码https://github.com/magolan2000/Data-visualization/tree/master 软件环境&#xff1a;PyCharm 2022.3.1 数据来源&#xff1a;akshare 最近DeepSeek可谓是热度不断&#xff0c;因此想评判一下DeepSeek的编程…...

编程日记 2025/2/5 15:21:35

华为小米vivo向上，苹果荣耀OPPO向下

日前&#xff0c;Counterpoint发布的手机销量月度报告显示&#xff0c;中国智能手机销量在2024年第四季度同比下降3.2%&#xff0c;成为2024年唯一出现同比下滑的季度。而对于各大智能手机品牌来说&#xff0c;他们的市场份额和格局也在悄然发生变化。 华为逆势向上 在2024年第…...

编程日记 2025/2/5 15:17:30

毕业设计：基于深度学习的高压线周边障碍物自动识别与监测系统

目录 前言 课题背景和意义 实现技术思路 一、算法理论基础 1.1 卷积神经网络 1.2 目标检测算法 1.3 注意力机制 二、 数据集 2.1 数据采集 2.2 数据标注 三、实验及结果分析 3.1 实验环境搭建 3.2 模型训练 3.2 结果分析 最后 前言 &#x1f4c5;大四是整个大学…...

编程日记 2025/2/5 15:13:25

el-table表格点击单元格实现编辑

使用 el-table 和 el-table-column 创建表格。在单元格的默认插槽中&#xff0c;使用 div 显示文本内容&#xff0c;单击时触发编辑功能。使用 el-input 组件在单元格中显示编辑框。data() 方法中定义了 tableData&#xff0c;tabClickIndex: null,tabClickLabel: ,用于判断是否…...

编程日记 2025/2/5 15:11:22

数据结构:时间复杂度

文章目录 为什么需要时间复杂度分析&#xff1f;一、大O表示法&#xff1a;复杂度的语言1.1 什么是大O&#xff1f;1.2 常见复杂度速查表 二、实战分析&#xff1a;解剖C语言代码2.1 循环结构的三重境界单层循环&#xff1a;线性时间双重循环&#xff1a;平方时间动态边界循环&…...

编程日记 2025/2/5 15:10:22

SPI(Serial Peripheral Interface)串行外围设备接口

SPI概述&#xff1a; SPI协议最初由Motorola公司&#xff08;现为NXP Semiconductors的一部分&#xff09;在20世纪80年代中期开发。最初是为了在其68000系列微控制器中实现高速、高效的串行通信。该协议旨在简化微控制器与外围设备之间的数据传输。 1980年代&#xff1a;SPI协…...

编程日记 2025/2/5 15:07:16

Java 8 Stream API

通过 Stream.of 方法直接传入多个元素构成一个流 String[] arr {“a”, “b”, “c”}; Stream.of(arr).forEach(System.out::println); Stream.of(“a”, “b”, “c”).forEach(System.out::println); Stream.of(1, 2, “a”).map(item -> item.getClass().getName()…...

编程日记 2025/2/5 15:06:14

亚博microros小车-原生ubuntu支持系列：21 颜色追踪

背景知识 这个测试例子用到了很多opencv的函数&#xff0c;举个例子。 #cv2.findContours函数来找到二值图像中的轮廓。#参数&#xff1a;#参数1&#xff1a;输 入的二值图像。通常是经过阈值处理后的图像&#xff0c;例如在颜色过滤之后生成的掩码。#参数2(cv2.RETR_EXTERNA…...

编程日记 2025/2/5 15:05:12

GESP6级语法知识（六）：（动态规划算法（六）多重背包）

多重背包&#xff08;二维数组&#xff09; #include <iostream> using namespace std; #define N 1005 int Asd[N][N]; //Asd[i][j]表示前 i 个物品&#xff0c;背包容量是 j 的情况下的最大价值。 int Value[N], Vol[N], S[N];int main() {int n, Volume;cin &g…...

编程日记 2025/2/5 15:03:08

MySQL 事务实现原理( 详解 )

MySQL 主要是通过: 锁、Redo Log、Undo Log、MVCC来实现事务 事务的隔离性利用锁机制实现 原子性、一致性和持久性由事务的 redo 日志和undo 日志来保证。 Redo Log(重做日志)&#xff1a;记录事务对数据库的所有修改&#xff0c;在崩溃时恢复未提交的更改&#xff0c;保证事务…...

编程日记 2025/2/5 14:55:58

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10