新框架Nue.js以及如何搭建框架(详细介绍)

先把官方文档已经github放在这里
链接: Nue官方文档👈点击即可跳转
链接: Nue官方github👈点击即可跳转

入门

NueJS是一个非常小(2.3kb minzipped)的JavaScript库,用于构建用户界面。它是Nue工具集的核心。它就像Vue.js、React.js或Svelte,但没有钩子、效果、道具、门户、观察者、注入、暂停或其他不寻常的抽象。学习HTML、CSS和JavaScript的基础知识,就可以开始了。

Nue最大的好处是,您需要更少的代码来做同样的事情。您需要编写的代码数量相差2-10倍并不罕见。例如,这里有一个用Nue编写的自定义列表框组件:

在这里插入图片描述

上面我们可以看到:用react和nue写同一个组件
以Headless UI中的Listbox组件为例,其编码风格的差异
React用了2537行,vue用了1913行,而Nue只用了208行。

这是来自官方得一段话:
Nue为前端开发带来新级别可扩展性的三个原因:
1,关注点分离,易于阅读的代码比“意大利面条代码”更容易扩展。
2,极简主义,一百行代码比一千行代码更容易扩展
3,人才分离,当用户体验开发人员专注于前端的前端,而JS/TS开发人员则专注于后端的后端时,您的团队技能将得到最佳调整:

具体表现还是要时间来证明。

前提

1,熟悉命令行
2,安装Bun和node
3,VSCode扩展Visual Studio用户(可选)

创建

两种创建方法。

第一种:直接用git克隆Nue官方项目

# clone the repository
git clone https://github.com/nuejs/create-nue.git --depth 1

克隆之后如下

克隆的Nue官方的项目

删掉里面的 .git 文件夹

用终端打开刚才克隆下来的文件

终端打开文件

下载依赖

在这里插入图片描述

我这里就安装好了

在这里插入图片描述

之后再到文件下输入运行npm run start

在这里插入图片描述

以上就是第一种方法。

我们在他的基础页面上可以看到,有这么一句话:
Nue is a set of tools to make web developer’s life easier
意思就是:Nue是一套让web开发人员的生活更轻松的工具
轻松不轻松,我暂时还不知道。我现在就知道,又**要学新框架了。

第二种:

通过npm、pnpm或bun安装Nue JS
vue,react这些都是有creat一键生成的。
这里官方也说明了,后续会更新出creat指令

在这里插入图片描述

翻译如下:

在脚本文件夹下查找有关如何进行服务器端渲染和客户端编译的文档脚本。

NOTE:随着nue工具集的进展,create-nue会不断更新。最终,演示网站是由即将推出的web应用程序构建器(Nuekit)生成的,但目前,它只是了解Nue JS如何工作的示例脚本。

NOTE2:正确的npm create nue<destination>命令即将发布

我这里使用的是npm安装Nue

npm install nuejs-core

在这里插入图片描述

安装好了之后直接引入所需要的就行。
例如

import { render, parse, compile } from 'nuejs-core'

可以对照官方文档引入自己所需要的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/156184.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫收集今日热榜数据:聚合全网热点排行榜

pip install websocket-client 废话不多说数据展示: 代码: 创建工作簿和工作表 # 创建工作簿和工作表 workbook openpyxl.Workbook() sheet workbook.active sheet.title 实时热榜 设置标题行 titles ["序号", "平台", &qu…

洗地新天花板:CEYEE希亦顶配机皇T800 Pro洗地机多点发力上市开售

2023年11月1日,CEYEE希亦正式发布高端清洁产品无线洗地机希亦T800 PRO,创新性地实现了洗地场景深度清洁体验的新突破,彻底解决了清洁行业20多年来技术发展难题,颠覆式引领行业向水汽混动时代迈进,推动了整个市场向“智…

微信小程序:两层循环的练习,两层循环显示循环图片大图(大图显示、多层循环)

效果 代码分析 外层循环 外层循环的框架 <view wx:for"{{info}}" wx:key"index"></view> wx:for"{{info}}"&#xff1a;这里wx:for指令用于指定要遍历的数据源&#xff0c;即info数组。当遍历开始时&#xff0c;会依次将数组中的每…

第06章 索引的数据结构

第06章 索引的数据结构 1. 索引及其优缺点 1.1 索引概述 MySQL官方对索引的定义为&#xff1a;索引&#xff08;Index&#xff09;是帮助MySQL高效获取数据的数据结构。 **索引的本质&#xff1a;**索引是数据结构。你可以简单理解为“排好序的快速查找数据结构”&#xff…

斯坦福发布 最新 GPT 模型排行榜 AlpacaEval【AI工具免费使用】

文章目录 &#x1f4cc;提炼❓什么是 AlpacaEval&#x1f50e;AlpacaEval 排行榜 包含的 测试 模型 和数据&#x1f4af;在不同的测试集上各个大模型的能力评分&#x1f680;AlpacaEval Leaderboard 大模型的能力综合评分&#x1f4bc; 普遍国内白领 如何快速应用 大模型&#…

万物摩尔定律:人工智能技术的快速迭代将使人类万劫不复?

第一次工业革命&#xff1a;蒸汽机时代&#xff1b; 第二次工业革命&#xff1a;电气化时代&#xff1b; 第三次工业革命&#xff1a;信息化时代&#xff1b; 第四次工业革命&#xff1a;智能化革命。这一场革命正在上演&#xff0c;是人工智能&#xff08;AI&#xff09;带…

甄知燕千云+汉得AIGC中台,智能化驱动员工与客户服务新生产力!

2023年是AIGC的爆发之年&#xff0c;随着AI进入大模型时代&#xff0c;AIGC也成为当下最热门的新型生产力工具&#xff0c;每个业务和每个产品都值得用AI重做一遍也越来越成为共识。如何快速使用AIGC来使AI的能力场景化落地&#xff0c;真正做到业务创新的AI赋能&#xff0c;已…

基于松鼠算法的无人机航迹规划-附代码

基于松鼠算法的无人机航迹规划 文章目录 基于松鼠算法的无人机航迹规划1.松鼠搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用松鼠算法来优化无人机航迹规划。 1.松鼠搜索算法 …

大厂面试题-JVM为什么使用元空间替换了永久代?

目录 面试解析 问题答案 面试解析 我们都知道Java8以及以后的版本中&#xff0c;JVM运行时数据区的结构都在慢慢调整和优化。但实际上这些变化&#xff0c;对于业务开发的小伙伴来说&#xff0c;没有任何影响。 因此我可以说&#xff0c;99%的人都回答不出这个问题。 但是…

Open3D(C++) 迭代最小二乘拟合平面(间接平差法)

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,爬虫网站自重 一、算法原理 见:《误差理论与测量平差基础》第六章 二、代码实现 #include <iostream> #include<Open3D\Open3D.h>int main

SandboxAQ推出量子安全“守卫军”!开源框架和加密算法元库Sandwich

Sandwich示意图&#xff08;图片来源&#xff1a;网络&#xff09; 未来几年&#xff0c;IT领域需要对当今计算机通信网络中使用的密码学协议进行一些重大更改&#xff0c;以确保它们仍然安全&#xff0c;且对未来的量子计算机具有应对能力。 其中一个关键特征称为加密敏捷性…

MySQL的安装和配置

文章目录 一、数据库介绍1.1 数据库的定义1.2 数据库的分类 二、MySQL服务器安装2.1 Windows安装2.2 Windows中重装MySQL 三、客户端连接MySQL服务器四、SQL分类 一、数据库介绍 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库? 文件保存数据有以下几个缺点&#x…