简介
nuxtjs-extensions 是一个基于 Nuxt.js 框架的扩展包，集成了许多常用的插件和组件，能够快速搭建出比较完整的网站框架。本文主要介绍如何使用该扩展包。
安装
npm install nuxtjs-extensions
使用
在 Nuxt.js 的配置文件 nuxt.config.js 中，新增如下配置：
modules: [ 'nuxtjs-extensions' ]
然后，就可以开始使用该扩展包中集成的插件和组件了。
插件
axios
axios 是一款基于 Promise 的、用于浏览器和 Node.js 的 HTTP 客户端，可以用来发起 XMLHttpRequests 请求和 Node.js 中的 http 请求。
nuxtjs-extensions 集成了 axios，并对其进行了一些自定义配置，如默认的 baseURL、是否带上 cookie 等。
在 Nuxt.js 的 context 中，可以直接使用 this.$axios 来调用 axios 的各种方法。
fontawesome
fontawesome 是一款常用的图标字体库，提供了海量的矢量图标。
nuxtjs-extensions 中集成了 fontawesome，直接通过 class 名就可以渲染该库中的图标。在模板中使用如下格式：
<i class="fas fa-user"></i>
vue-lazyload
vue-lazyload 是一款用于 Vue.js 的懒加载插件，可以使用它来延迟加载图像。
nuxtjs-extensions 中集成了 vue-lazyload，可以在图片的 src 属性上使用 v-lazy 来实现懒加载。如下：
<img v-lazy="img-url">
vue-scrollto
vue-scrollto 是一款 Vue.js 的插件，可以用来实现滚动到指定位置。
nuxtjs-extensions 中集成了 vue-scrollto，在需要滚动的元素上使用 v-scroll-to 指令即可。如下：
<div v-scroll-to="'#target'">点击这里滚动到目标位置</div> <div id="target">要滚动到的位置</div>
组件
Header
Header 组件是一个常用的网站顶部导航栏组件，可以方便地配置导航栏项和路由。
使用方法：
在 Nuxt.js 的页面中，引入 Header 组件：
-- -------------------- ---- -------
----------
-----
------- --------------- --
------
-----------
--------
------ - ------ - ---- -------------------
------ ------- -
----------- -
------
--
---- -- -
------ -
--------- -
- ------ ------- ----- --- --
- ------ -------- ----- -------- --
- ------ ---------- ----- ---------- -
-
-
-
-
---------Banner
Banner 组件是一个用于展示幻灯片或轮播图的组件，可以设置轮播的图片和链接。
使用方法：
在 Nuxt.js 的页面中，引入 Banner 组件：
-- -------------------- ---- -------
----------
-----
------- ---------------- --
------
-----------
--------
------ - ------ - ---- -------------------
------ ------- -
----------- -
------
--
---- -- -
------ -
------- -
- ---- ------------- ----- --------- --
- ---- ------------- ----- --------- --
- ---- ------------- ----- --------- -
-
-
-
-
---------结语
本文介绍了 nuxtjs-extensions 的安装和使用方法，以及其集成的一些常用的插件和组件。希望能够帮助读者快速上手该扩展包，从而更快地搭建出完整的网站框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9b3d1de16d83a66dcd