Nuxt3 持续学习

news/2024/7/10 3:02:04 标签: javascript, vue

什么是 Nuxt?

Nuxt 的目标是让 Web 开发变得直观且高效 ,同时考虑到出色的开发人员体验。

为什么是 Nuxt?

要了解什么是 Nuxt,我们需要了解创建现代应用程序需要什么:

一个 JavaScript 框架带来了反应性和 web 组件,我们选择了Vue.js。
一个在开发中支持热模块替换并捆绑你的代码用于生产的捆绑器,我们支持Webpack 5和Vite。
为了在支持旧版浏览器的同时编写最新的 JavaScript 语法的转译器,我们为此使用了esbuild。
Nuxt为 开发中的应用程序提供服务,同时也支持服务器端渲染或 API 路由,Nuxt 使用h3实现部署多功能性,例如无服务器、worker、Node.js 和无与伦比的性能。
一个处理客户端导航的路由库,我们选择了vue-router。
这只是冰山一角,想象一下必须为您的项目设置所有这些,使其工作,然后随着时间的推移维护它。自 2016 年 10 月以来,我们一直在这样做,调整所有配置以为任何 Vue 应用程序提供最佳优化和性能。

Nuxt 负责所有这些,因此您可以专注于重要的事情:创建您的 Web 应用程序。

在此设置之上,Nuxt 提供了一个可遵循的目录结构,专注于特定功能,让您专注于创建而不是配置。

它是如何工作的?

Nuxt 由不同的核心包组成:

核心引擎:nuxt3
打包程序:@nuxt/vite-builder和@nuxt/webpack-builder
命令行界面:nuxi
服务器引擎:@nuxt/nitro
开发套件:@nuxt/kit
Nuxt 2 桥:@nuxt/bridge
我们建议阅读每个概念,以全面了解 Nuxt 功能和每个包的范围。

你是 Nuxt 吗?

Nuxt 是您的 Vue.js 项目的支柱,它提供了结构以自信地构建您的项目,同时保持灵活性。

可通过强大的模块生态系统和钩子引擎进行扩展,可以轻松连接您的 REST 或 GraphQL 端点、最喜欢的 CMS、CSS 框架等。PWA 和 AMP 支持与您的 Nuxt 项目仅隔一个模块。


http://www.niftyadmin.cn/n/1162887.html

相关文章

Nuxt3 持续学习 -- 【快速创建一个 Nuxt3 项目】

创建项目 打开一个终端,或从Visual Studio Code打开一个集成终端,并使用以下命令创建一个新的启动器项目: npx nuxi init nuxt3-app注:node 版本需要高于 v14.16.0 进入项目文件夹安装依赖 yarn install启动服务 yarn dev -o浏览器会自动…

Nuxt3 -- 路由篇

普通路由 nuxt3会自动整合vue-router,并且映射pages/目录到应用的routes配置中。 [{path: /,component: ~/pages/index.vue,name: index,} ]动态路由 如果我们在文件名或者文件夹名称里面包含了方括号,它们将被转换为动态路由参数。 -| pages/ ---| …

Nuxt3--布局模板

默认布局 那些放在layouts/目录下的.vue文件会被自动加载进来&#xff0c;如果我们创建的.vue名为default.vue&#xff0c;将会被用于项目所有页面中作为布局模板。 layouts/default.vue&#xff1a; <template><div>default.vue:<slot /></div> &l…

Nuxt3 -- 组件 Components

相信大家在写组件的时候各种导入和注册操作重复去写肯定很烦&#xff0c;这点 Nuxt 中已经帮我们解决了&#xff0c;直接使用就行了。 自动导入组件 我们把Vue组件放在components/目录&#xff0c;这些组件可以被用在页面和其他组件中&#xff0c;以往我们使用这些组件需要导…

使用vue-cli3.0搭建适配移动端的项目

使用vue-cli3.0搭建适配移动端的项目 适配移动端&#xff0c;禁止用户缩放页面 meta标签中的content属性里有一个widthdevice-width的值&#xff0c;这个值就是用来告诉浏览器&#xff0c;该页面将要使用设备的宽度来解析&#xff0c;后面的属性值则是告诉该页面&#xff1a;…

vue 移动端 cli3.0 build 打包低版本浏览器兼容性

现代模式 有了 Babel 我们可以兼顾所有最新的 ES2015 语言特性&#xff0c;但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015 代码会更冗长&#xff0c;运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015&#…

vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息

如需使用 vue-meta-info 配置title和meta按照以下步骤&#xff1a; 1.安装 npm install vue-meta-info --save2.在main.js引入 import MetaInfo from vue-meta-info Vue.use(MetaInfo)3.在vue页面配置 <template>... </template><script>export default …

数组函数forEach()、map()、filter()、includes()、find()、every()、some()的使用

1. forEach() 遍历数组全部元素&#xff0c;利用回调函数对数组进行操作&#xff0c;自动遍历数组.length次数 示例&#xff1a; var arr [6, 5, 4];var total 0;arr.forEach(function(value, index, arr) {console.log(当前值&#xff1a; value);console.log(当前值对应…