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

手写MVVM框架-环境搭建

article 2026/5/4 3:53:27

项目使用 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…...

编程日记 2026/5/3 3:48:13

论文阅读：Realistic Noise Synthesis with Diffusion Models

这篇文章是 2025 AAAI 的一篇工作，主要介绍的是用扩散模型实现对真实噪声的仿真模拟 Abstract 深度去噪模型需要大量来自现实世界的训练数据，而获取这些数据颇具挑战性。当前的噪声合成技术难以准确模拟复杂的噪声分布。我们提出一种新颖的逼真噪声合成…...

编程日记 2026/5/3 1:34:52

JVM监控和管理工具

基础故障处理工具 jps jps(JVM Process Status Tool)：Java虚拟机进程状态工具功能 1：列出正在运行的虚拟机进程 2：显示虚拟机执行主类(main()方法所在的类) 3：显示进程ID(PID，Process Identifier) 命令格式 jps […...

编程日记 2026/4/26 11:59:41

【TensorFlow】T1：实现mnist手写数字识别

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊 1、设置GPU import tensorflow as tf gpus tf.config.list_physical_devices("GPU")if gpus:gpu0 gpus[0]tf.config.experimental.set_memory_g…...

编程日记 2026/5/1 23:18:40

【ArcGIS_Python】使用arcpy脚本将shape数据转换为三维白膜数据

说明： 该专栏之前的文章中python脚本使用的是ArcMap10.6自带的arcpy（好几年前的文章），从本篇开始使用的是ArcGIS Pro 3.3.2版本自带的arcpy，需要注意不同版本对应的arcpy函数是存在差异的数据准备：准备一…...

编程日记 2026/4/27 11:02:58

动静态库的学习

动静态库中，不需要包含main函数文件分为内存级(被打开的)文件和磁盘级文件库每个程序都要依赖很多基础的底层库，本质上来说库是一种可执行代码的二进制形式，可以被载入内存执行静态库 linux .a windows .lib 动态库 linux .…...

编程日记 2026/4/28 17:00:23

Rapidjson 实战

Rapidjson 是一款 C 的 json 库. 支持处理 json 格式的文档. 其设计风格是头文件库, 包含头文件即可使用, 小巧轻便并且性能强悍. 本文结合样例来介绍 Rapidjson 一些常见的用法. 环境要求有如何的几种方法可以将 Rapidjson 集成到您的项目中. Vcpkg安装: 使用 vcpkg instal…...

编程日记 2026/4/28 10:14:52

DeepSeek的多模态AI模型-Janus-pro,可生图，可读图

简介 Janus-Pro 是由 DeepSeek 开发的一款多模态理解与生成模型，是 Janus 模型的升级版。它能够同时处理文本和图像，既能理解图像内容，又能根据文本描述生成高质量图像。Janus-Pro 的核心目标是通过解耦视觉编码路径，解决多模态理…...

编程日记 2026/5/3 10:48:43

Python爬虫实战：一键采集电商数据，掌握市场动态！

电商数据分析是个香饽饽，可市面上的数据采集工具要不贵得吓人，要不就是各种广告弹窗。干脆自己动手写个爬虫，想抓啥抓啥，还能学点技术。今天咱聊聊怎么用Python写个简单的电商数据爬虫。打好基础：搞定请求头别看爬虫…...

编程日记 2026/4/30 21:56:36

最短木板长度

最短木板长度真题目录: 点击去查看 E 卷 100分题型题目描述小明有 n 块木板，第 i ( 1 ≤ i ≤ n ) 块木板长度为 ai。小明买了一块长度为 m 的木料，这块木料可以切割成任意块，拼接到已有的木板上，用来加长木板。小明想让最…...

编程日记 2026/2/25 12:00:39

【人工智能】掌握图像风格迁移：使用Python实现艺术风格的自动化迁移

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界图像风格迁移（Image Style Transfer）是一种基于深度学习的计算机视觉技术，通过将一张图像的内容与另一张图像的艺术风格结合，生成一幅具…...

编程日记 2026/2/24 8:27:51

git submodules

当代码仓库中包含 .gitmodules 文件时，这意味着该仓库使用了 Git 子模块（Git Submodules）。.gitmodules 文件记录了子模块的相关信息，如子模块的仓库地址、路径等。若要在下载代码时一并同步子模块，可以按照以下几种常…...

编程日记 2026/4/30 7:27:42

7 与mint库对象互转宏（macros.rs）

macros.rs代码定义了一个Rust宏mint_vec，它用于在启用mint特性时，为特定的向量类型实现与mint库中对应类型的相互转换。mint库是一个提供基本数学类型（如点、向量、矩阵等）的Rust库，旨在与多个图形和数学库兼容。这个宏…...

编程日记 2026/4/17 3:04:25

游戏引擎 Unity - Unity 下载与安装

Unity Unity 首次发布于 2005 年，属于 Unity Technologies Unity 使用的开发技术有：C# Unity 的适用平台：PC、主机、移动设备、VR / AR、Web 等 Unity 的适用领域：开发中等画质中小型项目 Unity 适合初学者或需要快速上手的开…...

编程日记 2026/4/28 21:55:33

[openwrt]openwrt slaac only模式下部分终端无法获取到IPv6 DNS

问题描述 OpenWrt 中，如果启用了 RA 单播（ra_unicast），但部分终端无法获取到 DNS 信息问题分析 RA 单播的局限性并非所有终端都完全支持通过单播接收 RA 消息。部分终端可能无法正确解析单播 RA 中的 RDNSS（Recursive DNS Server）选项，从而导致无法获取 DNS 信息。终…...

编程日记 2026/3/19 3:17:39

Java 面试真题

本题适合一到三年 Java 开发 ，以下问题都是按照原面试官提问记录文章目录我要进大厂系列面试题二面我要进大厂系列面试题全部真题，欢迎投稿你的面试经验。本篇涉及基础较多，但要耐性看完。 JVM内存模型垃圾回收器用的哪个gc各个算法…...

编程日记 2026/4/14 2:34:02

验证工具：GVIM和VIM

一、定义与关系 gVim：gVim是Vim的图形界面版本，提供了更多的图形化功能，如菜单栏、工具栏和鼠标支持。它使得Vim的使用更加直观和方便，尤其对于不习惯命令行界面的用户来说。Vim：Vim是一个在命令行界面下运行的文本编…...

编程日记 2026/4/26 13:10:29

理解 C 与 C++ 中的 const 常量与数组大小的关系

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言文章目录 💯前言💯数组大小的常量要求💯C 语言中的数组大小要求💯C 中的数组大小要求💯为什么 C 中 const 变量可以作为数组大小💯进一步的…...

编程日记 2026/4/26 11:58:42

孟加拉国_行政边界省市边界arcgis数据shp格式wgs84坐标

这篇内容将深入探讨孟加拉国的行政边界省市边界数据，该数据是以arcgis的shp格式提供的，并采用WGS84坐标系统。ArcGIS是一款广泛应用于地理信息系统（GIS）的专业软件，它允许用户处理、分析和展示地理空间数据。在GIS领域…...

编程日记 2026/4/26 11:58:42

安心即美的生活方式

如果你的心是安定的，那么，外界也就安静了。就像陶渊明说的：心远地自偏。不是走到偏远无人的边荒才能得到片刻清净，不需要使用洪荒之力去挣脱生活的枷锁，这是陶渊明式的中国知识分子的雅量。如果你自己是好的男人或女人…...

编程日记 2026/5/3 7:49:53

APT (Advanced Package Tool) 安装与使用-linux014

APT (Advanced Package Tool) APT (Advanced Package Tool) 是一个用于管理 Debian 和 Ubuntu 系列 Linux 发行版上的软件包的工具。它简化了软件的安装、升级、配置和删除过程。APT 为用户提供了一个统一的命令行接口，使得管理和安装软件变得更加简单。 APT 主要…...

编程日记 2026/4/30 4:59:02

深度学习篇---深度学习中的超参数张量转换模型训练

文章目录前言第一部分：深度学习中的超参数1. 学习率（Learning Rate）定义重要性常见设置 2. 批处理大小（Batch Size）定义重要性常见设置 3. 迭代次数（Number of Epochs）定义重要性常见设置 4. 优…...

编程日记 2025/8/19 13:24:06

Java设计模式：行为型模式→状态模式

Java 状态模式详解 1. 定义状态模式（State Pattern）是一种行为型设计模式，它允许对象在内部状态改变时改变其行为。状态模式通过将状态需要的行为封装在不同的状态类中，实现对象行为的动态改变。该模式的核心思想是分离不同状态…...

编程日记 2026/4/26 11:58:52

快速幂，错位排序笔记

记一下刚学明白的快速幂和错位排序的原理和代码快速幂原理： a^b (a^（b/2）) ^ 2（b为偶数） a^b a*（a^（ (b-1)/2））^2（b为奇数） 指数为偶数时…...

编程日记 2026/4/26 11:58:43

机器人基础深度学习基础

参考： （1）【具身抓取课程-1】机器人基础 （2）【具身抓取课程-2】深度学习基础 1 机器人基础从平面二连杆理解机器人学正运动学：从关节角度到末端执行器位置的一个映射逆运动学：已知末端位置…...

编程日记 2026/4/25 21:56:48

Java语法进阶

目录： Object类、常用APICollection、泛型List、Set、数据结构、CollectionsMap与斗地主案例异常、线程线程、同步等待与唤醒案例、线程池、Lambda表达式File类、递归字节流、字符流缓冲流、转换流、序列化流、Files网络编程十二、函数式接口Stream流、方法引用一…...

编程日记 2026/5/1 14:43:52

探索 paraphrase-MiniLM-L6-v2 模型在自然语言处理中的应用

在自然语言处理（NLP）领域，将文本数据转换为机器学习模型可以处理的格式是至关重要的。近年来，sentence-transformers 库因其在文本嵌入方面的卓越表现而受到广泛关注。本文将深入探讨 paraphrase-MiniLM-L6-v2 模型，这…...

编程日记 2026/5/3 16:16:32

《chatwise：DeepSeek的界面部署》

ChatWise：DeepSeek的界面部署摘要本文详细描述了DeepSeek公司针对其核心业务系统进行的界面部署工作。从需求分析到技术实现，再到测试与优化，全面阐述了整个部署过程中的关键步骤和解决方案。通过本文，读者可以深入了解DeepSee…...

编程日记 2026/4/26 20:26:46

论计算机网络技术专业如何？创新

计算机网络技术专业是顺应数字化时代发展的朝阳专业，前景十分广阔。它聚焦于计算机网络的规划、建设、维护与管理，从基础的网络布线、设备配置，到复杂的网络安全防护、云计算架构搭建，都在专业学习范畴内。该专业毕业生就业面广，可在互联网企业从事网络工程师岗位，负责搭…...

编程日记 2025/4/22 21:53:49

2. 【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--什么是微服务--微服务概述与演变

在软件架构不断演进的今天，微服务架构已成为许多企业构建现代化应用的首选方案。本文将深入探讨微服务的基本概念、演变历程及其出现的背景和推动因素，同时分析当前微服务在业界的应用现状和未来趋势，为读者提供一个全面的视角，理…...

编程日记 2026/3/6 6:47:21

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

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

相关文章：