Vue.js 和 Nuxt.js

关键词：

【中文标题】Vue.js 和 Nuxt.js【英文标题】：Vue.js and Nuxt.js 【发布时间】：2018-06-10 08:46:16 【问题描述】：

您好，首先感谢那些回答这个问题的人。这个问题可能愚蠢 问。 我正在将我的水疗中心从 vue.js 切换到 vue.js 提供的 nuxt，但现在写到我很麻烦，因为整个 nuxt 的工作方式之间的可见性为 0%。

问题：

如何注册全局组件。 如何在客户端行为的某些用户上切换 nuxt 中的布局。 在哪里编写 vue.use(someplugin)。 如何编写中间件导出方法，该方法使用用户 ip 连接到服务器而不是加载页面。 vue.js中如何处理环境变量 如何将数据从任何中间件和插件传输到我正在使用的组件。 有什么方法可以分离 vue 组件以及各自的方法和数据。

由于我无法继续我的项目而导致的当前问题

在 ~plugins/registerPlugin.js 中使用 vue.use(plugins) 注册模块，例如：

    'use strict';

    /*
    MODULE IMPORTS
    */

    // npm modules.
    import Vue from 'vue';

    // temp modules. ex modules for registration.
    import __vueCookie from 'vue-cookies'; // npm: provide cookie set and get.
    import __veeValidate from 'vee-validate'; // npm: provide field validation.
    import __moment from "vue-moment"; // npm: filter plugin for vue.js.
    import __vueLocalStorage from 'vue-localstorage'; // npm: provide local storage api.
    import __vueSessionStorage from 'vue-session'; // npm: module for managing session storage.
    import __vueResource from 'vue-resource'; // npm: vue resource library.


    /*
     PLUGIN REGISTRATION
    */

    // use vue resource library.
    Vue.use(__vueResource);

    // vue validate for input validation.
    Vue.use(__veeValidate);

    // vue filter plugin for date and time.
    Vue.use(__moment);

    // cookie plugin manager for vue.
    Vue.use(__vueCookie);

    // local storeAge manager for vue.
    Vue.use(__vueLocalStorage);

    // session storage manager for vue.
    Vue.use(__vueSessionStorage);

【问题讨论】：

我建议在开始之前阅读 Nuxt 网站上的整个指南。我想你的很多问题都在那里得到了解答：nuxtjs.org/guide 【参考方案1】：

这是我对问题 1-5 的回答。 6和7对我来说并不完全清楚。也许您想重写它们？

如何注册全局组件。

在/plugins中创建一个插件文件，然后添加到nuxt.config.js

plugins: ['~/plugins/components.js']

Have a look here.

如何在客户端的某些用户上切换 nuxt 中的布局 行为。

Have a look into this discussion

在哪里写 vue.use(someplugin)

您可以将它们添加为“nuxt”插件，并将它们也添加到nuxt.config.js。 Have a look here how to do it.

vue.js中如何处理环境变量

您也在nuxt.config.js 中设置它们。 See here.

【讨论】：

谢谢先生的回复，您能告诉我在哪里放置在组件中重复的方法，并且是静态文件夹，适合包含配置文件。

我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据

】我想为vue.js(nuxt.js)中的每个组件加载和填充数据【英文标题】：Iwanttoloadandpopulatethedataforeachcomponentinvue.js(nuxt.js)【发布时间】：2017-11-2807:56:44【问题描述】：我按如下方式启动项目。vueinitnuxt/express我的目录是...components|-slider.vu... 查看详情

使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本

】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】：Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】：2018-05-0717:29:21【问题描述】：我正在使用nuxt.js（基于vue.js）构建自定义网站，我需要使用合作伙伴提... 查看详情

基于vue.js的ssr技术—nuxt.js

为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择，让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情

Vue-Router 和 i18n 与 Nuxt

】Vue-Router和i18n与Nuxt【英文标题】：Vue-Routerandi18nwithNuxt【发布时间】：2021-03-0220:48:42【问题描述】：我正在将一个带有vue-router的项目从Vue.js转移到Nuxt.js。经过数小时的尝试和谷歌搜索，我设法让一切正常工作，但有一个我无法... 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”

】使用Jest测试NUXT.js和Vue.js应用程序。获取“在mapState()中找不到[vuex]模块命名空间”和“[vuex]未知操作类型”【英文标题】：TestingaNUXT.jsandVue.jsappwithJest.Getting\'[vuex]modulenamespacenotfoundinmapState()\'and\'[vuex]unknownactiontype\'【发布时间... 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情

Vue.js (Nuxt) 返回 JSON 数据

】Vue.js(Nuxt)返回JSON数据【英文标题】：Vue.js(Nuxt)ReturnJSONData【发布时间】：2021-10-1709:40:34【问题描述】：我尝试使用Nuxt.js制作JSONAPI。但是我请求了一个URL并且返回了html代码（网站的源代码。如：view-source:https://website.com）。我... 查看详情

Nuxt js (vue js) 禁用默认头链接

】Nuxtjs(vuejs)禁用默认头链接【英文标题】：Nuxtjs(vuejs)Disableddefaultheadlinks【发布时间】：2022-01-2306:32:26【问题描述】：我正在创建一个系统，我正在为我的应用程序的前端使用vue-nuxt框架。到目前为止，这是一个很棒的js框架，但... 查看详情

(Nuxt.js/Vue.js) - 脚本只运行一次，更改路由/刷新页面后停止运行

】(Nuxt.js/Vue.js)-脚本只运行一次，更改路由/刷新页面后停止运行【英文标题】：(Nuxt.js/Vue.js)-Scriptonlyworksonce,stopsworkingafterchangingroute/refreshingthepage【发布时间】：2019-08-1609:51:21【问题描述】：我正在将我的项目网站“转移”到Vue.j... 查看详情

当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

】当nuxt.js(vue.js)中的路由更改时，Facebook分享按钮消失【英文标题】：Facebooksharebuttondisappearwhenroutechangedinnuxt.js(vue.js)【发布时间】：2021-11-1913:01:57【问题描述】：在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中，我正在使用fullcodeexampl... 查看详情

如何测试 nuxt.js asyncData 并获取钩子

】如何测试nuxt.jsasyncData并获取钩子【英文标题】：Howtotestnuxt.jsasyncDataandfetchhooks【发布时间】：2020-12-1715:34:59【问题描述】：我一直在尝试测试使用nuxt（asyncData和fetch挂钩）的文件，我在测试vue.js正常生命周期时没有问题，但我... 查看详情

前端vue进阶实战：从零打造一个流程图拓扑图项目nuxt.js+element+vuex(代码片段)

本系列教程是用Vue.js+Nuxt.js+Element+Vuex+开源js绘图库，打造一个属于自己的在线绘图软件，最终效果：topology.le5le.com。如果你觉得好，欢迎给文章和开源库点赞，让我们更有动力去做好！本系列教程源码地址：Github一、创建项目框... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

estssr和ssr的区别

...g）是服务器端渲染，可以使用Node.js服务器渲染网页；2、Nuxt.js是一个基于Vue.js的框架，提供了许多服务器端渲染的功能，基本上可以把Vue.js应用变成一个完整的应用程序；3、Nuxt.js提供了一个非常强大的静态站点生成器，可以让... 查看详情