引文最近公司项目中使用了 Nuxt 框架，进行首屏的服务端渲染，加快了内容的到达时间 (time-to-content)，于是笔者开始了对 Nuxt 的学习和使用。以下是从源码角度对 Nuxt 的一些特性的介绍和分析。FEATURES服务端渲染（SSR）Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件
Nuxt.js 是什么？Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。它的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。除此之外，Nux
1、nuxt.config.js
* server: {
port: '3000',//服务端口号
host: '0.0.0.0'
}
* 全局的配置文件
2、layouts
* 默认default，自定义组件不会省略index
* 路由组件标签<nuxt/>
* layout() {//使用自定义布局组件
return
文章目录1. 插件机制干嘛的?1.1 编写插件步骤1.1.1 步骤一:1.1.2 步骤二:1.1.3 步骤三:1.1.3.1 所以为什么会这样呢???1.1.3.2 插件配置权限2. 自定义axios2.1 步骤一:2.2 步骤二:2.3 步骤三:2.4 步骤四:2.5 步骤五:2.6 插入: asyncData中使用axios3. 自定义axios原理分析图 1. 插件机制干嘛的?nuxt提供
转载
2024-09-10 11:50:08
362阅读
服务端渲染服务器知识：koa、node.js将同⼀个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激 活"为客户端上完全可交互的应⽤程序。应⽤场景：应⽤需要更好的 SEO应⽤需要更快的内容到达时间 (⾸屏渲染时间)，特别是对于缓慢的⽹络情况或运⾏缓慢的设备。更⼤的服务器端负载较⾼的学习成本⼀些外部扩展库使⽤会受限nuxt安装 npx create-nuxt-a
服务器：Nginx 面板：宝塔面板 项目打包第一步肯定是打包咯，前提是项目已开发好了以及没有啥Bug了哈npm run build打包好后，你会在项目根目录下发现多了个 .output 文件夹打开这个文件夹，将里面的所有文件压缩成压缩包压缩包格式推荐 .rar ，其它格式尤其是.zip格式可能会造成有中文名的文件的名称乱码，从而会导致项目无法正常访问上传服务器前提是你要有个云服务器，推荐安装宝塔面
转载
2024-05-07 08:27:09
1212阅读
一、初始化NuxtJS项目这里我们手动来初始化一个NuxtJS项目，方便理解。具体官方文档参照：nextJS官方文档 首先先创建一个文件夹可以取名为 NuxtJS_demo，并在此文件夹下执行以下命令 ：npm init -y
npm install nuxt此时我们的文件夹中会生成package.json文件，这时候我们可以把package.json文件中的scripts添加一个执行dev指令如
转载
2024-08-12 10:07:32
959阅读
前言哈喽大家周五好，又是一个开开心心的周五了，接下来就是三天小团圆啦，这里先祝大家节日快乐咯，希望都没有加班哈哈，今天公司发了月饼，嗯~时间来不及了，上周应该搞个活动抽中几个粉丝发月饼的，下次吧，这里先预告一下，圣诞节活动，给粉丝送苹果吧哈哈，不过听起来好 low 呀，大家有好的想法可以下边评论或者来群里一起交流哟~说接上文，昨天咱们第一次的接触到了一个新的框架 Nuxt《二七║ Nuxt 基础：
转载
2024-08-13 11:26:46
124阅读
Nuxt 本周再来翻译一些技术文章，本次预计翻译三篇文章如下：[04.[译]使用Nuxt生成静态网站]()(Generate Static Websites with Nuxt)[05.[译]Web网页内容是如何影响电池功耗的]()(How Web Content Can Affect Power Usage)[06.[译]在现代JavaScript中编写异
前端渲染：
vue、react等单页面项目应该这样子部署到服务器
貌似从前几年，前后端分离逐渐就开始流行起来，把一些渲染计算的工作抛向前端以便减轻服务端的压力，但为啥现在又开始流行在服务端渲染了呢？如vue全家桶或者react全家桶，都推荐通过服务端渲染来实现路由。搞得我们慌得不行，不禁让我想起一句话：从来没有任何一门语言的技术栈像Javascript一样，学习者拼尽全力也不让精
要写在末尾pathPrefix 配置导入组件时，是否包含组件的目录（默认包含）prefix 可自定义导入组件时的前缀最终效果详见下方代子目录，请确保它是最后一个。//})
原创
2024-08-24 14:24:44
0阅读
# Nuxt3 Axios实现教程
## 1. 整体流程
下面是实现"Nuxt3 axios"的整体流程：
| 步骤 | 描述 |
|---|---|
| 1 | 安装axios库 |
| 2 | 创建一个axios实例 |
| 3 | 在Nuxt3中配置axios模块 |
| 4 | 在组件中使用axios |
## 2. 具体实现步骤
### 步骤1：安装axios库
首先，你需要
原创
2023-08-23 10:01:36
1883阅读
# Nuxt3 与 jQuery 结合使用
## 简介
Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以帮助我们快速构建单页面应用程序（SPA）和静态网站。而 jQuery 是一个流行的 JavaScript 库，用于简化 HTML 文档的遍历、事件处理、动画等操作。
在本文中，我们将介绍如何在 Nuxt3 中使用 jQuery，并结合代码示例演示它的用法。
## 安装 jQ
原创
2024-02-20 04:21:05
523阅读
webpack的详细配置使用过程一、不使用vue-cli脚手架二、使用vue-cli脚手架2.x三、使用vue-cli脚手架3.x webpack的使用依赖node.js环境，node.js安装配置见(这是别人写的，简单易懂)：node.js安装配置一、不使用vue-cli脚手架首先全局安装(使用 webpack 4+ 版本，还需要安装 cli)： npm install webpack web
小聊：最近写了一个项目，需要打包部署，过程还是比较繁琐的，因为需要先配置运行环境。准备采用 pm2 管理项目运行，需要在服务器安装 pm2，而安装 pm2 的话用 npm 命令最方便，所以还要下载 node 环境。那么，就让我们一步步的完成 Nuxt3 项目上传的完整过程吧。同样是实操成功的演示，请放心阅览。开发环境是Window，部署环境是Linux。开发工具为VSCode，部署服务器为阿里云。
转载
2024-05-11 15:58:53
236阅读
nuxt的项目部署到线上环境，有多种方法，这里分享我使用的方法，一步步照着配置，就可以配置成功~ （1）项目先执行npm run build 打包好 （2）服务器安装node 和pm2依赖服务器：切换到希望安装这两个依赖的目录下，依赖可以用于多个node项目，这里我新建了node_project文件夹安装 node: 第一步下载：curl -O https://nodejs.o
转载
2024-05-24 22:12:31
89阅读
nuxt项目配置 1.在nuxt.config.js文件中配置 1.1.build的配置// 通过执行命令nuxt build --analyze来启用查看编译构建结果
build: {
analyze: true
},
// 为 JS 和 Vue 文件设定自定义的 babel 配置。
babel: {
babelrc: false,
转载
2023-12-21 12:10:53
372阅读
对nuxt3中的useFetch封装成类似axios的封装，方便vue3项目移植到nuxt3，让useFetch的使用方式替换成axios的使用习惯
在本文中，我将向你介绍如何使用Nuxt.js 3创建一个开源项目。Nuxt.js是一个基于Vue.js的开源框架，可以帮助你快速搭建Vue应用程序。
首先，让我们来看一下整个实现"Nuxt3 开源项目"的流程：
| 步骤 | 操作 |
| --- | --- |
| 1 | 创建一个新的Nuxt.js 3项目 |
| 2 | 编写代码并提交到GitHub |
| 3 | 将项目发布到NPM |
原创
2024-05-07 10:53:45
361阅读
1.性能分析 network分析 Lighthouse分析 利用浏览器的Lighthouse工具不仅能够了解到首屏渲染速度等信息，并还能提供相应优化建议
原创
精选
2023-11-30 13:56:37
2329阅读
