Nuxt.js快速上手

Nuxt.js快速上手

  • Nuxt.js快速上手
    • 1、为什么用nuxt
      • vue-cli本身问题
      • 预渲染
      • 服务端渲染(通过SSR)
      • 项目解决seo的方案选择
    • 2、Nuxt安装和使用Nuxt安装和使用
      • nuxt安装和目录结构
      • nuxt生命周期
      • nuxt路由
      • nuxt导航守卫
      • nuxt Vuex状态树
    • 3、Nuxt配置项
      • nuxt配置之head
      • nuxt配置之css
      • nuxt配置之plugins
      • nuxt配置之modules和数据交互
      • nuxt配置代理
      • nuxt配置之loading
      • nuxt配置之loading

Nuxt.js快速上手

1、为什么用nuxt

vue-cli本身问题

  • SEO：即搜索引擎优化是通过优化网站的内容、结构和其他相关因素，以提高网站在搜索引擎中的排名，增加有机（非付费）搜索流量的过程。SEO旨在使网站更容易被搜索引擎索引和理解，并提供与搜索用户意图相匹配的高质量内容。
  • 条件：
    1. 要求是多页面（非SPA）
    2. 包含title、description、keyword等页面描述信息
    3. 网站内容怎么来(页面渲染前拿到数据，还是渲染后拿到数据)
  • 使用Vue CLI构建的Vue项目在打包后会生成一个index.html文件，这是一个单页面应用（Single Page Application，SPA）的入口文件；且不是每个页面都包含各自title、description、keyword等页面描述信息；在页面渲染后才能拿到数据，爬虫无法抓取。故vue-cli存在较差的SEO。

预渲染

  • 渲染就是把数据放到页面上，预渲染就是在页面加载完成之前把数据放到页面

  • 流程：

    1. 读取配置，获取需要预渲染的页面
    2. 发布机模拟浏览器环境打开页面
    3. 页面脚本触发渲染机制
    4. 渲染出当前的页面内容
    5. 获取当前所有的DOM结构
    6. 生成HTML文件

  • 使用插件：prerender-spa-plugin

    • vue项目中安装prerender-spa-plugin，npm install prerender-spa-plugin -S
    • vue.config.js进行配置

  • 修改title描述关键词：vue-meta-info

    • vue项目中安装vue-meta-info，npm install vue-meta-info -S
    • 页面组件进行配置：
    metaInfo:{title:'',meta:[{name:'',content:''}]
}

  • 优点：

    1. 打包生成多页面
    2. 可以解决每个页面单独title描述关键词
    3. 接口数据在html生成之前就放到页面上，爬虫可以抓取到内容

  • 缺点：

    1. 预渲染无法配置动态路由
    2. title描述关键词不能来自接口的数据
    3. 在html页面加载之前数据过来渲染后才有html的dom结构，可能存在页面空白的情况

  • 应用场景：

    • 一个项目某几个页面需要做SEO

服务端渲染(通过SSR)

  • 关于 Nuxt.js - NuxtJS | Nuxt.js 中文网

  • 服务端渲染 (SSR) | Vue.js (vuejs.org)

  • 命令 - NuxtJS | Nuxt.js 中文网

  • 流程：

在这里插入图片描述

  • 应用场景：一个项目中所有页面都需要做SEO

项目解决seo的方案选择

  • 前后端不分离

    • 页面加载压力在后端(服务端)，安全，可以通过SSR来生成具有完整HTML内容的页面，有利于SEO

  • 前后端分离

    • 页面加载压力在前端(客户端)，可以构建现代化的SPA单页面，提供流畅的用户体验

    • SPA单页面应用

      • 预渲染–一个项目某几个页面需要做SEO
      • 服务端渲染–一个项目中所有页面都需要做SEO

  • 选择哪种方案主要取决于具体项目的需求和优先级。对于需要SEO的页面，预渲染或服务端渲染是比较常用的解决方案。而对于不需要SEO或SEO要求较低的页面，可以完全依赖前端的单页面应用架构。

2、Nuxt安装和使用Nuxt安装和使用

nuxt安装和目录结构

  • 前置知识(安装node和vue脚手架)：Vue-CLI安装方法_全局安装vue-cli_Legreay的博客-CSDN博客

  • 报错处理： ‘create-nuxt-app‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。海盗船长说他要扬帆起航的博客-CSDN博客

  • 安装：

    1. npx create-nuxt-app <项目名>，勾选配置随后生成项目

在这里插入图片描述

  1. cd <project-name>，进入项目文件夹

  2. npm run dev，启动项目，应用运行在 http://localhost:3000 上运行

  • Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

  • 目录：

    • 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。对于不需要通过 Webpack 处理的静态资源文件，可以放置在static 目录中。
    • 组件目录 components 用于组织应用的 Vue.js 组件。
    • 布局目录 layouts 用于组织应用的布局组件。
    • 中间件目录middleware 目录用于存放应用的中间件。
    • 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
    • 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
    • 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
    • store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
    • nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
    • package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
    • 别名：或@对应srcDir，~或@@对应rootDir，默认情况下srcDir 和 rootDir 相同。

nuxt生命周期

  • Nuxt 2 - Nuxt Lifecycle

在这里插入图片描述

服务端生命周期：

  • nuxtServerInit(store,context) {} – 在服务端渲染期间调用，可以用于初始化 Vuex 状态
    • 参数1：vuex上下文
    • 参数2：nuxt上下文
//	store/index.js
export const state = {token: ''
}export const mutations = {setToken(state,token) {state.token = token;}    
}export const actions = {nuxtServerInit(store,context) {store.commit('setToken','123456')console.log(store,'nuxtServerInit');}
}
  • Route Middleware – 类似于vue中的导航守卫，可以在每次路由切换之前执行一些共享的逻辑，比如身份验证、路由拦截或其他自定义操作等
//全局 nuxt.config.js进行配置，创建文件夹并创建文件
//	nuxt.config.js
router:{middleware:'auth'
}
//	middleware/auth.js
export default function () {console.log('auth middleware');
}//页面 页面中进行配置，创建文件夹并创建文件
//	page/index.vue
<script>
export default {middleware: 'auth',//第二种写法 middleware(){}
}
</script>
//	middleware/auth.js
export default function () {console.log('auth middleware');
}
  • validate({params,query}){} – 校验url参数
//	pages/index.vue
validate({params,query}){console.log('validate');return /^\d+$/.test(query.id);
}
  • asyncData({params,query}){} – pages中的页面请求数据**(也只有pages目录中的页面组件才可以去用，asyncData中没有this)**，在组件渲染之前调用，用于在服务端或客户端获取异步数据，并将数据合并到组件的数据中
//	pages/index.vue
asyncData({params,query}){console.log('asyncData');
},
  • fetch({app,store,params}){} – 在组件渲染之前调用，用于在服务端或客户端获取异步数据。与 asyncData 不同的是，fetch 方法不会将数据合并到组件的数据中，而是通过返回一个 Promise 对象来处理异步数据。fetch有this。
//	pages/index.vue
fetch({app,store,params}){console.log('fetch');
},

服务端和客户端共有的生命周期

在这里插入图片描述

beforeCreate(){console.log('beforeCreate');
},
created(){console.log('created');
},

客户端生命周期

  • 和vue中生命周期的一模一样

nuxt路由

自动生成

  • 路由 - NuxtJS | Nuxt.js 中文网

  • Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

  • 页面之间使用路由，使用< nuxt-link >标签。

//	pages/index.vue
<nuxt-link :to="{name:'list',query:{id:1},params:{id:2}}">列表页</nuxt-link>

使用router.js

  1. 下载：@nuxtjs/router，npm i @nuxtjs/router -S

  2. 下载完成后在nuxt.config.js的modules模块进行配置

    modules:['@nuxtjs/router'
],

  3. 把router文件放入nuxt项目根目录，必须是router.js

  4. 修改router.js的内容

  5. nuxtjs/router返回的内容和vue有所不同

    import Vue from 'vue'
import Router from 'vue-router'import MyPage from '~/components/my-page'Vue.use(Router)export function createRouter() {return new Router({mode: 'history',routes: [{path: '/',component: MyPage}]})
}

nuxt导航守卫

router.js

  • vue-cli中怎么用，nuxt中就怎么用，几乎一模一样

nuxtjs

  • 中间件：middleware

    • 全局
    • 局部

  • 插件：plugins

    • 全局
  1. nuxt.config.js进行配置
plugins:['~/plugins/router.js'
],
  1. 新建plugins/router.js
export default ({app}=>{app.router.beforeEach((to,from.next)=>{console.log(to);next();})
}

nuxt Vuex状态树

  • 对于大型复杂项目而言，使用状态树(store)来管理状态(state)十分有必要，所以Nuxt.js内核实现了Vuex
  • 使用：Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：
    1. 引用 vuex 模块
    2. 将 vuex 模块 加到 vendors 构建配置中去
    3. 设置 Vue 根实例的 store 配置项
  • 具体使用同Vuex，可参考Vuex 状态树 - NuxtJS | Nuxt.js 中文网
  • 顺便附上Vuex官网教程，开始 | Vuex (vuejs.org)

3、Nuxt配置项

  • Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。
  • 以下配置修改默认中nuxt.config.js改动

nuxt配置之head

  • 全局
export default {head: {title: 'demo',meta: [{hid:'description',name:'description',content:'xxx'},{hid:'keywords',name:'keywords',content:'xxx'}],},
}
  • 局部
head(){retrun {title: 'demo',meta: [{hid:'description',name:'description',content:'xxx'},{hid:'keywords',name:'keywords',content:'xxx'}],}
}

nuxt配置之css

  • 下载保存reset.css
css: ['~/static/reset.css''@/assets/css/main.scss'
],
  • 注意：关于sass这里引用官网原文

在这里插入图片描述

在这里插入图片描述

nuxt配置之plugins

  • nuxt项目不像vue项目，没有main.js文件，所以直接在nuxt.config.js中引入文件。plugins 属性配置的所有插件会在 Nuxt.js 应用初始化之前被加载导入。
plugins: ['~/plugins/aaa.js','~/plugins/element.js'
],

nuxt配置之modules和数据交互

  • modules 是 Nuxt.js 扩展，可以扩展它的核心功能并添加无限的集成
  • npm install @nuxtjs/axios -S和npm install axios -S区别在于前者可以直接使用而不需要引入，@nuxt/***是Nuxt.js团队提供的官方模块

nuxt配置代理

  1. 安装 npm install @nuxtjs/axios @nuxtjs/proxy -S
  2. nuxt.config.js进行配置
//	nuxt.config.js
modules: ['@nuxtjs/axios','@nuxtjs/proxy'
],
axios:{proxy:true,retry:{retries:3},baseUrl:process.env._ENV == 'prod'?'dev'
} 
proxy:{'/api':{target:'http://localhost:4000',pathRewrite:{'^/api':'',}}
}

nuxt配置之loading

  • 在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。可以定制它的样式，禁用或者创建自己的加载组件。
//	nuxt.config.js
loading: false

//	nuxt.config.js
modules: ['@nuxtjs/axios','@nuxtjs/proxy'
],
axios:{proxy:true,retry:{retries:3},baseUrl:process.env._ENV == 'prod'?'dev'
} 
proxy:{'/api':{target:'http://localhost:4000',pathRewrite:{'^/api':'',}}
}

nuxt配置之loading

  • 在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。可以定制它的样式，禁用或者创建自己的加载组件。
//	nuxt.config.js
loading: false

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

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

相关文章

在生产环境中部署Elasticsearch：最佳实践和故障排除技巧——聚合与搜索（三）

在生产环境中部署Elasticsearch：最佳实践和故障排除技巧——聚合与搜索（三）

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…
阅读更多...
PLUS操作流程、应用与实践，多源不同分辨率数据的处理、ArcGIS的应用、PLUS模型的应用、InVEST模型的应用

PLUS操作流程、应用与实践，多源不同分辨率数据的处理、ArcGIS的应用、PLUS模型的应用、InVEST模型的应用

PLUS模型是由中国地质大学&#xff08;武汉&#xff09;地理与信息工程学院高性能空间计算智能实验室开发&#xff0c;是一个基于栅格数据的可用于斑块尺度土地利用/土地覆盖(LULC)变化模拟的元胞自动机(CA)模型。PLUS模型集成了基于土地扩张分析的规则挖掘方法和基于多类型随机…
阅读更多...
Python爬虫IP代理池的建立和使用

Python爬虫IP代理池的建立和使用

写在前面 建立Python爬虫IP代理池可以提高爬虫的稳定性和效率&#xff0c;可以有效避免IP被封锁或限制访问等问题。 下面是建立Python爬虫IP代理池的详细步骤和代码实现&#xff1a; 1. 获取代理IP 我们可以从一些代理IP网站上获取免费或付费的代理IP&#xff0c;或者自己租…
阅读更多...
阿里云云主机_ECS云服务器_轻量_GPU_虚拟主机详解

阿里云云主机_ECS云服务器_轻量_GPU_虚拟主机详解

阿里云云主机分为云虚拟主机、云服务器ECS、轻量应用服务器、GPU云服务器、弹性裸金属服务器、专有宿主机、FPGA云服务器、高性能计算E-HPC、无影云电脑等&#xff0c;阿里云百科来详细说下阿里云云主机详解&#xff1a; 目录 阿里云云主机 云服务器ECS 轻量应用服务器 云…
阅读更多...
Vue+ElementUI实现选择指定行导出Excel

Vue+ElementUI实现选择指定行导出Excel

这里记录一下&#xff0c;今天写项目时 的一个需求&#xff0c;就是通过复选框选中指定行然后导出表格中选中行的Excel表格 然后这里介绍一个工具箱(模板)&#xff1a;vue-element-admin 将它拉取后&#xff0c;运行就可以看到如下界面&#xff1a; 这里面的很多功能都已经实现…
阅读更多...
淘宝API接口的实时数据和缓存数据区别

淘宝API接口的实时数据和缓存数据区别

电商API接口实时数据是指通过API接口获取到的与电商相关的实时数据。这些数据可以包括商品库存、订单状态、销售额、用户活跃度等信息。 通过电商API接口&#xff0c;可以实时获取到电商平台上的各种数据&#xff0c;这些数据可以帮助企业或开发者做出及时的决策和分析。例如&…
阅读更多...
抓取预测二手车价格的机器学习模型

抓取预测二手车价格的机器学习模型

一、说明 你好&#xff0c;希望那里一切都好&#xff01;今天在本文中&#xff0c;我们有三个不同的部分。1&#xff09;我想与您分享一个主题故事&#xff0c;以便您了解该主题。2&#xff09;我们将深入探讨该过程。您将学习一些网页抓取方法。3&#xff09;然后当然是EDA过程…
阅读更多...
【黑马头条之app端文章搜索ES-MongoDB】

【黑马头条之app端文章搜索ES-MongoDB】

本笔记内容为黑马头条项目的app端文章搜索部分 目录 一、今日内容介绍 1、App端搜索-效果图 2、今日内容 二、搭建ElasticSearch环境 1、拉取镜像 2、创建容器 3、配置中文分词器 ik 4、使用postman测试 三、app端文章搜索 1、需求分析 2、思路分析 3、创建索引和…
阅读更多...
C语言中几种常见数据类型所占字节数

C语言中几种常见数据类型所占字节数

指针是一个特殊的变量&#xff0c;32位机器占4个字节&#xff0c;64位机器占8个字节&#xff1b; **16位编译器&#xff1a; char/unsigned char &#xff1a;1字节 char &#xff1a;2字节 short int&#xff1a;2字节 int/unsigned int&#xff1a;2字节 long int&#xff…
阅读更多...
【STM32】FreeRTOS互斥量学习

【STM32】FreeRTOS互斥量学习

互斥量&#xff08;Mutex&#xff09; 互斥量又称互斥信号量&#xff08;本质也是一种信号量&#xff0c;不具备传递数据功能&#xff09;&#xff0c;是一种特殊的二值信号量&#xff0c;它和信号量不同的是&#xff0c;它支持互斥量所有权、递归访问以及防止优先级翻转的特性…
阅读更多...
解决校园网使用vmware桥接模式，虚拟机与物理机互相ping通，但是虚拟机ping不通百度的问题

解决校园网使用vmware桥接模式，虚拟机与物理机互相ping通，但是虚拟机ping不通百度的问题

遇到的问题 使用校园网时&#xff0c;桥接模式下&#xff0c;物理机可以ping通虚拟机&#xff0c;但是虚拟机ping不通主机 解决方法 在物理机中查看网络相关信息 ipconfig 修改虚拟机网卡信息 vim /etc/sysconfig/network-scripts/ifcfg-ens33 注意 /ifcfg-ens33需要根据…
阅读更多...
Kotlin runBlocking launch多个协程读写mutableListOf时序

Kotlin runBlocking launch多个协程读写mutableListOf时序

Kotlin runBlocking launch多个协程读写mutableListOf时序 import kotlinx.coroutines.delay import kotlinx.coroutines.launch import kotlinx.coroutines.runBlockingfun main(args: Array<String>) {var lists mutableListOf<String>()runBlocking {launch {r…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023