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

手写MVVM框架-环境搭建

news 来源：原创 2025/5/15 2:51:20

项目使用 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 进行进行构建，初始化步骤如下: 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.配置webpac…...

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

SQL进阶实战技巧：某芯片工厂设备任务排产调度分析 | 间隙分析技术应用

目录 0 技术定义与核心原理 1 场景描述 2 数据准备 3 间隙分析法步骤1：原始时间线可视化...

编程日记 2025/5/15 2:51:18

[HOT 100] 0167. 两数之和 ||

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 167. 两数之和 II - 输入有序数组 - 力扣（LeetCode） 2. 题目描述给你一个下标从 1 开始的整数数组 numbers ，该数组已按非递减顺序排列 &…...

编程日记 2025/5/14 21:24:51

CSS整体回顾

一. 邂逅CSS和常见的CSS 1.1. CSS的编写方式 1.2. 常见的CSS font-size/color/width/height/backgroundColor 二. 文本属性 2.1. text-decoration 2.2. text-indent 2.3. text-align 三. 字体属性 3.1. font-family 3.2. font-style 3.3. font-weight 3.4. font-size 3.5. …...

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

使用 Grafana 和 Prometheus展现消息队列性能

引言上篇文章通过JMX提取Kafka数据，本篇文章将通过JDBC存储Kafka性能数据存储于数据库，并通过Grafana 和 Prometheus进行展示，实现开发中常用的可视化监控 1. 环境准备 Kafka：运行中的 Kafka 集群，确保可以…...

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

openssl 生成证书 windows导入证书

初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。这些代码大部分以Linux为目标但部分代码是纯C的，可以在任何平台上使用。源码指引：github源…...

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

Skyeye 云 VUE 版本 v3.15.6 发布

Skyeye 云智能制造，采用 Springboot winUI 的低代码平台、移动端采用 UNI-APP。包含 30 多个应用模块、50 多种电子流程，CRM、PM、ERP、MES、ADM、EHR、笔记、知识库、项目、门店、商城、财务、多班次考勤、薪资、招聘、云售后、论坛、公告、问卷、报表…...

编程日记 2025/5/15 2:51:02

25.2.3 【洛谷】作为栈的复习不错（学习记录）

今天学习的东西不算多，放了一个星期假，感觉不少东西都没那么清楚，得复习一下才行。今天搞个栈题写，把栈复习一下，明天进入正轨，边复习边学习新东西，应该会有二叉树的学习等等... 【洛谷】P1449 …...

编程日记 2025/5/14 16:49:24

【C++】线程池实现

目录一、线程池简介线程池的核心组件实现步骤二、C11实现线程池源码三、线程池源码解析1. 成员变量2. 构造函数2.1 线程初始化2.2 工作线程逻辑 3. 任务提交(enqueue方法)3.1 方法签名3.2 任务封装3.3 任务入队 4. 析构函数4.1 停机控制 5. 关键技术点解析5.1 完美转发实现5…...

编程日记 2025/5/14 3:53:07

大模型领域的Scaling Law的含义及作用

Scaling Law就像是一个“长大公式”，用来预测当一个东西（比如模型）变大（比如增加参数、数据量）时，它的性能（比如准确率）会怎么变化。它能帮助我们提前知道，增加多少资源…...

编程日记 2025/5/15 2:50:53

用FormLinker实现自动调整数据格式，批量导入微软表单

每天早上打开Excel时，你是否也经历过这样的噩梦？ 熬夜调整好的问卷格式，导入微软表单后全乱套客户发来的PDF反馈表，手动录入3小时才完成10% 200道题库要转为在线测试，复制粘贴到手指抽筋微软官方数据显示&#xf…...

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

C#，shell32 + 调用控制面板项（.Cpl）实现“新建快捷方式对话框”（全网首发）

Made By 于子轩，2025.2.2 不管是使用System.IO命名空间下的File类来创建快捷方式文件，或是使用Windows Script Host对象创建快捷方式，亦或是使用Shell32对象创建快捷方式，都对用户很不友好，今天小编为大家带来一种全新…...

编程日记 2025/5/14 7:22:10

洛谷 P11626 题解

[Problem Discription] \color{blue}{\texttt{[Problem Discription]}} [Problem Discription] 给定长度为 n n n 的数组 A 1 ⋯ n A_{1 \cdots n} A1⋯n，求 ∑ a 1 n ∑ b a 1 n ∑ c b 1 n ∑ d c 1 n ∑ e d 1 n ∑ f e 1 n ∑ g f 1 n ( gcd …...

编程日记 2025/5/15 2:50:41

Android学习制作app（ESP8266-01S连接-简单制作）

一、理论部分理论见arduino学习-CSDN博客和Android Studio安装配置_android studio gradle 配置-CSDN博客以下直接上代码和效果视频，esp01S的收发硬件代码目前没有分享，但是可以通过另一个手机网络调试助手进行模拟。也可以直接根据我的代码进行改动…...

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

一文读懂 RAG：LLM 借助检索打开思路

一、引言在自然语言处理（NLP）领域，随着深度学习技术的飞速发展，大型语言模型（LLMs）展现出了强大的语言理解和生成能力。然而，LLMs也存在一些局限性，如容易产生幻觉、知识更新不及时…...

编程日记 2025/5/12 22:32:50

使用istio实现权重路由

istio概述 **概述：**Istio 是一个开源的服务网格（Service Mesh）解决方案，主要用于管理、保护和监控微服务架构中的服务通信。它为微服务提供了基础设施层的控制功能，不需要更改应用程序的代码，从而解决服…...

编程日记 2025/5/13 12:42:11

DeepSeek发布新模型，遭遇大规模攻击，梁文锋回应证实为假，吴恩达盛赞DeepSeek！AI Weekly 1.27-2.2

📢本周AI快讯 | 1分钟速览🚀 1️⃣ 🖼️Janus-Pro-7B：DeepSeek发布7B开源多模态模型，视觉理解&生成能力超越DALL-E 3！ 2️⃣ 🚨DeepSeek遭遇大规模攻击：DDoS暴力破解&#xff…...

编程日记 2025/5/10 16:14:06

20250202在Ubuntu22.04下使用Guvcview录像的时候降噪

20250202在Ubuntu22.04下使用Guvcview录像的时候降噪 2025/2/2 21:25 声卡：笔记本电脑的摄像头自带的【USB接口的】麦克风。没有外接3.5mm接口的耳机。缘起：在安装Ubuntu18.04/20.04系统的笔记本电脑中直接使用Guvcview录像的时候底噪很大！ …...

编程日记 2025/5/12 9:00:37

直方图：摄影中的视觉数据指南

目录一、直方图基础：揭开它的神秘面纱二、解读直方图类型：亮度与色彩的密码 （一）亮度直方图 （二）RGB 直方图三、拍摄中巧用直方图：优化曝光与效果 （一）精准判断曝…...

编程日记 2025/5/13 10:08:03

OpenGL学习笔记（七）：Camera 摄像机（视图变换、LookAt矩阵、Camera类的实现）

文章目录摄像机/观察空间/视图变换LookAt矩阵移动相机（处理键盘输入）移动速度欧拉角移动视角（处理鼠标输入）缩放场景（处理滚轮输入）Camera类摄像机/观察空间/视图变换在上一节变换中，我们讨…...

编程日记 2025/5/12 10:30:47

冲刺一区！挑战7天完成一篇趋势性分析GBD DAY1-7

Day1. 公开数据库的挖掘太火热了,其中GBD数据库的挖掘又十分的火爆.那我就来挑战一篇GBD、一篇关于趋势性分析的GBD！ GBD数据库挖掘是目前的四大刊常客，经常出现在顶级期刊上面。这个数据库亮点就是：可视化，统计学简单、而数据可…...

编程日记 2025/5/13 10:56:02

解锁数据结构密码：层次树与自引用树的设计艺术与API实践

1. 引言：为什么选择层次树和自引用树？ 数据结构是编程中的基石之一，尤其是在处理复杂关系和层次化数据时，树形结构常常是最佳选择。层次树（Hierarchical Tree）和自引用树（Self-referencing Tree…...

编程日记 2025/5/10 16:13:46

【AudioClassificationModelZoo-Pytorch】基于Pytorch的声音事件检测分类系统

源码：https://github.com/Shybert-AI/AudioClassificationModelZoo-Pytorch 模型测试表模型网络结构batch_sizeFLOPs(G)Params(M)特征提取方式数据集类别数量模型验证集性能EcapaTdnn1280.486.1melUrbanSound8K10accuracy0.974, precision0.972 recall0.967, F1-s…...

编程日记 2025/5/12 11:58:43

ARM嵌入式学习--第十二天（WDOG，RTC）

--WDOG -介绍 WatchDog是为了能够防止程序跑飞而使用的一种硬件模块，如果你的程序没有跑飞，那么你的程序会定时的去喂看门狗；如果你的程序跑飞了，那么就不会再去喂狗了，如果超过了喂狗时间，那么狗就会自己…...

编程日记 2025/5/13 9:24:24

自动化构建-make/Makefile 【Linux基础开发工具】

文章目录一、背景二、Makefile编译过程三、变量四、变量赋值1、""是最普通的等号2、“:” 表示直接赋值3、“?” 表示如果该变量没有被赋值，4、""和写代码是一样的， 五、预定义变量六、函数**通配符** 七、伪目标 .PHONY八、其他常…...

编程日记 2025/5/10 0:18:57

三天急速通关JavaWeb基础知识：Day 2 前端基础知识（计划有变，前端工程化部分暂时搁置）

三天急速通关JavaWeb基础知识：Day 2 前端基础知识 0 文章说明1 HTML1.1 介绍1.2 基本结构及语法1.3 常见标签2 CSS2.1 介绍2.2 引入方式2.3 选择器2.4 浮动定位盒子模型 3 JavaScript3.1 介绍3.2 组成3.3 基础语法 4 Ajax4.1 介绍4.2 示例未完待续，前…...

编程日记 2025/5/12 23:14:15

Chapter2 Amplifiers, Source followers Cascodes

Chapter2 Amplifiers, Source followers & Cascodes MOS单管根据输入输出, 可分为CS放大器, source follower和cascode 三种结构. Single-transistor amplifiers 这一章学习模拟电路基本单元-单管放大器单管运放由Common-Source加上DC电流源组成. Avgm*Rds, gm和rds和…...

编程日记 2025/5/13 15:44:51

14-9-3C++STL的set容器

set容器的pair对组——set容器set.equal range(elem) 1.返回容器中与elem相等的上下限的两个迭代器；上限是闭区间，下限是开区间，如[beg, end) 2.函数返回两个迭代器，而这两个迭代器被封装在pair中 pair< set<int>::ite…...

编程日记 2025/5/12 5:10:01

用Impala对存储在HDFS中的大规模数据集进行快速、实时的交互式SQL查询的具体步骤和关键代码

AWS EMR（Elastic MapReduce）中应用Impala的典型案例，主要体现在大型企业和数据密集型组织如何利用Impala对存储在Hadoop分布式文件系统（HDFS）中的大规模数据集进行快速、实时的交互式SQL查询。以下是一个具体的案例说明…...

编程日记 2025/5/15 3:12:17

如何确认Linux嵌入式系统的触摸屏对应的是哪个设备文件(/dev/input/event1)？如何查看系统中所有的输入设备？输入设备的设备文件有什么特点？

Linux嵌入式系统的输入设备的设备文件有什么特点？ 在 Linux 中，所有的输入设备（如键盘、鼠标、触摸屏等）都会被内核识别为输入事件设备，并在 /dev/input/ 目录下创建相应的设备文件，通常是： …...

编程日记 2025/5/14 8:02:03

C++泛型编程指南08 auto decltype

文章目录 [TOC]第3章：auto占位符（C11～C17）3.1 auto关键字的重新定义3.2 类型推导规则 3.3 何时使用auto3.4 返回类型推导3.5 在Lambda表达式中使用auto3.6 非类型模板参数占位符总结第4章 decltype说明符（C11&#xf…...

编程日记 2025/5/13 14:30:44

php的使用及 phpstorm环境部署

php语法环境搭建：在小皮中新建网站，注意先填写域名再点击选择根目录。成功创建网站后，打开发现forbidden，因为新建的网站里是空的，需要新建index.php文件----> 在Phpstorm中左上角打开文件，打开那个文…...

编程日记 2025/5/15 0:52:58

人工智能学习（五）之机器学习逻辑回归算法

深入剖析机器学习逻辑回归算法一、引言在机器学习领域，逻辑回归是一种极为经典且应用广泛的算法。虽说名字里带有 “回归”，但它主要用于解决分类问题，在医学、金融、互联网等多个领域都发挥着关键作用。例如，在医学上辅助判断…...

编程日记 2025/5/14 13:24:29

Kubernetes学习之包管理工具（Helm）

一、基础知识 1.如果我们需要开发微服务架构的应用，组成应用的服务可能很多，使用原始的组织和管理方式就会非常臃肿和繁琐以及较难管理，此时我们需要一个更高层次的工具将这些配置组织起来。 2.helm架构： chart:一个应用的信息集合…...

编程日记 2025/5/15 8:21:31

数据结构课程设计（四）校园导航

4 校园导航 4.1 需求规格说明【问题描述】一个学校平面图，至少包括10个以上的场所，每个场所带有编号、坐标、名称、类别等信息，两个场所间可以有路径相通，路长（耗时）各有不同。要求读取该校园平面图&a…...

编程日记 2025/5/14 9:47:36

(done) MIT6.S081 2023 学习笔记 (Day7: LAB6 Multithreading)

网页：https://pdos.csail.mit.edu/6.S081/2023/labs/thread.html (任务1教会了你如何用 C 语言调用汇编，编译后链接即可) 任务1：Uthread: switching between threads (完成) 在这个练习中，你将设计一个用户级线程系统中的上下文切…...

编程日记 2025/5/13 17:43:45

大年初六，风很大

北京的风在立春附近的几天突然大了，正在盘算着这个冬天可能就这样平庸的去了，没成想风来了。走在风中，穿着本应该是三九天穿的冬装，紧闭着嘴，缩着身子，感受着这冬天该有的低温。这是冬天该有的样子&#xf…...

编程日记 2025/5/12 13:39:29

【算法】回溯算法专题③ ——排列型回溯 python

目录前置小试牛刀回归经典举一反三总结前置【算法】回溯算法专题① ——子集型回溯 python 【算法】回溯算法专题② ——组合型回溯剪枝 python 小试牛刀全排列 https://leetcode.cn/problems/permutations/description/ 给定一个不含重复数字的数组 nums ，返…...

编程日记 2025/5/13 9:41:22

利用deepseek参与软件测试基本架构如何又该在什么环节接入deepseek

利用DeepSeek参与软件测试，可以考虑以下基本架构和接入环节： ### 基本架构 - **数据层** - **测试数据存储**：用于存放各种测试数据，包括正常输入数据、边界值数据、异常数据等，这些数据可以作为DeepSeek的输入&…...

编程日记 2025/5/13 5:38:18

99.20 金融难点通俗解释：中药配方比喻马科维茨资产组合模型(MPT)

目录 0. 承前1. 核心知识点拆解2. 中药搭配比喻方案分析2.1 比喻的合理性 3. 通俗易懂的解释3.1 以中药房为例3.2 配方原理 4. 实际应用举例4.1 基础配方示例4.2 效果说明 5. 注意事项5.1 个性化配置5.2 定期调整 6. 总结7. 代码实现 0. 承前本文主旨： 本文通过中…...

编程日记 2025/5/12 16:45:38

为AI聊天工具添加一个知识系统之79 详细设计之20 正则表达式之7

本文要点要点 “正则表达式” 本来是计算机科学计算机科学的一个概念。本项目将它推广（扩张）到认知科学的“认知范畴”概念， 聚合（收敛）到神经科学的“神经元”概念。做法是：用reg 来系统化定义认知…...

编程日记 2025/5/13 9:41:16

[ Spring ] Spring Boot Mybatis++ 2025

文章目录 StructureMyBatis Controller AbilitiesConfigure Plugins and RepositoriesApply Plugins and Add DependenciesMyBatis Spring PropertiesMyBatis ApplicationMyBatis BeansMyBatis MapperMyBatis Query Builder Structure this blog introduce 3 ways using mybat…...

编程日记 2025/5/13 5:24:47

执行npm run dev 访问http://localhost:3000

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

相关文章：