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

news2024/12/17 11:53:54

先把官方文档已经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.coloradmin.cn/o/1140328.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

工业级PoE交换机的工作原理

工业级POE交换机非常普遍,在许多供电不便的项目中被广泛使用,主要用于数据传输通信。大多数工业级POE交换机都是非网管型的,即插即用,配置简单,非常方便!然而,您了解它的工作原理吗?…

电机控制运放选型基本知识

概述 电机控制中一般使用运放搭配检流电阻实现电流采样。以下几个运放参数作为基本的考量对象。 共模电压和差模电压 共模电压 这个参数表示运放正负输入端分别对地的电压的平均值,即运放两端输入电压的中点电位,超过规格书限制的共模输入电压将损坏运…

Linux系统下的文件系统、各文件系统下目录结构及作用

要利用任何Linux系统,你需要对Linux的文件和目录(也称文件夹)了解。 Linux shell命令行中,文件和目录不是直观看见。需要使用:cd、ls、pwd等shell命令在目录之间切换。 Linux文件被收集到目录中,目录形成一个层级或树状结构: 一个目录可能包含其他目录,这些目录被称为子…

2023年下半年WSK-PETS5考试内容大纲及题型解析

国家公派留学人员全国外语水平考试(WSK-PETS5)成绩作为国家留学基金委(CSC)认可语言成绩证明,一直备受公派访问学者、博士后申请者的关注。随着下半年考试时间的临近,知识人网小编特整理出本次考试内容大纲…

小程序request请求封装

以上为本人的项目目录 1.首先在utils中创建request.js文件封装request请求,此封装带上了token,每次请求都会自带token,需要你从后端获取后利用wx.setStorageSync(token,返回的token),不使用的话就是空。 直接复制即可,需要改一下…

Forrester Wave报告:百度智能云15项能力第一,获评中国人工智能/机器学习平台领导者 入选Forrester领导者象限

Forrester Wave报告:百度智能云15项能力第一,获评中国人工智能/机器学习平台领导者 入选Forrester领导者象限! 日前,国际权威咨询机构Forrester发布了最新的《The Forrester Wave™:中国市场人工智能/机器学习平台厂商…

了解单域名证书和通配符证书的区别,选择合适的SSL证书解决方案

随着互联网的不断发展,网站安全性问题一直备受关注,在保护网站数据安全的过程中,SSL证书一直发挥着至关重要的作用。而在选择SSL证书时,单域名证书和通配符证书是两种常见的选择。本文将详细介绍单域名证书和通配符证书的区别&…

Eigen库的学习使用

环境准备 在虚拟机上安装Eigen sudo apt-get install libeigen3-dev 下载好视觉SLAM十四讲对应的代码后,下载KDevelop,KDevelop位于Ubuntu系统的软件仓库,可以使用apt-get来安装。 1.打开project,选择对应目录下的CMakeLists.tx…

接口测试--Postman变量

Postman是我们做接口测试的常用工具之一,然而对于刚接触Postman的小伙伴们来说,往往对这款工具支持的各类变量感到迷茫,傻傻分不清这些不同级别的变量都有哪些区别、分别适用于哪些场景。 本次分享将对Postman各类变量的创建,执行…

门店私域流量系统:打开营销新世界的大门

当前,门店私域流量系统已经成为了企业营销的重要利器。通过建立属于自己的私域流量平台,可以让门店更好地了解客户需求,提高营销效果,实现精细化营销闭环。门店私域流量系统有哪些重点功能? 1. 用户画像:通…

【黑产攻防道03】利用JS参数更新检测黑产的协议破解

任何业务在运营一段时间之后都会面临黑产大量的破解。验证码和各种爬虫的关系就像猫和老鼠一样, 会永远持续地进行博弈。极验根据十一年和黑产博弈对抗的经验,将黑产的破解方式分为三类: 1.通过识别出验证码图片答案实现批量破解验证,即图片…

浏览器下载视频插件使用

AIX智能下载器(图片/视频/音乐/文档) - Microsoft Edge Addons软件介绍: AIX智能下载器可高效实现下载管理,网页图片,视频,音频等内容的嗅探和下载,同时扩展集成多个网站的智能脚本,快速提取你想要的内容。…

【zip密码】7-zip分卷压缩方法

想要压缩的文件过大,想要在压缩过程中将文件拆分为几个压缩包并且同时为所有压缩包设置加密应该如何设置? 想要分卷压缩文件并加密一起操作就可以完成了,设置方法如下: 打开7-zip,选中需要压缩的文件,选择…

基于Java的财务管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding) 代码参考数据库参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

毕业论文Word文档中排版各种问题(持续更新中)

目录 封面信息信息对齐 快捷键使用公式公式编号并右对齐 表格续表并自动添加表头和标题 参考文献添加参考文献一篇文献交叉引用多篇文献交叉引用 参考文章链接 这个是在目前正在写论文过程中遇到一些问题,然后边解决边记录的,有些混乱,主要是…

【开源】基于SpringBoot的森林火灾预警系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 系统基础模块2.3 烟雾传感器模块2.4 温度传感器模块2.5 历史记录模块2.6 园区数据模块 三、系统设计3.1 用例设计3.1.1 森林园区基础系统用例设计3.1.2 森林预警数据用例设计 3.2 数据库设计3.2.1 烟雾…

性能测试工具——Jmeter的安装【超详细】

目录 1、性能测试工具:JMeter和LoadRunner对比 2、为什么学习JMeter? 3、JMeter环境搭建 3.1、安装JDK 3.2、下载安装JMeter 3.3、配置环境变量 2.4、启动验证JMeter是否安装成功 4、认识JMeter的目录结构 1)bin目录:存放…

接口自动化测试工具,Postman使用详解

一、概念 1、Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件,Postman分为Postman native app和Postman Chrome app两个版本。目前Chrome app已经停止维护,官方也不推荐使用该版本。 2、官网下载地址:http://www.getpostman…

便利连锁:如何增加收益?教你一招轻松搞定!

自动售货机,作为零售行业的一项颠覆性技术,正逐渐改变着我们的购物方式和商业格局。这一创新技术不仅重新定义了零售业务模式,还为企业提供了更多的机会来满足不断演变的消费者需求。 客户案例 便利连锁店 成都某便利连锁店面临一系列挑战&am…

input 输入中文,高频触发 onchange和oninput事件(CompositionEvent API解决)

问题描述: input onchange和oninput 事件输入中文时高频触发。 输入字母,数字,符号都没问题: 输入中文时问题就出来了: 每个拼音字母都触发了change,甚至输入法里的nin’hao 把拼音分开的字符也会触发。…