VUE源码解析：2、snabbdom介绍与配置，环境搭建

最新推荐文章于 2021-08-14 16:36:28 发布

sunly_

最新推荐文章于 2021-08-14 16:36:28 发布

阅读量527

点赞数 3

分类专栏： vue2

本文链接：https://blog.csdn.net/qq_40745143/article/details/117808021

版权

vue2 专栏收录该内容

71 篇文章 10 订阅

订阅专栏

snabbdom.js
Snabbdom 是一个虚拟 DOM 库，专注提供简单、模块性的体验，以及强大的功能和性能。
在学vue的过程中，虚拟dom应该是听的最多的概念之一，其借鉴snabbdom.js进行开发。

1、创建文件，安装snabbdom

这里已经创建好一个空文件夹，打开命令行工具cmd
npm init
npm i -S snabbdom

得到如下图文件
在这里插入图片描述

2、运行环境配置，不能在node.js环境运行，需要在webpack和webpack-dev-server开发环境
这里需要注意必须安装webpack@5，不能装webpack@4

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

3、根目录下新建 webpack.config.js文件

// 从webpack官网：https://webpack.docschina.org/ 参考配置
const path = require('path');

module.exports = {
	// 入口文件
	entry: './src/index.js',
	// 出口
	output: {
		// 虚拟打包路径，就是说文件夹不会真正生成，而是在8080端口虚拟生成
		publicPath: 'xuni',
		// path: path.resolve(__dirname, 'dist'),
		// 打包出来的文件名
		filename: 'bundle.js',
	},
	devServer:{
		// 端口号
		port:8080,
		// 静态资源文件夹
		contentBase:'www',
	}
};

下图是根据 webpack.config.js新增加的两个目录，结构如下图
在这里插入图片描述

4、修改package.json

"scripts": {
	"dev": "webpack-dev-server"
},

npm run dev 跑起来的实际就是 webpack-dev-server 命令，就回去读取8080端口号和静态文件夹www

5、启动 npm run dev

OK项目已经正常启动了~！
在这里插入图片描述
虚拟打包文件在：http://localhost:8080/xuni/bundle.js

项目中可以看到并没有xuni文件夹，并不会被真正的物理生成，只是虚拟生成

6、在www下的index.html 引入 /xuni/bundle.js 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>snabbdom</title>
	</head>
	<body>
		<h1>你好</h1>
		<script src="/xuni/bundle.js"></script>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
可以看到/xuni/bundle.js已经引入成功

7、跑通snabbdom官方示例的程序：snabbdom

将这块代码放入src下的index.js中

import {
	init,
	classModule,
	propsModule,
	styleModule,
	eventListenersModule,
	h,
} from "snabbdom";

const patch = init([
	// Init patch function with chosen modules
	classModule, // makes it easy to toggle classes
	propsModule, // for setting properties on DOM elements
	styleModule, // handles styling on elements with support for animations
	eventListenersModule, // attaches event listeners
]);
// **注意这个地方要在你的index.html中创建一个id为container的盒子**
const container = document.getElementById("container");

const vnode = h("div#container.two.classes", {
	on: {
		click: function() {

		}
	}
}, [
	h("span", {
		style: {
			fontWeight: "bold"
		}
	}, "This is bold"),
	" and this is just normal text",
	h("a", {
		props: {
			href: "/foo"
		}
	}, "I'll take you places!"),
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

const newVnode = h(
	"div#container.two.classes", {
		on: {
			click: function() {

			}
		}
	},
	[
		h(
			"span", {
				style: {
					fontWeight: "normal",
					fontStyle: "italic"
				}
			},
			"This is now italic type"
		),
		" and this is still just normal text",
		h("a", {
			props: {
				href: "/bar"
			}
		}, "I'll take you places!"),
	]
);
// Second `patch` invocation
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

成功：
在这里插入图片描述
到这里环境已经搭好！！！

sunly_

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
VUE源码解析：2、snabbdom介绍与配置，环境搭建

snabbdom.jsSnabbdom 是一个虚拟 DOM 库，专注提供简单、模块性的体验，以及强大的功能和性能。在学vue的过程中，虚拟dom应该是听的最多的概念之一，其借鉴snabbdom.js进行开发。1、创建文件，安装snabbdom这里已经创建好一个空文件夹，打开命令行工具cmdnpm initnpm i -S snabbdom得到如下图文件2、运行环境配置，不能在node.js环境运行，需要在webpack和webpack-dev-server开发环境这里需要注意.
复制链接

扫一扫