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

网站发帖功能怎么做/查排名的网站

news 2025/8/7 0:47:30

网站发帖功能怎么做,查排名的网站,关键词优化网站,一元云购手机网站建设snabbdom.js Snabbdom 是一个虚拟 DOM 库，专注提供简单、模块性的体验，以及强大的功能和性能。在学vue的过程中，虚拟dom应该是听的最多的概念之一，其借鉴snabbdom.js进行开发。 1、创建文件，安装snabbdom 这里已经创建…

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 modulesclassModule, // makes it easy to toggle classespropsModule, // for setting properties on DOM elementsstyleModule, // handles styling on elements with support for animationseventListenersModule, // 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