Nuxt.js--》解锁 Nuxt 项目的潜力从配置开始,迈向成功
博主今天开设Nuxt.js专栏,带您深入探索 Nuxt.js 的精髓,学习如何利用其强大功能构建出色的前端应用程序。我们将探讨其核心特点、灵活的路由系统、优化技巧以及常见问题的解决方案。无论您是想了解 Nuxt.js 的基础知识,还是希望掌握进阶技巧,本专栏都将满足您的需求。接下来让我们一起踏上 Nuxt.js 的旅程,开启一段令人兴奋的前端开发之旅!
需要了解的前置知识:
搜索引擎优化(SEO):是一种通过优化网站和内容,以提高在搜索引擎中的排名和可见性的过程。它是一种有助于网站获得更多有机(非付费)流量的策略和技术。但是采用vue.js开发的应用系统对SEO并不友好。
客户端渲染(CSR):客户端渲染是一种 Web 应用程序的渲染方式,其中页面的内容和结构主要由客户端浏览器在运行时生成和呈现,而不是在服务器端生成。在客户端渲染中,服务器主要负责提供数据和基本的 HTML、CSS 和 JavaScript 文件,然后将这些文件发送给客户端浏览器。浏览器接收到这些文件后,会解析 HTML 和 CSS,并执行 JavaScript 代码来生成动态内容和交互。
服务器渲染(SSR):服务器渲染是一种 Web 应用程序的渲染方式,其中页面的内容和结构主要在服务器端生成,然后发送给客户端浏览器进行显示。在服务器渲染中,服务器接收到客户端的请求后,会根据请求的 URL 和参数等信息,生成相应的 HTML、CSS 和 JavaScript 文件,并将这些文件作为响应返回给客户端浏览器。浏览器接收到文件后,直接显示其中的内容,无需再执行额外的操作。
客户端渲染与服务器渲染的区别:在选择服务器渲染还是客户端渲染时需要综合考虑项目需求、技术复杂性和性能要求等因素。一般来说,对于需要快速加载、对 SEO 有较高要求的网站,服务器渲染可能更适合;而对于需要复杂交互和实时更新的应用,客户端渲染可能更具优势。
Vue.js如何实现SSR:vue.js通用应用框架Nuxt,其提供了平滑的开箱即用的体验,建立在同等的vue.js技术栈之上,但抽象出很多模板,并提供了一些额外的功能,例如静态站点生成。通过NUXT可以根据约定的规则,快速的实现Vue SSR。
目录
nuxt基础配置基础讲解
配置主机和端口号:在nuxt项目中如果想更改主机和端口号很简单,只需在 package.json 文件中新增一个config节点,为了便于区分我将主机和端口号随便设置(修改配置文件需要重启项目):
-
"config": {
-
"nuxt": {
-
"host": "127.0.0.2",
-
"port": "1818"
-
}
-
},
终端执行 npm run dev 运行项目,得到的结果如下,可见我们配置的主机和端口号生效了:
当然也可以采用另一种方式,在nuxt.config.js 文件中新增server选项,该选项用于配置nuxt应用程序的连接服务器连接变量,默认的服务器连接如下:
如果想运行项目自动打开浏览器,只需在 dev 命令后面加上 -- open 即可运行项目自动打开浏览器
别名: 在nuxt中,~或@ 别名用于关联 srcDri属性,~~或@@别名则用于关联 rootDir属性,例如如果打算将图像链接至/static/目录下,则可以使用 ~ 别名。
-
<template>
-
<img src="~/static/img1.jpg" />
-
</template>
nuxt.config.js文件配置讲解
当我们使用nuxt构建工具时,默认状态下将得到nuxt.config.js文件,该文件是设置整个项目的全局文件,当打开文件时,应看到如下选项(或属性):
-
export default {
-
mode: 'universal',
-
target: 'server',
-
head: {...},
-
css: [],
-
plugins: [],
-
components: true,
-
buildModules: [],
-
modules: [],
-
build: {},
-
// 未出现的重要选项,根据项目需要自己添加配置
-
env: {},
-
loading: {},
-
pageTransition: {},
-
layoutTransition: {},
-
}
现在搭建的项目,除了mode、target(这两个现在删掉了)、head、components,其他大多数内容为空,我们可以通过这些自定义nuxt来满足某些特定的项目,接下来将对这些选项及其应用方式分别讲解:
mode选项:用于定义应用程序的“本质”,即通用应用程序或SPA,该选项默认值为universal,当采用nuxt开发SPA时,将该选项值修改为spa即可。现如今该选项删除,后期文章会讨论通用模式。
target选项:用于设置应用程序的部署目标,即作为服务器端渲染应用程序或静态生成应用程序进行部署,对于服务器端渲染部署,target默认值为server,现如今该选项删除,后期会讲解。
head选项:用于定义应用程序的 <head> 块中所有默认元标签,我们可以进行多项自定义配置,比如添加项目所需的JavaScript和CSS库:
-
export default {
-
head: {
-
title: 'npx_nuxt',
-
htmlAttrs: {...},
-
meta: [
-
//...
-
],
-
script: [
-
{ src: 'https://cdnjs.lounflare.com../../jquery.min.js' }
-
],
-
link: [
-
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-
{ rel: 'stylesheet', href: 'https://cdn/.../foundation.min.css' }
-
]
-
}
-
}
css选项:用于添加全局css文件,这些文件可以是 .css、.less或.scss文件,也可以是直接从项目的node.js/node_modules/目录中加载的模块和库,方式如下:
-
css: [
-
'jquery-/jquery-ul-min.css',
-
'@/sataic/less/styles.less',
-
'~static/css/normalze.css',
-
],
plugins选项:用于添加JavaScript插件,这些插件在Vue根实例之前进行运行,考察代码如下:
-
export default {
-
plugins: ['~/plugins/vue-notifications']
-
}
components选项:用于设置/components目录下的组件是否应自动进行导入,如果将components选项设置为true,那么我们无须通过手动方式导入组件,这一点很人性化,也没必要设置false。
buildModules选项:用于注册已构建的模块,这些模块仅在应用程序的开发和构建期使用。
modules选项:用于向项目中添加nuxt模块,考察以下代码:
-
export default {
-
modules:[
-
'@nuxtjs/axios',
-
'~/modules/example.js'
-
]
-
}
此外,我们还可以利用modules选项直接创建内联模块,如下:
-
export default {
-
modules:[
-
function () {
-
//...
-
}
-
]
-
}
build选项:用于自定义webpack配置,比如我们想在项目中以全局方式安装jQuery,且无需使用import语句,可通过webpack的ProvidePlugin()函数,即可实现jQuery的自动加载。
-
import webpack from 'webpack'
-
export default {
-
build:{
-
plugins:[
-
new webpack.ProvidePlugin({
-
$: "jquery"
-
})
-
]
-
}
-
}
env选项: 用于设置nuxt应用程序客户端和服务器的环境变量,默认值未空对象,当在项目中使用axios时,env选项将十分有用。考察案例如下:
-
// nuxt.config.js
-
export default {
-
env: {
-
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
-
}
-
}
随后我们就可以在axios插件中使用env属性,如下:
-
// plugins/axios.js
-
import axios from 'axios'
-
-
export default axios.create({
-
baseUrl: process.env.baseUrl
-
})
loading选项:用于自定义nuxt应用程序加载组件,如果不打算使用默认加载组件,则可以将loading选项设置未false:
-
// nuxt.config.js
-
export default {
-
loading: false
-
}
pageTransition和layoutTransition选项:用于自定义nuxt应用程序中页面和布局过渡的默认属性
-
// nuxt.config.js
-
export default {
-
pageTransition: {
-
name: 'fade'
-
}
-
layoutTransition: {
-
name: 'fade-layout'
-
}
-
}
添加element-ui框架
在外面创建nuxt项目的时候,有一个步骤是让我们选择是否下载 UI组件库 ,当时我选择的none,现在当我们想使用ui组件库的时候,需要自行进行下载了:
这里以element举例吧,首先我们要知道何为Element UI 及 Element Plus?Element UI是一款基于Vue2.x 的界面框架;Element Plus是一款基于Vue3.x 的界面框架,因为这里我们使用的是nuxt2版本,该版本也是适配vue2的,所以我们要下载element-ui这个组件库,话不多说直接开始:
在终端执行如下命令进行安装element-ui组件库:
npm i element-ui -S
安装完成之后,直接在根目录创建一个 plugins 文件夹,该文件夹用于包含JavaScript函数,如需要在实例化Vue根实例之前运行的全局函数,所以我们在该文件创建 element-ui.js 文件,用于存放element-ui组件库的相关配置,如下:
在我们创建的 element-ui.js 文件中添加如下信息:
-
import Vue from 'vue'
-
import Element from 'element-ui'
-
// import locale from 'element-ui/lib/locale/lang/en'
-
import locale from 'element-ui/lib/locale/lang/zh-CN' // 引入中文插件
-
-
Vue.use(Element, { locale })
-
// Vue.use(Element)
接下来需要我们在 nuxt.config.js 中配置如下信息:
配置完nuxt.config.js需要重新运行项目,然后在pages中随便写一下element-ui语法检验一下:
局部head配置
在讲解 nuxt.config.js 文件中的相关配置的时候,我已经表明了该文件是全局生效的文件,了解nuxt的朋友都知道,该框架的主要目的是提高 SEO ,所以在某种情况下我们需要对某些局部的组件进行相应的head设置,如下:
-
<template>
-
<div>
-
关于我们
-
</div>
-
</template>
-
-
<script>
-
export default {
-
// 设置 head 相应局部配置
-
head() {
-
return {
-
title: '关于我们',
-
meta: [
-
{ hid: 'description', name: 'description', content: '关于此页面的描述' },
-
{ hid: 'keywords', name: 'keywords', content: '关于此页面的关键字' },
-
]
-
}
-
}
-
}
-
</script>
设置完成之后,我们就可以对某个单独的局部组件页面进行相应的head设置:
查看网页源代码也可以看到我们设置的某些内容和关键字,方便能够被爬虫爬到:
当然这个head的内容也可以动态的展示,类似那种新闻列表,在当前页面点击不同的新闻,head下的title和描述都会发生相应的改变,这里就不再过多赘述了,简单提一下。
nuxt配置modules
在上文讲解的 nuxt.config.js 中的modules模块,仅仅是简单的介绍了一下,接下来将详细介绍该配置项的使用,拿我们常用的 axios 举例,当我们正常安装的axios时命令如下,这种方法虽然能够实现axios,在不二次封装axios的前提下,每个组件如果想使用axios都需要单独去引用:
npm i axios -S
在 nuxt 框架中提供了另外一直安装 axios 的命令,即使你没有二次封装axios,在每个单独的组件中也不需要额外的去导入axios,直接使用即可。
npm i @nuxtjs/axios -S
既然我们都用了nuxt框架,肯定选择的是nuxt给我们推荐的方法,使用第二种方法需要如下配置:
-
// nuxt.config.js
-
modules: [
-
'@nuxtjs/axios',
-
]
当然如果想配置代理的话,需要按照如下命令:
npm i @nuxtjs/proxy -S
本文章主要介绍了下Nuxt.js项目的基础配置,下篇文章将继续讲解Nuxt.js的相关知识,关注博主不迷路,学习更多前端知识!
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhhfccia
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22